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

女性

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

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

2018.09.21

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

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

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

CSS(スタイルシート)を学習するとイメージが湧きやすいかと思うのですが。

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

人間からすれば、コードを見ればわかるのですが。

検索エンジンには、わかりません。

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

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



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

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

navタグ

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

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

articleタグ

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

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

asideタグ

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

広告や補足記事など。

sectionタグ

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

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

最後に

女性

いかがでしょうか。

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

少し先に進んだ形になっています。

私も最初からコーディングしていませんので、偉そうなこと言えないのですが。

なるべくこういったタグを上手に使い分けて、文書構造をより明確にして。

検索エンジンに伝えたいことを伝えるということかと思います。

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

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

2018.09.25

プログラムの部分ではありませんが。

入力する部品を設置するためのコードを学習していきます。