セマンティックタグ
div だけだと中身がわからない
div はどれも同じ見た目で、名前も付いていません。div が 20 個ならんだページは、書いた本人にも検索エンジンにも読みにくいものです。そこで、役割がそのままタグ名になっているものを使います。これをセマンティックタグと呼びます。意味を持つタグ、という意味です。
ページを分ける 3 つのタグ
ページはたいてい次の 3 つに分かれます。
- header はページの上部です。サイト名やロゴ、名前などを入れます
- main はそのページの主役の中身です。1 ページに 1 つだけ置きます
- footer はページの下部です。著作権表示や連絡先のリンクを入れます
3 つとも div と同じブロック要素なので、見た目は変わりません。変わるのは意味です。読み上げソフトはここから本文だと利用者に伝えられますし、検索エンジンもどこが本題かを判断できます。
今回書くこと
名前の h1 と肩書きの段落を header で囲みます。自己紹介・趣味・経歴のかたまりは main で囲みます。最後に footer をつくり、リンクのリストをその中へ移します。footer にリンクの見出しは要らないので、h2 のかわりに著作権表示の段落を置きます。© と書くと丸で囲んだ C の記号になります。
課題
- h1 と肩書きの段落を header で囲む
- 自己紹介・趣味・経歴を main で囲む
- footer をつくり、著作権表示の段落とリンクのリストを入れる