【HTML講座】セクショニングコンテンツ

セクショニングコンテンツ

※この記事は「2021年4月20日」に更新しました。

前回は、インライン要素とブロックレベル要素について、紹介しました。

インライン要素とブロックレベル要素

【HTML講座】インライン要素とブロックレベル要素

2018年9月21日

今回は、セクショニングコンテンツについてです。

私が HTML を学習したときは、セクショニングコンテンツというものはありませんでした。

メニューであっても、記事であっても、そのまとまった部分に関して、HTML としての意味をつけることはありませんでした。

CSS(スタイルシート)を学習したことがある方は、理解していただけるかと思います。

つまり、divタグなどでまとめるが、どちらがメニューで、どちらが記事なのかということは、HTML のタグとして区別がなかったのです。

人間からすれば、コードを見ればわかるのですが、検索エンジンには、わかりません。

しかし、HTML5 から、新しくセクションを示すための要素が追加されました。

今回は、その追加された要素について紹介していきます。

ぱそた
SE、Web制作、販売を経験した管理人が解説します。



セクショニングコンテンツに使う、タグについて

追加されたタグについて、それぞれ見ていきます。

navタグ

navタグは、主要なナビゲーションを囲むときに使います。

他のリンクメニューと区別するために使うのが目的です。

articleタグ

articleタグは、ブログ記事など、独立コンテンツを囲みます。

つまり、囲んだ範囲だけでも、一つのコンテンツとして成立するようなセクションで使います。

asideタグ

asideタグは、メインコンテンツと関連性が低いものを囲みます。

広告や補足記事など。

sectionタグ

sectionタグは、その他、意味のあるまとまりを囲みます。

navタグ、articleタグ、asideタグに該当しないコンテンツに使います。

最後に

女性

いかがでしょうか。

今までは、とりあえずまとまりは divタグで囲んで、あとはスタイルシートで見た目だけ何とかしてというところから、少し先に進んだ形になっています。

私も最初から(セクショニングコンテンツを意識して)コーディングしていませんので、偉そうなことは言えません。

しかし、なるべくこういったタグを上手に使い分けて、文書構造をより明確にして、検索エンジンに伝えたいことを伝えるということだと思います。

次回は、フォームの作成についてです。

フォームの作成

【HTML講座】フォームの作成

2018年9月25日

プログラムの部分ではありませんが、入力する部品を設置するためのコードを学習していきます。