head要素に文書情報を記述した後は、メインであるbody要素のコーディングに入ります。
Webページは左上を起点として横書きで進んでいきますので、作成したワイヤーフレームの左上から記述していくのが基本です。
文章（テキスト）が無くても、ヘッダー、サイドバー、本文、フッターなど、デザイン上のひとかたまりをブロックレベル要素で分けていきます。
～～
<body>
<header>
<!-- ここにヘッダーが入ります -->
</header>
<div>
<article>
<!-- ここに本文が入ります -->
</article>
<aside>
<!-- ここにサイドバーが入ります -->
</aside>
</div>
<footer>
<!-- ここにフッターが入ります -->
</footer>
</body>
</html>
header要素にはデザイン上のヘッダー部分を記述します。文書のヘッダ情報であるhead要素とは全く異なるブロックレベル要素です。
article要素には単一の記事を記述します。ここでは本文部分で使用しています。
aside要素には、本文ではない補足情報を記述します。ここではサイドバーをaside要素にしています。
footer要素にはフッター部分を記述します。
div要素には文章の内容を示す特別な意味はありません。ひとかたまりの範囲を定義するときに使用します。
上で紹介したうち、header要素、article要素、aside要素、footer要素の4つは、HTMLの最新バージョンであるHTML5から新たに導入された新しい要素です。
以前は範囲の定義に主にdivだけを使用していましたが、HTML5からは範囲の定義にも内容に合わせて適切なタグを使用することが求められます。
定義があいまいで「どの要素が適切かわからない」という箇所には、全てdivを使っておけば問題ありません。
デザイン上のブロック分けが終わったら、各ブロックに文章や画像のコンテンツを記述していきます。
この際、デザインは全てCSSで行うことを忘れないようにしましょう。無駄な改行、適切ではない見出しの挿入などはせずに、必要なコンテンツを適切な要素を使って記述していきます。
そして後からCSSでデザインを指定する箇所には、class属性やid属性を与えます。
先ほどブロック分けした各要素に、内容を加えていくと以下のようになります。
～～
<body>
<header>
<div id="logo">
<img src="image/logo.png">
</div>
<nav>
<ul>
<li><a href="index.html">TOP</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="map.html">MAP</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</header>
<div>
<article>
<h1>Liveworks Corporationのサイトへようこそ</h1>
<p>
Liveworks Corporationはあなたの生活を便利にする商品やサービスの開発を日々行っています。<br>
<a href="blog.html">スタッフブログ</a>では新製品の情報なども公開していますので是非ご覧ください。
</p>
</article>
<aside>
<section>
<h2>本社住所</h2>
<p>東京都千代田区神田須田町1-34-4</p>
</section>
<section>
<h2>セミナー開催日</h2>
<p>12月17日、12月18日</p>
</section>
</aside>
</div>
<footer>
<div id="contact">
<h2>製品・サービスに関するお問い合わせ</h2>
<p>
メールでのお問い合わせには3営業日以内にお返事をお送りします。<br>
お電話でのお問い合わせは下記番号（フリーダイヤル）までおかけ下さい。
</p>
</div>
<div id="copyright">
Copyright(C) Liveworks Corporation All Rights Reserved.
</div>
</footer>
</body>
</html>
急に難しく感じましたかもしれませんが、大丈夫です。一つ一つの要素を理解すれば、必ず同じことができるようになります。
上記は、head要素から上を省略し、body要素内の一部を見やすいように編集していますが、この程度の規模のソースコードからデモサイトとはいえコーポレート型サイトのトップページが成り立っているのです。
始めて出てきた要素を説明します。
nav要素は、ナビゲーションを記述するブロックレベル要素です。
ul要素は、箇条書きリストを記述するブロックレベル要素です。リスト内の各行となるli要素とセットで使用します。
h2要素は、見出しに使用します。h1が最も大きな見出しで、h6が最も小さな見出しになります。
p要素は、一つの段落を示します。通常はh要素と組み合わせてメインの記事を記述するのに使用します。
section要素は、文書の意味上のひとかたまりを示します。
CSSを適用していないため、サイドバーなども縦一列に表示されています。
また、画像も用意していないため、img要素の画像が非表示になっています。
ここまでの例で、多くのブロックレベル要素が登場しました。
リファレンスとして使えるように、よく利用される要素を整理しておきます。
| ブロックレベル要素 | 用途 |
|---|---|
<div> | 意味を持たないブロックレベル要素 |
<section> | 文書の意味上のひとかたまり |
<header> | デザイン上のヘッダー部分（文書のヘッダ情報ではない） |
<footer> | フッター |
<article> | 単一の記事 |
<aside> | 本文ではない補足情報 |
<nav> | ナビゲーション |
<ul> | 箇条書きリスト <li>と合わせて使用する（連番付きリストは<ol>） |
<h～> | 見出し（h1～h6） |
<p> | 段落 |
HTMLの全てのリファレンスを確認したい場合は下記のリファレンスサイトを見てみましょう。
ただし、とても多いので全てを覚える必要はありません。
必要に応じて参照、もしくは検索するようにしましょう。