※この記事は「2021年4月20日」に更新しました。
前回は、インライン要素とブロックレベル要素について、紹介しました。
今回は、セクショニングコンテンツについてです。
私が HTML を学習したときは、セクショニングコンテンツというものはありませんでした。
メニューであっても、記事であっても、そのまとまった部分に関して、HTML としての意味をつけることはありませんでした。
CSS(スタイルシート)を学習したことがある方は、理解していただけるかと思います。
つまり、divタグなどでまとめるが、どちらがメニューで、どちらが記事なのかということは、HTML のタグとして区別がなかったのです。
人間からすれば、コードを見ればわかるのですが、検索エンジンには、わかりません。
しかし、HTML5 から、新しくセクションを示すための要素が追加されました。
今回は、その追加された要素について紹介していきます。
セクショニングコンテンツに使う、タグについて
追加されたタグについて、それぞれ見ていきます。
navタグ
navタグは、主要なナビゲーションを囲むときに使います。
他のリンクメニューと区別するために使うのが目的です。
articleタグ
articleタグは、ブログ記事など、独立コンテンツを囲みます。
つまり、囲んだ範囲だけでも、一つのコンテンツとして成立するようなセクションで使います。
asideタグ
asideタグは、メインコンテンツと関連性が低いものを囲みます。
広告や補足記事など。
sectionタグ
sectionタグは、その他、意味のあるまとまりを囲みます。
navタグ、articleタグ、asideタグに該当しないコンテンツに使います。
最後に
いかがでしょうか。
今までは、とりあえずまとまりは divタグで囲んで、あとはスタイルシートで見た目だけ何とかしてというところから、少し先に進んだ形になっています。
私も最初から(セクショニングコンテンツを意識して)コーディングしていませんので、偉そうなことは言えません。
しかし、なるべくこういったタグを上手に使い分けて、文書構造をより明確にして、検索エンジンに伝えたいことを伝えるということだと思います。
次回は、フォームの作成についてです。