HTML の記述例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rev="made" href="mailto:mail@example.com">
  <title>HyperText Markup Language - Wikipedia</title>
 </head>
 <body>
  <div>
   <h1>HyperText Markup Language</h1>
   <p>HTMLは、<a href="http://ja.wikipedia.org/wiki/SGML">SGML</a>
   アプリケーションの一つで、ハイパーテキストを利用してワールド
   ワイドウェブ上で情報を発信するために作られ、
   ワールドワイドウェブの<strong>基幹的役割</strong>をなしている。
   情報を発信するための文書構造を定義するために使われ、
   ある程度機械が理解可能な言語で、
   写真の埋め込みや、フォームの作成、
   ハイパーテキストによるHTML間の連携が可能である。</p>
  </div>
 </body>
</html>

HTML のマークアップ構造

要素（タグ）

<>で囲まれる箇所
```
<p> 左右が要素 </p> 
```

開始タグと終了タグで階層構造を表現

<ul>
  <li> list
    開始タグと終了タグをまとめた記述も可能 <br />
  </li>
<ul>

属性
- 開始タグに var="foo" という形式で記述される箇所
```
<p align="center">
```
- 要素に固有の性質・特徴を指定
```
上記例では，段落（要素）を中央に表示（属性）
```

HTML の文書構造

HTML のバージョンを示す DOCTYPE 宣言
ドキュメントルート要素である HTML 要素
ドキュメントルート要素内に，文書ヘッダ HEAD 要素，文書本体 BODY 要素

DOCTYPE 宣言

HTML パーサの解析に用いる DTD の判定に利用

Compact HTML 1.0 (i-mode)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN">

HTML3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

HTML 機能一覧

約 100 種類の要素を用いて以下の機能を表現可能

制御構造
HTML 文書の定義，ヘッダ，タイトル，本文，コメント，見出し，段落，水平線
フォント（文字）
大きさ，太字，斜体，当幅，色，書体，アンダーライン，打ち消し線，点滅，上付き，下付き，改行
背景
色，画像，音，動画，配置
意味づけ
文字の強調，アドレス，引用文，挿入文，削除文
リンク
ページリンク，クリッカブルマップ，メールアドレス
レイアウト（配置）
文字寄せ，余白，多段組み，リスト，用語定義，テーブル
フォーム（入力フォーム）
入力フォーム，グルーピング，テキストボックス，パスワードボックス，チェックボックス，ラジオボタン，選択部品，実行ボタン，リセットボタン，フレーム
埋め込み
JavaScript，Java アプレット，その他オブジェクト（画像，動画，音声）

HTML の歴史

1991: HTML 0
CERN（欧州原子力研究機関）に勤めていた Tim Berners-Lee が提案
1993.06: HTML 1.0
一般公開
1993.08: HTML +
1995.11: HTML 2.0 (RFC 1866)
- リスト，段落，水平線などの制御構造の追加
- フォーム
1995.03: HTML 3.0
1997.01: HTML 3.2 (W3C)
HTTP を利用しないオブジェクト（動画, 音声, etc.）のサポート
1997.01: HTML 2.x (RFC 2070)
国際化を考慮した，日本語を扱える最古のバージョン
1997.12: HTML 4.0 (W3C)
CSS の利用による視覚的・感覚的効果
1999.12: HTML 4.01 (W3C)
アクセシビリティを向上した 2008 現在最新の HTML 仕様
2000.01: ISO/IEC 15445:2000 (ISO)
HTML 4.01を参考にし，より厳密に規格化された ISO 規格
2008.01: HTML 5.0 (W3C Working Draft)

類似言語

SGML (Standard Generalized Markup Language)
HTML および XML のスーパーセット
XML
- XHTML
  HTML を XML に適合するように定義し直したマークアップ言語
- SVG, XForms, XQuery, XPath, XSLT, RDF, OWL, etc.

XHTML とは

Extensible Hyper Text Markup Language
HTML を XML に適合するように定義し直したマークアップ言語
XML を採用したため MathML や SVG など他のXML文書の埋め込みが可能

HTML との相違点

XML 宣言が必要

<?xml version="1.0" encoding="Shift_JIS"?>

要素名は小文字

正: <p id="aaa"><em>あああ</em></p>
誤: <P ID="aaa"><EM>あああ</EM></P>

要素は必ず開始タグと終了タグが必要

正: <p><em>あああ</em></p><p>いいい</p>
誤: <p><em>あああ</em><p>いいい

空要素であっても必ず終了タグの付与または開始タグの末尾を付与 " />"

正: <em>あああ</em><br />
誤: <em>あああ</em><br>

正: <em>あああ</em><br/>（非推奨）
正: <em>あああ</em><br></br>（非推奨）
誤: <em>あああ</em><br> </br>

