HTML5から追加された要素のページ構成に関わるものだけをまとめました。
ちゃんと使いたいけどどこで使えばいいんだっけ？と分からなくなりがち…
SEO対策やメンテナンス性を見越して、きれいなHTMLを書いていきたいですね。
セクション要素
section
一つのセクションであることを示す。
・見出しをつけられることを目安とする
・レイアウト目的のコンテナ要素として用いるならdivを使用する
Ex.新着情報、連絡先
nav
サイトナビゲーションであることを示す。
・主要なナビゲーションとなるセクションのみを示す
・navの中身は基本的にリスト要素
・ページ下部の利用規約ページ、著作権ページなどのリンクはnavは使わずfooterだけ。
Ex.ヘッダーメニュー、サイドメニュー、パンくずリスト
article
記事であることを示す
・単体で完結するセクションである
・記事ひとつひとつを囲う
articleを入れ子にする場合、外側と内側の内容が関連していることを示す。
Ex.ブログ記事に対するコメント
aside
要素の前後のコンテンツに関係しているけど関連性の薄いセクションを示す
Ex.補足情報、おすすめ記事、広告
セクションの構成要素
header
セクションのヘッダーにあたる部分を示す。
・セクションのイントロダクションやナビゲーショングループであることを示す
・見出し要素(h1・h2…)を含めることが想定されるが無くてもOK
footer
セクションのフッターにあたる部分を示す。
・そのセクションに関する情報を含む
・末尾でなくてもOK
Ex.注釈、著作権、関連記事へのリンク
main
ページの主要な部分であることを明示する
・ドキュメント内で使えるのは一回のみ
・<article><aside><footer><header><nav>の子要素として使ってはいけない
figure
画像や動画、ソースコードといった図表であることを示す・メインコンテンツへの影響を与えることなく切り離すことが出来る
▼上記を使ってページを組み立ててみるとこんな感じになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<!--ヘッダ-->
<header>
<h1>サイト名</h1>
<nav>
<h2>メニュー</h2>
<ul>
<li><a href="../menu1.html">メニュー1</a></li>
<li><a href="../menu2.html">メニュー2</a></li>
<li><a href="../menu3.html">メニュー3</a></li>
</ul>
</nav>
</header>
<!--メインコンテンツ-->
<main>
<article>
<header>
<h2>記事タイトル</h2>
</header>
<section>
<h3>見出し</h3>
<p>本文</p>
</section>
<section>
<h3>見出し</h3>
<p>本文</p>
<figure><img src="../images/sample.gif" alt="画像"></figure>
</section>
</article>
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="../post1.html">記事リンク</a></li>
<li><a href="../post1.html">記事リンク</a></li>
<li><a href="../post1.html">記事リンク</a></li>
</ul>
</aside>
</main>
<!--フッタ-->
<footer>Copyright 2018</footer>
</body>
</html>
▼ブラウザ上の表示
サイト名
記事タイトル
見出し
本文
見出し
本文
▼参考
http://www.htmq.com/html5/
https://qiita.com/maccotsan/items/20c6ea274b0190dc2c05
