HTML タグのセマンティクス化 (H5 を含む)

導入

HTML は、Web ドキュメントのコンテンツのコンテキスト構造と意味を提供します。HTML 自体には表現はありません。たとえば、<H3> は太字でフォントサイズは 2em、<strong> は太字ですが、これらが HTML の表現だとは思わないでください。これは、動作中の HTML のデフォルトスタイルです。したがって、 HTML はページの表現とは何の関係もないことを知っておく必要があります。表現は CSS の役割です。ページにおける HTML の役割は、構造と意味です。簡単に言えば、コンテンツを分割することです。ここにあるものが、私たちが入れるものです。

構造化

Web ページを家に例えると、HTML は鉄筋コンクリートの壁や屋根や梁のフレーム、CSS は装飾材や床のペイントなどに相当します。優れたページ構造とは、CSS 装飾がなくてもページ構造が明確で、家が見えることを意味します。よく話題になる DIV+CSS は単なる一般的な用語であり、この記事全体では DIV ではありません。覚えておいてください: DIV は神ではありません!

セマンティック

HTML は、テキストの内容と意味 (セマンティクス) を補足的に表現したものです。これは、「この行は見出し、これらの行は段落、これは箇条書き、これはリンク」と教えてくれます。「これらの単語は青、あれは赤、この部分は右側、これらは斜体」とは教えてくれません。それが CSS の仕事です。つまり、HTML はコンテンツがどのようなものであるか (またはそれが何を意味するか) を伝えるものであり、それがどのように見えるかを伝えるものではありません。

コードをコピー

コードは次のとおりです。

<div id="ヘッダー">
<div class="H3">元ブリックシージマスター</div>
<div class="h2">ブロックで建物を建てることも芸術です</div>
</div>

<div id="ヘッダー">
<H3>元ブリックシージマスター</H3>
<h2>ブロックで建物を建てることも芸術です</h2>
</div>

セマンティクスの利点は何ですか?

スタイルを削除するとページ構造が明確になる
スクリーンリーダーはウェブページをマークアップして「読み上げる」
SEOに最適
チーム開発とメンテナンスが容易

付録: HTML5 の新しい要素