属性値はすべて " " （ダブルクォーテーション）ないし ' '（シングルクォーテーション）で囲む
```
正: <input type="text" size="8" />
正: <input type='text' size='8' />
誤: <input type=text size=8 />
```

属性名記述の省略不可

正: <input type="checkbox" checked="checked" />
誤: <input type="checkbox" checked />

推奨されるメディアタイプが "text/html" から "application/xhtml+xml" に変更
```
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
```

XHTML の歴史と種類

2000.01: XHTML 1.0 (W3C)
HTML 4.01を XML にて再定義
2000.12: HTML Basic (W3C)
PDAや携帯電話などの小規模な端末向けの小さな仕様
2001.05: XHTML 1.1 (W3C)
機能のモジュール化
2006.06: XHTML 2.0 (W3C Working Draft)
2007.07: XHTML Basic 1.1 (W3C)

実利用における HTML

表示方法
- HTML を解析し表示するブラウザが必要
  Internet Explorer, Firefox, Opera, Netscape Navigator, w3m, etc.
問題点
- ブラウザの解釈の差異
  HTML では厳密な表示方法まで定義しないため問題は生じにくいが，CSS や SVG などでは大きな問題
  
  HTMLの表組みを、さまざまなブラウザで表示させた例

HTML 5.0

追加要素

構造要素
- section: 本の一部あるいは章，章のセクション，あるいは基本的に HTML 4 で独自の見出しを持つすべてのもの
- header: ページに表示されるページ・ヘッダー (head 要素とは異なる)
- footer: 細かい文字での説明が入るページ・フッター，E メール・メッセージの署名
- nav: 他のページへのリンクの集まり
- article: ブログや Web マガジン，一覧記事などに掲載されている個々のエントリー

ブロック・セマンティック要素
- aside: 注記やヒント，サイドバー，引用，括弧によるコメントなど，話の流れから外れたもの
- figure: 標題と図を曖昧さを排したブロック・レベルの画像
- dialog: 何人かの人の間での会話

インライン・セマンティック要素
- m: 何らかの形で「マーキング」されていても必ずしも強調されるわけではないテキスト
- time: 歴史上の特定の瞬間
- meter: 指定された範囲内の数値
- progress: GUI アプリケーションのプログレス・バーと同じように継続中のプロセスの状態を表現

埋め込みメディア要素
- video: 動画の埋め込み
- audio: 音声の埋め込み

対話性を表現する要素
- details: デフォルトでは表示されない可能性のある追加情報
- grid: グリッドのコントロール
- menu, command: ポップアップメニューとそのアクションの定義

HTML の将来

文章のセマンティクスを考慮したマークアップ
セマンティック Web 研究への橋渡し

XHTML 2.0

追加要素

section: セクションを表現
h: 見出し（h1-h6 の廃止）
l: 段落等の中での各行 (line) を表現（br の廃止）
quote: 引用（q の廃止）
blockcode: コンピュータ言語のソースコードを記述

拡張要素

nl, label: リスト要素の拡張
dl, dt, dd: 定義リスト要素の拡張
sup, sub: 物理要素の統合（b, i, tt, big, small を廃止）
すべての要素に srctype 属性を付与し，画像などのオブジェクトの埋め込みが可能
すべての要素に href, cite 属性を付与し，参照が可能

HTML の将来

文章のセマンティクスを考慮したマークアップ
セマンティック Web 研究への橋渡し（どちらかと言えば仕様拡張レベル）

HTML 5.0 と XHTML 2.0

WHATWG とは

Web Hypertext Application Technology Working Group
Apple, Mozilla, Opera が主催するブラウザベンダー、ウェブ開発者、次世代HTMLや関連技術の開発に興味を持つ人々の成長中のコミュニティー
2004 年の W3C ワークショップ後に結成

WHATWG からの評判

HTML 5の開発はいつ終わるのですか？
HTML5は、2022年以降にW3C勧告に至ると見込んでいます。2004年半ばから始めましたので、だいたい18年から20年の開発となるでしょう。
どのブラウザベンダーが HTML 5 の開発をサポートするのですか？
Apple, Mozilla そして Opera.
どのブラウザベンダーが XHTML 2.0 の開発をサポートするのですか？
あぁ…コホン…
Microsoft と Internet Explorer はどうですか？
HTML 5は IE との互換性を考慮して開発されています。多くの機能は、JavaScript を使ってシュミレートできます。
なぜ、私たちはHTML 5とXHTML 2.0の両方が必要なのですか？
我々は必要だとは思いません。ウェブコミュニティが必要としていることは、ブラウザに実装されれば、ウェブ上のすべての現存するコンテンツをレンダリングでき、ウェブをよりよい場所にする新たな機能を持つ言語です。XHTML 2.0はそういう言語ではありません。XHTML2 しかサポートしないブラウザは、現存のウェブコンテンツを正しくレンダリングできるはずがありません。