HTMLでのセマンティクスについて
- ドキュメントの概要を書く
- 対象となりうる読者について書く
HTMLとは HyperText Markup Language の頭文字をとったもので、マークアップ言語のひとつです。
HTMLは1993年に誕生し、初期はIETF、その後はW3Cによって策定され、バージョンを重ねてきました。
現在は WHATWG という団体がが HTML Living Standard を策定し、今も更新され続けています。
HTML は HTML 要素を使ってテキストに意味づけを行います。
HTML 要素は、タグまたは HTML タグと呼ばれるものと同じ扱いをされますが実は違います。
以下の画像をご覧ください。
https://gyazo.com/2922961fe671cbc93999ec99e8c9d615
HTML 要素は、開始タグ・テキスト・終了タグの1セットです。
すなわち、HTML 要素の中にタグが含まれるということです。
他にも、
開始タグに属性と値が付与される場合があります
class 属性と class 名など
テキストや終了タグがない場合があります
img 要素など
HTML におけるセマンティクスとは、その HTML 要素にはどのような目的や役割があるのか？を指定するものです。どのように見えるかといった見た目で判断できるものではありません。
セマンティクスがなされていると、
人間が理解しやすい
機械も理解しやすい（マシンリーダブル）
情報をなめらかに伝えられることが期待できます。
わかりやすくするため極端な例を挙げます。
h1 要素と span 要素を書きました。
code:html
<h1>これは見出しです</h1>
<span>これは見出しではありません</span>
上記の HTML にCSS でスタイルを当ててプレビューします。（以下スクショ）
h1 要素にはブラウザのデフォルトスタイルが付与されています。
span 要素には意図的に h1 要素と同じスタイルを付与しました。
https://gyazo.com/f2685096852981157e6c4146555bcf8c
一見どちらも同じに見えますが、h1 要素と span 要素は目的と役割が異なります。
そのため、見た目を変えた span 要素を h1 要素として使うのは NG です。
目的に応じて要素を使い分けることが大事です。
使い分けるにはどの要素にどの目的があるのか知ることが必要になります。
ここではこの説明をします。
基本的な要素の説明
1ページマークアップするのに使う要素
header, nav, footer, main, section, aside
h~, p, ul, li, ol, dl, dt, dd
a span
※余裕があれば図が作れると良さそう
h1 はページに複数あってもよいか
HTML Living Standard は HTML5 とは異なるものなのか？
同じようで違う
W3C が2019年頃まで HTML5、HTML5.1、HTML5.2 と作っていた
が、WHATWG が策定した HTML Living Standard を元に編集した内容であったため差異があり、W3C は WHATWG のメンバーから強く非難された
最終的に、現在は WHATWGが策定した HTML Living Standard が最新仕様になっている
参考
HTML解体新書