HTML5/CSS3によるサイト構築

よく使うHTMLタグと使い方

第7回で様々なHTMLタグがあることを紹介したが，それらの詳細な使い方については解説しなかった． ここでは，数多くのHTMLタグの中から良く使われ，使い方を知っていると便利なタグを紹介する

ul, ol, liによる列挙

ul (Unordered List), ol (Ordered List), li (List Item)を使うと 項目を列挙することができる． これらのタグは 必ずul, olの中に0個以上のliタグが来るように配置する． また，ul, olタグの直下に文字列を書いてはいけない． ulとolの差は，li要素の前に黒丸が来る（順序なし：unordered）か，数値が来る（ordered）かの違いである．

  <ul>
    <li>りんご</li>
    <li>ごりら</li>
    <li>らっこ</li>
  </ul>
  <ol>
    <li>羽でチュン</li>
    <li>羽でチュチュン</li>
    <li>羽そろえば牙を向く</li>
  </ol>
  

表示結果

dl, dt, ddによる定義・説明リスト

複数の要素に対して説明を列挙していく時に用いると良い．前述したul, ol, liタグに似ているが， dl, dt, ddは対となる要素の組み合わせのリストであることが異なる． dl (Description List)タグ内に dt (Description Term)タグとして説明したい用語を記述し， dd (Description, Definition)タグで説明を書いていく．

  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>

    <dt>JK</dt>
    <dd>常識的に考えて</dd>

    <dt>チョベリバ</dt>
    <dd>超ベリーバッド</dd>
  </dl>
  

表示結果

tableタグによる表の表示

HTMLで表を表現するときに使うのがtableタグである． tableタグはHTML5で記述方法が大きく再定義されたが，ひとまず以下の書き方をしていれば 古いブラウザでも正しく表示される（W3C Markup Validatorでもエラーにはならない）．

  /* 表を強調するためのスタイル */
  table {
    border: solid 1px black;
  }

  th {
    border: solid 1px gray;
    background-color: #eeeeee;
  }

  td {
    border: solid 1px gray;
  }
  

  <table>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
      <th>見出し3</th>
    </tr>
    <tr>
      <td>データ1-1</td>
      <td>データ1-2</td>
      <td>データ1-3</td>
    </tr>
    <tr>
      <td>データ2-1</td>
      <td>データ2-2</td>
      <td>データ2-3</td>
    </tr>
  </table>
  

表示結果

HTML5に準拠した正しい構造については以下のサイトを参考にすると良い．

• Webの道草：テーブルの正しい構造
• HTMLクイックリファレンス：table

まとめ

ここに挙げた以外にも沢山のHTMLタグがあるが，最初から全てを覚えようとはせずに， 必要になったときに覚えていくようにすれば十分である． ただし，ここに挙げた３種類のタグは一般的なWebページでも使われる可能性が高いタグであるので， 使いこなせると良い．