ラベル	意味	HTML4との比較
<記事>	タグは外部コンテンツを定義します。たとえば、外部のニュースプロバイダーからの新しい記事、ブログからのテキスト、フォーラムからのテキストなどです。あるいは他の外部ソースから	HTML5: <記事></記事> HTML4: <div></div>
<セクション>	タグはドキュメント内のセクションを定義します。章、ヘッダー、フッター、またはドキュメントのその他の部分など。	HTML5: <セクション></セクション> HTML4: <div></div>
<余談>	タグは記事外のコンテンツを定義します。余談の内容は記事の内容に関連したものでなければなりません。	HTML5: <aside> 補足コンテンツは独立したコンテンツですが、ドキュメントコンテンツに関連している必要があります。 </余談> HTML4: <div>Aside のコンテンツは独立したコンテンツですが、ドキュメントコンテンツに関連している必要があります。 </div>
<ヘッダー>	タグはセクションまたはドキュメントのヘッダーを定義します。	HTML5: <ヘッダー></ヘッダー> HTML4: <div></div>
<フッター>	タグはセクションまたはドキュメントのフッターを定義します。通常、作成者の名前、ドキュメントの作成日、連絡先情報などが含まれます。	HTML5: <フッター></フッター> HTML4: <div></div>
<hグループ>	タグは、Web ページまたはセクションのタイトルをグループ化するために使用されます。	HTML5: <hgroup></hgroup> HTML4: <div></div>
<ナビ>	タグはナビゲーションリンクの部分を定義します	HTML5: <nav></nav> HTML4: <ul></ul>
<キャンバス>	タグは、グラフやその他の画像などのグラフィックを定義します。この HTML 要素は、クライアント側のベクターグラフィック用に設計されています。独自の動作はありませんが、クライアント側の JavaScript に描画 API を公開し、スクリプトがキャンバス上に必要なものを描画できるようにします。	HTML5: <canvas id="myCanvas" width="200" height="200"></canvas> HTML4: <object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>
<ビデオ>	タグは、ムービークリップやその他のビデオストリームなどのビデオを定義します。	HTML5: <video src="movie.ogg" controls="controls">お使いのブラウザはビデオタグをサポートしていません。 </ビデオ> HTML4: <object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>
<音声>	タグは、音楽やその他のオーディオストリームなどのサウンドを定義します。	HTML5: <audio src="someaudio.wav">お使いのブラウザはオーディオタグをサポートしていません。 </音声> HTML4: <object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>
<埋め込み>	タグはプラグインなどの埋め込みコンテンツを定義します。	HTML5: <embed src="horse.wav" /> HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object>
<ソース>	タグは、メディア要素 (<video> や <audio> など) のメディアリソースを定義します。	HTML5: <ソース> HTML4: <パラメータ>
<データリスト>	タグはオプションのデータのリストを定義します。入力要素と組み合わせて使用すると、入力値のドロップダウンリストを作成できます。	HTML5: <データリスト></データリスト> HTML4:なし
<詳細>	タグは要素の詳細を定義し、ユーザーはそれをクリックすることで表示したり非表示にしたりできます。 <legend> と一緒に使用して詳細のタイトルを作成します。このタイトルはユーザーに表示され、クリックすると詳細が開いたり閉じたりします。	HTML5: <詳細></詳細> HTML4: <dl style="display:hidden"></dl>
<要約>	タグには、ドキュメントまたはドキュメントフラグメントに関する詳細情報を記述するために使用される詳細要素のタイトルが含まれます。「summary」要素は、「details」要素の最初の子である必要があります。	HTML5: <details><summary>HTML 5</summary>このドキュメントでは、HTML 5 について知っておく必要のあるすべてのことを説明します。</details> HTML4:なし
<図>	タグは要素をグループ化するために使用されます。 <figcaption> 要素を使用して、要素のグループにキャプションを追加します。	HTML5: <figure><figcaption>PRC</figcaption><p>中華人民共和国は 1949 年に誕生しました...</p></figure> HTML4: <dl><H3>PRC</H3><p>中華人民共和国は 1949 年に誕生しました...</p></dl>
<図キャプション>	タグは図要素のタイトルを定義します。「figcaption」要素は、「figure」要素の最初または最後の子として配置する必要があります。	HTML5: <figure><figcaption>PRC</figcaption></figure> HTML4:なし
<マーク>	これは主に、ユーザーに対して強調表示する必要があるテキストを視覚的に提示するために使用されます。 <mark> タグの典型的な用途は、検索結果でユーザーに検索キーワードを強調表示することです。	HTML5: <マーク></マーク> HTML4: <span></span
<メートル>	タグは測定を定義します。最大値と最小値がわかっている測定にのみ使用されます。測定の範囲は、要素のテキストまたは min/max 属性のいずれかで定義する必要があります。	HTML5: <メートル></メートル> HTML4:なし
<出力>	タグは、スクリプトの出力など、さまざまな種類の出力を定義します。	HTML5: <出力></出力> HTML4: <span></span>
<進捗状況>	実行中のプロセスにラベルを付けます。 JavaScript で時間のかかる関数の進行状況を表示するには、<progress> タグを使用できます。	HTML5: <進行状況></進行状況> HTML4:なし
<時間>	タグは日付または時刻、あるいはその両方を定義します。	HTML5: <時間></時間> HTML4: <span></span>
<キージェネレータ>	タグは、Web ページまたはセクションのタイトルをグループ化するために使用されます。	HTML5: <キー生成> HTML4:なし
<コマンド>	タグは、ラジオボタン、チェックボックス、プッシュボタンなどのコマンドボタンを定義します。	HTML5: <command onclick=cut()" label="cut"> HTML4:なし