利用箇所に悩みがちなHTMLタグの解説
こんにちは。アートトレーディングの野菜です。
前回HTMLについての記事を書いた後、『sectionタグとarticleタグの使い分けが良く解らないです』というご質問を頂いたので、今回はそういった使い方に悩んだり、アレどうだったっけ…?ってなりがちなタグについてご紹介してみたいと思います！
コンテンツカテゴリーとコンテンツモデル
現在最新のHTMLは『HTML Living Standard』です。
これはHTML5の次のバージョンにあたります。
HTMLは4と5の間で大きく様変わりしたのですが、その際に新しい概念として『コンテンツカテゴリー』と『コンテンツモデル』というものが導入されました。
ザックリ言うと『コンテンツカテゴリー』はタグの所属するカテゴリー、『コンテンツモデル』はどのカテゴリーを内包できるかのルールになります。
HTML4以前では『ブロック要素』と『インライン要素』という区分に分かれていて、『インライン要素はブロック要素を内包できない』という比較的単純なルールだったのと比べ、だいぶ複雑化しています。
ある程度はこれを把握しておいた方が正しい記述ルールでマークアップできるようになるかと思いますので、まずはそちらからご紹介します。
コンテンツカテゴリー
HTMLタグはそれぞれ0個以上のコンテンツカテゴリーに属しています。
つまり、複数のカテゴリに分類されているタグもあれば、どれにも分類されていないタグも存在している、という状態です。
主要カテゴリーには以下のようなものがあります。
メタデータコンテンツ (metadata content)
フローコンテンツ (flow content)
区分コンテンツ (sectioning content)
見出しコンテンツ (heading content)
記述コンテンツ (phrasing content)
対話型コンテンツ (interactive content)
知覚可能コンテンツ (palpable content)
メタデータコンテンツ
文章に情報を埋め込んだり、他ファイルとの関係性を定義するような、主にheadタグ内に記述するタグがここにカテゴライズされます。
例えば、外部cssファイルを紐づける『link』タグやcssの記述につかう『style』タグなどがこれに当たります。
フローコンテンツ
ページを構成するタグがここにカテゴライズされます。『body』にはいるほとんどのタグがこれに当たります
区分コンテンツ
文章の章や節をなどコンテンツのセクションを明示的に分ける（セクショニング）するためのタグがここにカテゴライズされます。
見出しコンテンツ
これはもうそのままですが、見出し（及び見出しグループ）のカテゴリーです。
記述コンテンツ
段落内で使用する文字列などをマークアップするタグがここにカテゴライズされます。HTML4以前でいうインライン要素に近しい感じと思っていただいて大丈夫かと思います。
対話型コンテンツ
ユーザーとやり取りをするためのタグがこれに当たります。
例えばリンクボタンはユーザーがクリックすると該当のページに遷移できますが、このようなユーザー操作が可能なタグがここにカテゴライズされます。
知覚可能コンテンツ
知覚できるコンテンツという事で、ブラウザ上で描画されて認識されるものは基本的にこれにカテゴライズされます。
動きの制御をしたりするJavaScriptのコード埋め込みにつかう『script』タグなどはブラウザに描画されないので知覚可能コンテンツではない、という感じです。
コンテンツモデル
基本的には、タグごとに上記のカテゴリーのいずれか、または複数がコンテンツモデルとして設定されていますが、無いもの（nothing コンテンツモデル）もあります。これは何も入れられません。例えば空要素はこれに当たります（空要素については便宜上、という事で概念的にはちょっと違うそうです）。
また、『透過的コンテンツモデル (transparent content model)』というコンテンツモデルもあり、これはタグを置いた親要素のコンテンツモデルを継承するというものになります。
例えば『div』と『p』は両方コンテンツカテゴリーが『フローコンテンツ』『知覚可能コンテンツ』です。
ですが、コンテンツモデルは『div』がフローコンテンツ（例外あり）、『p』のコンテンツモデルは『記述コンテンツ』となります。
なので、『div』の中に『div』も『p』も子要素として内包できますが、『p』の中には『p』も『div』も内包できません。
<div>
<div>これはOKな入れ子</div>
<p>これもOKな入れ子</p>
</div>
<p>
<div>これはNGな入れ子</div>
<p>これもNGな入れ子</p>
</p>透過的コンテンツモデルではこれがそのまま継承されることになります。『a』タグが透過コンテンツモデルなのでそれを例にしますが、『div』の子要素『a』は『div』を内包できますが、親が『p』になると子要素の『a』は『div』を内包できなくなる、という挙動が発生します。
<div>
<a>
<div>これはOKな入れ子</div>
</a>
</div>
<p>
<a>
<div>同じ『透過的コンテンツモデル』のタグでもこれはNG</div>
</ａ>
</p>タグの記述ルール、親子関係重要な点になりますので、コンテンツモデルを是非意識してみてください。
sectionタグとarticleタグ
まず最初はご質問も頂いた『section』と『article』について。
この２つはどちらもカテゴリーは『フローコンテンツ 』『区分コンテンツ』『知覚可能コンテンツ』で、コンテンツモデルは『フローコンテンツ 』です。
『区分コンテンツ』にカテゴライズされているのは『section』と『article』他に『aside』と『nav』の4つですが、補足情報を区分する『aside』、ナビゲーションを区分する『nav』というわかりやすいこの二つと違ってどちらも文章を区分するタグになるため判断に悩むケースが多い印象です。
『article』が『記事』を、『section』がそれ以外の『文章の纏まり』を区分けするタグになり、『記事』とただの『文章の纏まり』の差をどう見分けるかという事がポイントです。
基本的には『article』はそれだけで内容が完結している、単独の1ページとしても内容が破綻せずきちんと読み物が成り立つ必要があります。
その部分だけ切り取って第3者に見せるとして、ちゃんと意味が伝わるか、コンテンツとして成り立っているか、という事を一度考えてみてください。
成り立っていれば『article』。そうでなければ『article』ではありません。
その場合は『section』にあたります。
補足説明でなく、ナビゲーションでなく、独立した記事でもない文章の纏まりが『section』となります。
なお、どちらにも言える事ですが、タイトルである『h1～6』タグを入れることが推奨されます。
一応例外は許されるようなのですが、『section』は日本語で言う『節』や『章』にあたる文章の纏まりです。これは基本的にタイトルがあって本文があって、という形式をとります。当然『記事』もタイトルや本文があるのが普通です。
ですので、この形式をとれないが一纏まりにしたい場合（当然ナビゲーションなど他の意味を持っていない場合です）は『article』や『section』ではなく、『div』などで区分けするのが妥当、という事になります。
mainタグ
『フローコンテンツ』と『知覚可能コンテンツ』に属する、主要なコンテンツをマークアップするタグです。
コンテンツモデルは『フローコンテンツ』。
読んで字のごとくメインとなるコンテンツを設定すればいいのですが、前述の『article』と記述箇所が被っちゃったりすることもあり、何をもってしてメインコンテンツというのか…という哲学的な悩みが発生しがちです。
似たようなマークアップをするタグに『header』と『footer』があるのですが、この二つとは違い、ページに1度しか設定できません。
また、親要素は『body』『div』『form（条件付き）』などに限られます。
基本的には、各ページの主題を書いたコンテンツエリアに設定し、サイト内で繰り返し出てくるようなもの（サイトロゴや、グローバルナビ、コピーライトなど全体通して共通するもの）は『main』に入れない、という使い方になるかと思います。
『main』の中に『article』や『section』などが入る、というマークアップになります。
figureタグ
『フローコンテンツ』と『知覚可能コンテンツ』に属します。
コンテンツモデルは『フローコンテンツ』。ただし、『figcaption』タグを入れる場合、最初か最後にしか入れてはいけません。
『figure』はコンテンツの主となる文章などから参照される自己完結型のコンテンツをマークアップするタグです。
『img』タグを括ると思われていたり、子要素に『figcaption』が使えるのでキャプション付きの画像に対して利用するように認識されている事がありますが、必ずしも画像のみに利用するものではないです。
コンテンツにオプションで付けると解りやすくなる図表などで、無くても文章は普通に読める、成り立つ、という時に利用します。
なので、例えば華やかにするために装飾文字を画像で入れている場合、その画像が無いと文章が欠けて読めませんのでfigureではないです。
『p』や『h1~6』など他のタグが妥当になってくると思います。
また、HTMLの説明中にわかりやすいよう見本のコードなどを書いた場合。それが無くても説明文が成り立てば、これも『figure』で良いという事になります。
完全に無関係な画像が主となる文章の真っ最中に入ることはなかなか無いと思いますが、そこから参照されないものなら『figure』は不適切です。
これは例えば模様とかかな…と思いますが、そうなるともうHTMLではなくcssで『background-image』などが妥当なのかなと思います。
ulタグとolタグ
どちらも『フローコンテンツ』（及び子要素『li』が一つでも入っていれば『知覚可能コンテンツ』）に属します。
コンテンツモデルは『li』タグです。プログラムなどに利用したりする『スクリプトサポート要素』もOKです。
この二つはコードの記述ルールなどもほぼ一緒の箇条書きリストタグです。
リストタグは通常の本文より重要度が高く認識され、きちんと使い分けるとSEO対策としても効果的なタグになります。
どちらも箇条書きリストタグではありますが、それぞれ『ul』が順不同・並列のリスト、『ol』は順序が存在するリスト、という明確な違いを持っています。
基本的にデフォルトの表示では行頭文字が『ul』だとマーク、『ol』だとナンバリングですが、これはcssなどで変更が可能です。
記述順が変わっても問題ないか、意味が通じるかどうかでタグを選択してください。
例えば、メニューなどはサイトの各ページの箇条書きとも言えるので、リストタグを利用する事が多いです。
各ページは並列であり、順序関係がない為『ul』が適当になるでしょう。
これがパンくずリストとなると、ページには階層関係があり順序が存在します。
商品一覧と商品詳細ページであれば、一覧→詳細の階層順序であって、逆には出来ません。
こういった順序がある場合『ol』が適当、という事になります。
また、行頭文字が付けたいがためにリストでない物をこのタグに設定するのもあまり適切ではないです。
例えば、リストタグには他に『dl』という用語とその説明をするための定義リストも存在しています。
・猫：哺乳類。可愛い。イエネコに対する通称。
・亀：爬虫類。胴は箱形の甲になっている。可愛い。
上記のような用語とその説明が存在するリストであれば、行頭にマークを付けたいからと言って『ul』を選択するのではなく、『dl』で行頭文字など表示についてはcssで調整するのが適当になるでしょう。
aタグの入れ子
『a』タグは『フローコンテンツ』『記述コンテンツ』『対話型コンテンツ（href属性がある場合）』『知覚可能コンテンツ』に属しています。
コンテンツモデルは『透過的コンテンツモデル』になりますが『対話型コンテンツ』と『a』タグ、『tabindex（フォーカスの制御に使う）』属性のあるタグはNGです。
クリック可能エリアにクリック可能エリアを重ねる、的な記述がNGという感じで覚えてください。
この『a』タグはリンクに利用するので、各種タグの中でも出番が多いタグだと思いますが、HTML5でだいぶ入れ子のルールなどが変化しました。
以前はインライン要素だったのでブロック要素を内包できなかったのですが、現在は内包できるタグがだいぶ増えています。ただし親要素に依存する『透過的コンテンツモデル』なので記述の際はそこに注意してください。
まとめ
いかがでしたでしょうか？
中々普段使わないような言葉も多く出てきたのでちょっとややこしかったのではと思います。
所属コンテンツカテゴリーを全部覚える、とかはもう無理だと思いますので、随時調べながらなどで問題ない！です。
が、概念的なものはざっくりでも把握しておくと色々スムーズだと思いますので、参考にしていただければ幸いです！
それではまた次回もどうぞよろしくお願いいたします！