In 'n' Out | 情報整理の構造タグ

情報を整理するためのタグ

Webページで情報を整理し、内容をわかりやすく伝えるためには、文章の構造を意識することが大切です。
特に複数の要素をグループ化してまとめる場合には、リストや表といった情報を整理するための構造タグを使用します。
これらのタグを使うことで、ブラウザにも「これは一覧」「これは表」といった意味が伝わり、より読みやすいページを作ることができます。

リストタグ（ul・ol・li）

リストは、複数の項目を箇条書きで整理する際に使います。

構文

<ul>
    <li>...</li>
</ul>

ulはブロック要素で、子要素にliを入れることで順序を持たないリストを表示できます。

コード例

<ul>
    <li>HTMLを理解する</li>
    <li>CSSで整える</li>
    <li>JavaScriptで動きを付ける<li>
</ul>

出力例

HTMLを理解する
CSSで整える
JavaScriptで動きをつける

このようにulは自動的にビュレットを含んだ形で箇条書きで出力されます。

構文

<ol>
    <li>...</li>
</ol>

olはブロック要素で、子要素にliを入れることで順序を持つリストを表示できます。

コード例

<ol>
    <li>HTMLを理解する</li>
    <li>CSSで整える</li>
    <li>JavaScriptで動きを付ける>
</ol>

出力例

HTMLを理解する
CSSで整える
JavaScriptで動きをつける

このようにolは自動的に番号を含んで順番で出力されます。

リストを使うことで、内容を段階的に示したり、関連する情報をひとまとまりにできます。
また、各項目を囲むliタグは必ずulかolの中で使用します。
単独で使うと構造的に誤りとなるため注意が必要です。

定義リスト（dl・dt・dd）

定義リストは、用語とその説明をペアで整理するためのタグです。

構文

<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>

dlは「定義リスト（definition list）」という意味を持つブロック要素で、dtに「用語」、ddに「説明」のように関連性を持つ情報を扱います。

コード例

<dl>
    <dt>HTML</dt>
    <dd>構造を作る言語。</dd>
    <dt>CSS</dt>
    <dd>見た目を整える言語。</dd>
</dl>

出力例

HTML: 構造を作る言語。
CSS: 見た目を整える言語。

このように、dtとddは縦にペアで並んで表示されます。
dlは、複数の用語に対して1つの説明をまとめることも可能です。

コード例

<dl>
    <dt>HTML</dt>
    <dt>CSS</dt>
    <dd>Webページを構成するための主要な言語です。</dd>
</dl>

出力例

HTML
CSS: Webページを構成するための主要な言語です。

上記のように、1つのddに複数のdtを対応させることもできます。
この構造を使えば、似た性質を持つ言葉をグループ化して整理できます。

表（table・tr・th・td）

リストが縦方向の整理に適しているのに対し、表は横と縦の両方向で情報を整理できます。

構文

<table border="属性値">
    <tr>
        <th>...</th>
    </tr>
    <tr>
        <td>...</td>
    </tr>
</table>

tableはブロック要素で、全体をtableで囲み、行をtr、見出しをth、内容をtdで記述します。
border属性の属性値は数値を入れますが、この属性自体は必須ではなくCSSで指定するのが現代風です。

コード例

<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
</table>

出力例

1	2	3
4	5	6
7	8	9
10	11	12

th（見出しセル）は中央寄せ・太字で表示され、td（データセル）は左寄せの通常文字として表示されます。
このように、見た目にも役割の違いが明確に表れます。
表を作る際は、タグの数が合わないと表示が崩れるため、正確に閉じることが重要です。
また、Excelのようにあとから簡単に行や列を追加できないため、構成をよく考えて記述することが大切です。

昔はレイアウト目的でtableタグを使うこともありましたが、構造的な意味を持たないため、現在ではデータを表すためにのみ使用するのが正しい使い方です。

セルの結合（colspan・rowspan）

表の中でセルを結合する場合は、結合属性であるcolspan・rowspanを使用します。
横方向の結合には列を結合するcolspan="属性値（結合数）"、縦方向の結合には行を結合するrowspan="属性値（結合数）"を指定します。

コード例

<table border="1">
    <tr>
        <th colspan="2">1</th>
        <th>3</th>
    </tr>
    <tr>
        <td rowspan="2">4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td colspan="3">10</td>
    </tr>
</table>

出力例

1		3
4	5	6
4	8	9
10

何が起こっているかわかりにくいため図で解説します。

結合前の状態

結合するセルの確認

そこから結合したいセル1を2列結合したいので、2が削るセル対象となり、<th colspan="2">1</th>と指定し、<th>2</th>は削除します。
続いて結合したいセル4を2行結合したいので、7が削るセル対象となり、<td rowspan="2">4</td>と指定し、<td>7</td>は削除します。
最後に結合したいセル10を3列結合したいので、11と12が削るセル対象となり、<td colspan="3">10</td>と指定し、<td>11</td><td>12</td>は削除します。

colspanとrowspanの追加

結合後の完成表

慣れるまでは、まず通常の表を完成させてから、結合したい箇所を確認しつつ属性を追加し、不要なセルを削除する手順で進めるのが安全です。
colspan・rowspan属性はCSSでは指定できず、HTMLで構造を定義するために用いられます。
そのため、装飾ではなく「意味づけ」として使用することが大切です。
構造を理解して使うことで、読みやすく整った表を作ることができます。

表の見出し（caption）

見出しを表示するcaptionタグは表全体の説明や内容の概要を示すことができ、検索エンジンにも有効です。

構文

<caption>...</caption>

captionはブロック要素で、tableタグの直下に書きます。
構造としては「表全体を説明する要素」であり、見出しとは異なります。

コード例

<table border="1">
    <caotion>ナンバリング</caption>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
</table>

出力例

ナンバリング
1	2	3
4	5	6
7	8	9
10	11	12

captionは基本的に中央ぞろえとなり、表の上に付随しますが、揃えや配置を変えるためにはCSSで書くこととなります。