「HTMLを学んでいるけど、main要素の使い方がわからない」「divばかり使っていてコードが見づらい」などHTMLの基本的な部分で躓いてしまう人も多いと思います（私です）。
今回はHTML5で追加された枠組みとなる要素について解説します。
新しく追加された記述を使うことで、SEOを意識したサイト作りにも繋がりますので、HTMLを独学で学んでいる方やスクールなどで学び始めたWEBデザイン初心者の方は、是非参考にしてみてください♪
はじめに
HTML5で追加された新しい要素を使うことで、従来のdivタグが連発するコードを構造的に分かりやすくなります。また、今までよりclass名を減らすことができるというメリットもあります。
さらに、検索サイトに文章構造を理解させやすくなり、SEO効果にも期待できます。
ただし、articleやsectionは、コンテンツの構造が変わると意味付け的に使えない場合が発生する可能性があり、見出しが必須だったりとやや複雑です。
迷ったり悩んだりしたら、最初は無理に使わず、比較的わかりやすいheader, footer, main, navなどから使用してみるのがおすすめです。
header要素（ヘッダー）
ページの上部（ヘッダー部分）のブロックを定義する要素で、このブログでの画像の部分を言います。
今まで< div class=”header” >としていた部分を、HTML5では<header>で記述できます。
導入部やナビゲーション等のグループを表します。 見出し要素だけでなく、ロゴ、検索フォーム、作者名、その他の要素を含むこともできます。
また、sectionやarticleタグ内のヘッダー部分に使用することもできます。
footer要素（フッター）
ページの下部（フッター部分）のブロックを定義する要素で<footer>と記述します。
このブログの下部にある画像の部分です。
基本的に誰が書いたのか（コピーライト）やプライバシーポリシー、関連文書へのリンク、お問い合わせフォーム、連絡先・住所などが書かれていることが多いです。
こちらもsectionやarticleタグ内のフッター部分に使用することもできます。
main要素（メイン）
<main>と記述するmain要素は、ページのメインコンテンツのブロックに使用し、文書の <body> の主要な内容を表します。
ページ特有のコンテンツを囲むものであり、他のページ共通のコンテンツ（ナビゲーションリンク、コピーライト、ロゴ、バナー、検索フォーム）は除きます。
main要素は各ページに1回しか使用できません。
main要素内に見出し（h1～h6）は必須ではありませんが、後述するarticle, sectionを入れ子に使うと、検索サイトに文章構造を理解させやすくなります。
main要素はちょっと制限があるよ！
１ページに1つしか使えないほかにも、「article, aside, footer, header, nav要素」の入れ子に使用するのもNGです。
nav要素（ナブ）
<nav>と記述するnav要素は、グローバルナビゲーションなど主要なナビゲーションのブロックを定義する要素です。
主に、メニュー、目次、索引などで使われ、ulタグの親要素として使用します。基本的にどのナビゲーションにも使用できます。
article要素（アーティクル）
<article>と記述するarticle要素は、単独で成り立つコンテンツのブロックを定義する要素です。
ページの説明に適した内容であり、そのブロックだけで完結できる内容を囲みます。
<div class=”content”>などページに関連のあるブロックに使用します。
article要素では、見出し要素（h1〜h6）の記述は必須ではありません。
aside要素（アサイド）
<aside>と記述するaside要素は、補足や脚注、用語の説明など、ページの内容と関連がないブロックを定義する要素です。
バナーなどの広告エリアや関連記事が該当します。
aside要素は記事に関係ない内容ga
入るんだね！
逆に、抜き取ってしまうと本筋の意味が通らなくなる内容はaside要素にしないように気をつけよう！
section要素（セクション）
<section>と記載するsection要素は、章を定義する要素です。
article要素と似ていますがsection要素は「章分け」をするだけなのでページの内容に関連がない場所でも使用可能。
ただし「章」という意味付けをするのでsection要素内の先頭に必ず見出し要素（h1〜h6）が必須です。
articleタグとsectionタグの入れ子
「main要素は他の要素の入れ子にできない」と説明しましたが、articleタグとsectionタグは入れ子にすることができます。
入れ子にする順番に決まりがあるわけでもなく、どちらを入れ子にしても成り立ちますよ♪
ただし、section要素内の先頭には必ず見出し要素が必要になるので、それだけは忘れないようにしてください！
リセットCSS
HTML5では、ブロックレベル要素、インライン要素は初期値として定義する必要がなくなりました。
そのため今回紹介したHTML5で対応している要素は、ブラウザごとに定義が変わる場合や初期値がない場合もあるかもしれません。
今回の新要素はdiv要素の代わりに使うものばかりなのでリセットCSSでdisplay: block;で指定しておきましょう。
/* reset.cssに下記の記述を追加する */
header,footer,main,nav,article,aside,section{
display: block;
}
基本のHTMLタグ解説はこちら
HTML5 入れ子チートシートも活用を
おすすめの人気WEBデザイン参考書
まとめ
- header要素：ページの上部のブロックに使う
- footer要素：ページの下部のブロックに使う
- main要素：ページの主要なブロックに使う。※1ページに1回
- nav要素：主要なナビゲーションを定義する
- artile要素：ページに関連するブロックで独立しても成り立つブロックに使う
- aside要素：ページに関連がない・補足情報のブロックに使う
- section要素：「章」のブロックに使う。※見出し要素が必要
コメント