HTML 入門
文書の構造を作ろう
header，main，footer を使い分ける
前のページで説明したように <div> 要素を利用すると，文書のレイアウトを作成できます．たとえば，<body> 要素の中に3個の <div> 要素を配置して，ロゴイメージなどを表示するヘッダー部分，本文を表示する領域，著作権情報などを表示するフッター部分に分割できます． （サンプル(1)を見る）
index.html（サンプル(1)）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文書の構造</title>
</head>
<body>
<div>
ここはヘッダーです．．．
</div>
<div>
ここは本文です．．．
</div>
<div>
ここはフッターです．．．
</div>
</body>
</html>
しかしながら，上のコードではそれぞれの <div> 要素がどのようなや役割を持って，文書全体がどのような構造になっているのかが明確ではありません．上の文書では，プログラムが文書の構造を理解することが困難です．
したがって，次のように <head>，<main>，<footer> という3つの要素を配置する方法がよく採用されます．これによって文書の構造が明確になり，プログラムも構造を理解できるようになります．また，<div> を配置した場合と見た目に変化がないことにも注意してください． （サンプルを見る）
index.html（サンプル(2)）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文書の構造</title>
</head>
<body>
<header>
ここはヘッダーです．．．
</header>
<main>
ここは本文です．．．
</main>
<footer>
ここはフッターです．．．
</footer>
</body>
</html>
なお，<head>，<main>，<footer> などは必ず利用しなければならない要素ではありませんが，文書の構造を明確にすることを目的に利用すると良いでしょう．また，（hidden 属性が指定されていない）<main> は1つの文書に2つ以上配置できないことに注意してください．