ウェブページのコンテンツ部分がひとまとまりになるような部分（料理の材料、料理の作り方、更新情報、Q&A、データの集計）の話をします。 まず、一番最初に持っておく簡単なイメージは
ulやol⇒箇条書きなどをつくるためのタグ（例：料理の材料や料理の作り方） dl⇒定義された用語などを説明するタグ（例：更新情報やQ&A） table⇒表を作成するためのタグ（例：データの集計、ウェブメールの受信メール一覧）
まずは、より分かりやすいlistについて簡単にみていきたいと思います。
listはナビゲーションを作る時に必ず使用しなければならない訳ではないのですが、ナビゲーションなどをより見やすくしてくれる効果があります。
最も基本的な形のlist制作には<ol><ul><li>の三つの要素を使用します。ul(「unordered list=順序づけられていないリスト」の略)は箇条書きタイプのリスト、ol(ordered list=順序づけられたリスト)は番号のついたリストを表します。それぞれ英語を覚えておけば途中でこんがらがることはないでしょう。
li要素には実際の項目に書き入れる内容を記述します。
下に例をあげます。
<ul> <li>材料リスト</li> <li>お買い物リスト</li> <li>電話番号リスト</li> </ul>
<ol> <li>ジャガイモを切る</li> <li>鍋にじゃがいもを入れる</li> <li>鍋に塩を入れる</li> </ol>
これらは以下のように表示されます。
またCSS3にて以下のプロパティを使用し、行頭記号に工夫を凝らす事が可能です。
list-style･････････････････行頭記号に関する指定をまとめて行う list-style-image･･････････行頭記号に画像を指定する list-style-type･･･････････行頭記号の種類を指定する list-style-position････････行頭記号の表示位置を指定する marker-offset････････････行頭記号との間隔を指定する
リストについてはここまでにします。
先ほどのリストはメニューなどの箇条書きの際に使われるものです。今度は定義型リストと呼ばれるもので、「定義する用語（dt要素）」と「その用語に対する説明（dd要素）」であらわされます。主に、更新情報やQ&Aなどに使われたりしています。更新情報は日付、タイトルといった属性を持ちます。その際に、「日付は、こんなタイトル」というようなニュアンスをした書き方が必要になります。（例：2015年1月1日 新年あけましておめでとうございます ）dtタグには2015年1月1日、ddタグには新年あけましておめでとうございますを入れます。
<dl> <dt>2015-01-02</dt> <dd>新情報のお知らせです。</dd> <dt>2015-01-01</dt> <dd>サイトオープンしました。</dd> </dl>
や
<dl> <dt>2015-01-04</dt> <dd>A君</dd> <dd>「春の花」写真を投稿しました。</dd> <dt>2015-01-03</dt> <dd>B君</dd> <dd>「ジェットコースター」写真を投稿しました。</dd> （略） </dl>
<dl> <dt>Q1</dt><dd>A ここに答え</dd> <dt>Q2</dt><dd>Aここに答え</dd> </dl>という形です。
Q1 A ここに答え
続いては表制作に使うtableについて解説していきます。
tableはHTML5の中でもとても難しい分野の一つです。
tableの記述には３つの要素、th(table header=テーブルの見出し),tr(table row=テーブルの横一列のグループ),td(table data=th以外のセルの事)を使用します。実際にはthは太文字で強調されて表示されます。
以下に最も単純なテーブルのコードを記述してみます。
<table border="1"> <tr><th>ここは題名</th><td>ここはデータ</td></tr> <tr><th>ここは題名２</th><td>ここはデータ２</td></tr> </table>
といった具合です。これは以下ように表示されます。
