One Step Ahead

プログラミングやエンジニアリング全般について書いていきます

HTMLのタグの分類

HTML

はじめに

普段はサーバーサイドばかりで、一向にフロントエンドの知識が身についていないのでHTML、CSSを一から復習し直すことにしました。
ということで、HTML, CSSに関しては当分の間、基礎的なことばかりになると思います。

HTML5以前のタグ分類

HTML5以前は、『ブロック要素』『インライン要素』の2つにタグは分類されていました。

ブロック要素は、1つのまとまり(ブロック)として認識される要素のことで、ブラウザで表示される際には前後に改行が入ります。ブロック要素の中には、別のブロック要素やインライン要素を配置することができます。

<div class="outline">
  <div class="inner">
    <p><strong>Hello world!!</strong></p>
  </div>
</div>

インライン要素は、ブロック要素の内容情報として使用される要素のことです。文章の一部(インライン)として扱われます。ブロック要素とは異なり、前後に改行は入りません。インライン要素の中には、文字や別のインライン要素を配置することはできますが、ブロック要素は配置することができません。

<code>
  <span>import System;</span>
</code>

HTML5で新たに導入された考え方

HTML5では、上記で説明した『ブロック要素』『インライン要素』という分類が廃止になりました。
文書の構造をより明確に表現できるように類似した特性に応じてカテゴライズし直され、新たな分類に分けられています。
(MDNでは、これらをContents categories：コンテンツカテゴリと表現しています。)

『文書の構造をより明確に表現できるように』ということですが、具体例としてこのサイトの簡略図を元に、HTML5以前とHTML5での文書構造の違いを見ていきます。
(理解しやすいように簡略化しています。)

f:id:EaE:20210218133403p:plain

HTML5以前であれば、divタグを使用してidやclass属性を使いながら、それぞれのブロックが『何を表しているのか』を表現していました。HTML5以前は、タグだけでは文書構造は分からないため、属性を使用することで開発者が明示的に役割を与える必要がありました。
加えて『役割を与える』といっても、統一された規格に基づいたものではありません。あくまで開発者が、id="header"という属性を付けたから、そのサイトではヘッダとして扱われるというだけです。他のサイトでは、id="head"かも知れませんし、class="header"かも知れません。

f:id:EaE:20210218133900p:plain HTML5では、タグそのものが意味をもっており、idやclassといった属性を使用せずに『何を表しているか』を表現できます。そのため、タグのみで文書構造の表現が完結していてかつ、統一された規格に則ったものになっています。headerタグを使えば、どのサイトであれその要素はヘッダーで、navタグを使えば、どのサイトであれその要素はナビになります。
仮にCSSがなかったとしても、HTMLだけで『どこが何を表しているのか』を統一された規格を元にアウトラインを知ることができます。
(divばかり使ってコーディングするな！と怒られた経験のある方もいるかも知れませんが、この考え方を無視してしまっているためだと思われます。)

カテゴリ分類

カテゴリは以下のように分類されます。

f:id:EaE:20210218004719p:plain

HTML Living Standard より引用
https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content
(本家のサイトではSVGにより、アニメーション付きで各コンテンツを確認できます。)

  • メタデータ・コンテンツ
  • フロー・コンテンツ
  • セクショニング・コンテンツ
  • ヘッディング・コンテンツ
  • フレージング・コンテンツ
  • エンベディッド・コンテンツ
  • インタラクティブ・コンテンツ

合計で7つのカテゴリに分類されます。
※ 図からも分かる通り、1つのタグが複数のカテゴリに含まれる場合もあります。

【メタデータ・コンテンツ】

名前の通り『メタデータ』を取り扱うコンテンツ分類になります。
メタデータ以外のコンテンツに対する『表示』『動作』といった設定はここに記載します。
base, link, meta, noscript, script, style, template, titleなどが該当します。

【フロー・コンテンツ】

bodyタグの内部で本文要素として使用されるものがフローコンテンツとなります。ほぼすべての要素がここに該当します。↑の図からも分かるように、残りのコンテンツは、フロー・コンテンツがさらに細分化されるような形になります。 (一部のメタ要素もここに該当します。)

【セクショニング・コンテンツ】

特定の領域を区切る場合、まとまりを定義し、アウトラインを作成する場合に使用されるコンテンツが分類されます。
article, aside, nav, section

【ヘッディング・コンテンツ】

見出しを表す要素がここに分類されます。
h1, h2, h3, h4, h5, h6, hgroup

【フレージング・コンテンツ】

文書テキストや、テキスト内の段落内のマークアップに使用されるタグなどが分類されます。
a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, link, map, mark, math, meta, meter, noscript, object, output, picture, progress, q, ruby, s, samp, script, select, slot, small, span, strong, sub, sup, svg, template, text, area, time, u, var, video, wbr

【エンベディッド・コンテンツ】

文書構造内に別のリソースをインポートするものなど、埋め込みを行うタグがここに分類されます。
audio, canvas, embed, iframe, img, math, object, picture, svg, video

【インタラクティブ・コンテンツ】

ユーザーに対して対話的なIFを提供するタグがこのコンテンツに分類されます。
a, audio, button, details, embed, iframe, img, input, label, object, select, textarea, video

まとめ

  • HTML5からブロック要素・インライン要素はなくなりコンテンツカテゴリが導入された。
  • 統一された規格に基づき、HTMLだけで文書構造のアウトラインを把握できるようになった。

参考・引用