2019/11/26)HTML5より前は、divでボックスを作りidやclass名をつけ、それらを組み合わせてレイアウトを作成してきました。ヘッダーを表す「header要素」やフッターを表す「footer要素」など、意味をもつ要素が数多く追加されました。それらを適切に組み合わせることで、より直感的で意味を持ったHTMLを記述できるようになっています。imgHTML5は、それぞれに使うべき要素を適切に使うことで、コードをみる人間に伝わりやすいのはもちろん、クローラーやブラウザなどの機械にも正確に情報を伝えることが出来るように設計されています。HTML5で追加された、よく使う要素HTML5で多くのタグが追加されましたが、よく使われるタグには下記のようなものがあります。header要素...ページ全体のヘッダーや、セクション内のヘッダーを表しますfooter要素...ページ全体のヘッターや、セクション内のヘッターを表しますmain要素...ページの主要な内容を表しますnav要素...グローバルナビゲーションなどの主要なナビゲーションを表しますartile要素...独立した1つのコンテンツを表しますsection要素...区切りを表しますaside要素...補足情報や余談的なブロックを表しますセマンティックなHTMLこのように各要素には「意味」が定義されています。それぞれの意味のことをセマンティクスと呼び、意味付けがなされていることをセマンティックと呼んでいます。使うh1もセマンティックな(意味付けがなされている)要素で、ページ内の最も重要な見出しというセマンティクス(意味)を持っています。このようにセマンティックな要素は、以前のHTMLから使われてきましたが、HTML5ではさらに上述したようなheader、footer、navなどの様々な要素が追加され、より明確で詳細に意味づけを行うことができるようになりました。セマンティックなHTMLが必要なのか?なぜセマンティックなHTMLが必要なのでしょうか?いくつか理由がありますがその一つには、「WEBサイトを見ているのが人間だけではない」ということがあげられます。人間だけでないというのは、例えば検索エンジンのクローラーや、視力が弱い方がなどが使う読み上げソフトなどの「機械」がサイトを見ているということです。人間が見れば、ここはサイドバーだな、ここは本文だなというのは見た目でわかります。機械にとってはその識別は非常に難しいものとなります。従来のHTMLだと、どこがサイドバーでどこが本文なのかを理解するのは困難です。セマンティックなHTMLを記述すれば、情報がより正しく伝わり、SEO的にはより正しい評価がされることができますし、読み上げソフトに関しては正しい解釈での音声に変換され、アクセシビリティの向上が見込めます。機械に正しく情報を伝えることは、それを介して情報を受け取る人間に対しても、わかりやすく情報を伝えることにつながるんですね。いったことも踏まえて、HTML5には数多くのセマンティックな要素が準備されているので、私たちコーディングする側はどこでどの要素を使うかをしっかりと把握して、正確に構築することを心がけましょう。それぞれの要素の使い方セクショニング・コンテンツとセクショニングルート要素について要素の説明をするにあたって、セクションや、セクショニング・コンテンツ、セクショニングルート要素について知っておく必要があります。セクション何らかの意味を持った、コンテンツのひとまとまりのことです。セクショニング・コンテンツセクションの範囲を定義するための要素です。以下の要素が用意されています。<article><aside><nav><section>セクショニングルート要素セクションのルート(最上位)として扱われる要素で、セクションの内部に独自のアウトラインを持てます。祖先のアウトラインはセクショニング・ルート要素内には継承されないですし、セクショニング・ルート要素内のアウトラインも、祖先のアウトラインに影響を与えません。以下の要素が該当します。<blockquote><body><details><fieldset><figure><td>header要素header要素は親要素として一番近い、セクショニングコンテンツかセクショニングルート要素のヘッダーを表します。近いセクショニングルート要素がbodyの場合は文書全体のヘッダーを表します。ヘッダーは通常、タイトルや導入部、ナビゲーションなどが含まれます。ページ内に複数使うことができます。文書全体のヘッダーとして使いたい場合は下記のように記述します。<body><header><h1>ロゴなど</h1><nav>ナビゲーションなど<nav></header></body>一番近いセクショニングコンテンツかセクショニングルート要素がbodyなので、ページ全体のヘッダーとして認識されます。ページ全体のヘッダーとして使われる場合、ロゴやナビゲーションを含むことが多いです。セクションのヘッダーまた、header要素は、sectionやarticleなどのセクションのヘッダーとしても使用することができます。</p></article></body>上記の例の場合、一番近いセクショニングコンテンツかセクショニングルート要素がarticleになるので、articleのヘッダーとして扱われます。ここではarticleは記事を表していますので、記事のヘッダーということになります。記事のヘッダーとしてタイトルや公開日などが含まれることが多いです。footer要素footer要素は親要素として一番近い、セクショニングコンテンツかセクショニングルート要素のフッターを表します。近いセクショニングルート要素がbodyの場合は文書全体のフッターを表します。リンクなどの情報が含まれます。文書全体のフッターとして使いたい場合は下記のように記述します。</p><footer><ul>フッターのナビゲーションなど</ul><p>Copyright表示など</p></footer></body>一番近いセクショニングコンテンツかセクショニングルート要素がbodyなので、ページ全体のフッターとして認識されます。ページ全体のフッターとして使われる場合、ナビゲーションやコピーライトなどが含まれます。セクションのフッターfooter要素は、セクションのフッターとしても使用することができます。</p><footer><p>著者:ホゲホゲ</p><p>参考:参考文献のリンク</p></footer></article></body>上記の例の場合、一番近いセクショニングコンテンツかセクショニングルート要素がarticleになるので、articleのフッターとして扱われます。ここではarticleは記事を表していますので、記事のフッターということになります。記事のフッターとして著者や参考文献へのリンクなどが含まれることが多いです。main要素main要素は、そのページの主要なコンテンツを表します。主要なコンテンツですので基本的にそのページ内で1回だけ使うことになります。そのページ固有のコンテンツのみを含め、ページの共通コンテンツである、ナビゲーションやヘッダー、フッターなどは含まないようにします。nav要素の中に入れることはできません。基本的な使い方main要素は下記のようにして使います。<body><header>ページ全体のヘッダー</header><main><article>記事の内容</article></main><footer>ページ全体のフッター</footer></body>上記は、ブログなどのような記事が中心となるサイトを想定しています。主要なコンテンツは記事になるので、articleをmain要素で囲んでいます。navナビゲーションリンクのセクションを表します。ナビゲーションリンクとは、グローバルナビゲーションなどのリンクの集まりのことです。全てのリンクをnav要素に入れる必要はなく、グローバルナビゲーションのような主要なナビゲーションのみをnavに入れます。フッターにあるちょっとしたリンクの集まりはnavに入れる必要はありません。使い方は下記のように、リンクリストをnavタグで囲って使います。</ul></nav>asideasideは周りにコンテンツとわずかに関連しつつも、メインコンテンツではないブロックや補足情報などに使います。以下のような箇所が当てはまるでしょう。asideというスペルにはsideがつくので、一見サイドバーに使う要素と思われがちですが、余談という意味の「aside」ですので、サイドバー以外の場所でも使われることに注意しましょう。実際の例を見てみましょう。href="#">カテゴリー3</a></li></ul></aside><footer>ページ全体のフッター</footer></div></body>上記の例では、記事内の補足情報として使っているのと、サイドバーとしても使っています。このように複数回使っても問題ありませんが、asideを入れ子にすることはできません。article要素article要素は、それ自体が独立したコンテンツとして成り立つブロックを表します。独立したコンテンツとは、その部分だけで見ても内容が完結しているブロックです。下記のような箇所が想定されます。実際にブログの記事をarticleでマークアップしてみましょう。<body><header>ページ全体のヘッダー</header><main><article><h2>記事のタイトル</h2><p>記事の内容記事の内容記事の内容記事の内容</p></article></main><footer>ページ全体のフッター</footer></body>記事の中に、コメントなどのようなコンテンツがある場合、articleを入れ子にしても構いません。sectionsection要素はセクションを表します。セクションというのはコンテンツのひとまとまりのことで、見出しとそれに関する内容が含まれます。絶対ではありませんが、section要素は見出し要素の利用が強く推奨されています。WEBページはセクションが集まってできていると言えます。nav要素などのセクションを表す要素が多数用意されているのはご紹介してきた通りです。それらの要素のどれにも当てはまらない場合が出てくると思いますが、そういった場合に使用するのがsection要素になります。<body><header>ページ全体のヘッダー</header><main><article><header><h2>記事のタイトル</h2><p>記事の内容記事の内容記事の内容記事の内容</p></header><section><h3>小見出し1</h3><p>記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容</p></section><section><h3>小見出し2</h3><p>記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容</p></section></article></main><footer>ページ全体のフッター</footer></body>小見出しと記事の内容をsectionで囲っています。このようにsectionは文章の中で複数使うここができます。sectionを入れ子にすることもできます。<section><h3>小見出し1</h3><p>記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容</p></section><section><h3>小見出し2</h3><p>記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容</p><section><h4>小見出し3</h4><p>記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容</p></section></section>上記のようにあるコンテンツの中に、さらにコンテンツのまとまりがある場合はsectionを入れ子にします。基本的には見出しと文章のセットをsectionでまとめていくイメージでグルーピングしていけば良いでしょう。することで、クローラーやその他の機械に対して、どこからどこまでがひとかたまりなのかを正確に伝えられるようになります。見た目を変えるのを目的でsectionを使ってはいけません。スタイルをつけるために区切りたい場合はdivを使います。div要素div要素はCSSで見た目を変えるためだけにグルーピングしたい場合に使います。意味的に意味のあるまとまりはこれまで紹介してきた要素を使い、意味的に無意味だけどどうしてもCSSで見た目を変えるために必要という場合に使うと良いでしょう。どの要素を使うか迷ったらこれまでに紹介してきた要素の中でheaderfootermainnavasideはあまり使いどころに迷うことはないと思います。どれを使うか迷ってしまうのが、articlesectionの2つだと思います。これらの2つの使い分けは以下のように考えるとわかりやすくなります。そのセクションが、それだけで独立したコンテンツとして成り立つ場合...articleそのセクションが、それだけでは完結しない場合...sectionこのようにして使い分ければ、迷わずに要素を決められるのではないでしょうか。すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。文字色を変える「color」プロパティの使い方解説html&CSS入門すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。