HTML5 - 主要なセマンティック要素のタグ一覧 (セマンティックタグ)
「セマンティック」という単語を覚える必要は全くないが、概念は知っておくとよいだろう。セマンティックの意味は「意味の塊」だ。
例えばHTMLタグでサイトデザインをする際にdivタグというもので全てのコンテンツのデザインをする事もできるが、これだとdivタグに囲まれた文章が何なのか検索エンジンが判断し辛くなる。
これを例えば記事本文をmainタグで囲めば検索エンジンはmainタグの中にある文章が一番重要なコンテンツだと分かるし、asideタグでサイドバーを作成すると、記事とは別のコンテンツなのだと解釈しやすくなる。
このように意味の塊を表すのがセマンティックと言う。以下にセマンティックタグの一覧を作ったので、用途を確認するとよい。ここでは覚える必要はなく、こんなタグがあるのか。くらいの認識でよい。
主要なセマンティックタグの意味と早見表
| タグ | 説明 |
|---|---|
|
<nav> ... </nav> |
サイトメニュー等のナビゲーションを示す。例えばサイト上部にスクロールしても固定して付いてくるメニューがある。これをnavタグで記述すると検索エンジンもそれがメニューだと分かるだろう。これがナビゲーションである。メニューのリンクをグループ化する役目がある。 |
|
<article> ... </article> |
直訳は新聞や雑誌の記事という意味。独立した記事に使う。例えば学校で野球とサッカーの部活動を紹介するページで、それぞれの部活をarticleタグで囲んで文章を書くと、検索エンジンは関連性のない独立した2つの記事と解釈してくれる。 |
|
<section> ... </section> |
articleタグは独立した記事という意味合いだが、sectionタグは関連した記事を示す。例えば学校の野球のページで5月、6月、7月に行われた試合をそれぞれsectionタグで囲んでその詳細を書くと、検索エンジンは野球のそれぞれの月の試合で相互関連した記事だと分かるだろう。 |
|
<aside> ... </aside> |
サイドバーなど補助的なコンテンツであると示す。広告やカテゴリー、最新の記事一覧など表示するとよい。 |
|
<header> ... </header> |
セクションのトップやサイトを表示して最初に見えるファーストビューに使う。headerタグはページ内で複数使ってもよい。ただしその場合、sectionやarticleのタグで囲まれた一番上に使うとよいだろう。尚、headタグとheaderタグは全くの別物だ。 |
|
<main> ... </main> |
メインコンテンツである事を示す。この中にsectionタグとの相性は良さそうだ。対比したasideタグがあるので、使い分けるとよい。 |
|
<footer> ... </footer> |
コンテンツの下部に配置する。headerタグと同じでページ内に複数あってもよい。サイトの下部に1つだけのイメージがあるがsectionやarticleの下部にそれぞれ使ってもよいだろう。 |
|
<address> ... </address> |
住所を表しそうだが、連絡先の情報を記述する。電話とかメールアドレスとか会社なら住所もこのタグの中に記述するとよいだろう。 |