HTMLタグ – よく使うタグ（コンテンツの装飾）
HTML で、主に body 内の文章をマークアップする際に良く使うタグについてまとめます。バージョンは、HTML5 を想定しています。この記事は、筆者がよく使うタグやタグの属性についてまとめたものです。そのため、全ての機能を網羅したものではありません。細かいタグの名前や属性のふるまいを忘れてしまった際に参照することを想定しています。
文章のマークアップ
主に文章の意味づけを行うためのタグをまとめます。あくまで意味づけを行うもので、スタイルを定義するために使うことは非推奨とされています。
意味づけ
| 見出し | <h1> ～ <h6> |
| 段落 | <p> |
| 重要な語句の強調 | <strong> |
| 注釈・免責・著作権表記等（慣例的に小さな文字で書くような要素） | <small> |
| ひとつの範囲を定義 | <span> |
- <span> タグ自体は特に意味をなすものではありませんが、CSS やスクリプトに反応する範囲を定義する際によく利用します。
箇条書き
| 箇条書き（番号なし） | <ul> | |
| 箇条書き（番号あり） | <ol> | |
| リストの項目 | <li> | 上記参照 |
定義・説明リスト
| 定義リスト | <dl> |
| 定義タイトル | <dt> |
| 定義データ | <dd> |
項目とその説明がセットになったリストです。例として、「用語と定義」や「更新日時と内容」が挙げられます。プロフィール紹介などにも使います。
改行
段落の区切りとして改行したい場合は、段落を <p> タグで囲むことが基本です。文章中で強制改行したい場合は <br> タグを使います。<br> タグは、改行が実際にコンテンツの一部を成すような場合に使用するもので、例えば、詩や住所などに用います。文章のスタイルを整えるために使用するものではありません。
| 改行 | <br> |
ちなみに、一時期「<br />」と書くことが流行りましたが、HTML5 的には、「<br>」が正しいようです（参考）。
リンク
ハイパーリンクを張るためには <a> タグで囲みます。<a> タグは、<p> タグや <li> タグの内側で使用する必要があります。HTML5 では、<div> タグなどのボックスを <a> タグで囲むことができるようになりました。
| リンク | <a> |
以下は、<a> タグで良く用いる属性です。
| href | リンク対象の URL 等を指定します |
| target | リンク先をどのように開くかを指定します |
target 属性には以下のような指定が可能です。
| _self | 現在のウィンドウで開く |
| _parent | 現在のウィンドウの親ウィンドウで開く |
| _top | 現在のウィンドウの最上位階層のウィンドウで開く |
| _blank | 新しいタブやウィンドウで開く |
| 任意のターゲット名 | 任意の名前を付けたウィンドウで開く |
よく使うのは、以下の 3 パターンだと思います。
| 現在のウィンドウで開く | <a href="url"></a> |
| 新しいウィンドウで開く | <a href="url" target="_blank"></a> |
| ページ内の要素に移動する | <a href="#id"></a> |
表
| 表 | <table> |
| 行 | <tr> |
| セル | <td> |
| セル（見出し） | <th> |
テーブルの境界線は、デフォルトでつきません。また、<table> タグには border 属性が残っていますが、これは境界線の太さを指定するものではなく、 border="1" でその table 要素がレイアウト目的に利用されているないことを明示的に表す場合にのみ利用されます（指定すると、一応枠が表示されます）。ただし、そもそも HTML5 ではレイアウト目的で table 要素を使うことが認められていないため、実質あまり使うものではなさそうです。境界線を指定するには、CSS を使います。
複数セルをまたがるようなセルを定義するには、<td> もしくは <th> タグの colspan 属性（列 : 水平方向）や rowspan （行 : 垂直方向）にまたがる数を指定します。
画像
画像を貼るには <img> タグを使います。リンク先の画像は src 属性で指定します。
| 画像 | <img> | <img src="img.png"> |
画像の大きさを、width, height 属性で指定できます。ただし、単位はピクセル単位で、パーセント指定はできない（HTML5 の規格）ようです。
alt タグで代替テキストを指定することが推奨されますが、（HTML5 では）必須ではないようです。