新要素を使用
HTML5には、いくつかの新たな要素が登場しています。このページでは、その中でもレイアウト用に用意されたブロック要素について紹介します。
そもそもHTML5って？
HTML5とは、従来のHTMLの新バージョンで、いくつかの新機能がついたものです。
そのため、HTML5の基本的な記述方法はこれまで解説してきた方法と同じです。
（これまでの解説で使ってきたHTMLタグは、HTML5より前のものです）
つまり、HTML5の新機能を使いたい箇所のみ、部分的に新たなタグを記述することになります。
レイアウト用のdivを新要素で
これまで、レイアウト用のボックスを作る際は、以下のようにdivボックスにidやclassを指定して使っていました。
index.html
<div id="header"> </div> <div id="container"> </div> <div id="footer"> </div>
style.css
#header{/* ヘッダーのスタイル */}
#container{/* コンテナのスタイル */}
#footer{/* フッターのスタイル */}
しかし、html5には、レイアウト用に新たに要素が設けられています。
| header | ヘッダー用のブロック要素 |
|---|---|
| nav | ナビゲーション用のブロック要素 |
| section | セクション用のブロック要素 |
| article | 記事用のブロック要素 |
| aside | サイド用のブロック要素 |
| footer | フッター用のブロック要素 |
これらを使って先ほどのレイアウトを行うと以下のようになります。
index.html
<header> </header> <section> </section> <footer> </footer>
style.css
header{/* ヘッダーのスタイル */}
section{/* セクションのスタイル */}
footer{/* フッターのスタイル */}