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