HTML タグとは
HTML タグは山かっこで囲んだ名前で、コンテンツの一部に印を付けます。ほとんどのタグは対になっていて、<p> のような開始タグと、スラッシュの付いた </p> のような終了タグがあります。その間にあるものが内容で、全体をまとめて要素と呼びます。
<h1> を <h2> に変えると (開始タグと終了タグの両方)、見出しが小さくなります。内容が何なのかをブラウザに伝えているのはタグ名です。
構造: タグ、属性、要素
<a href="/docs/html/links" class="nav">Links</a>
| 部分 | 例の中では |
|---|---|
| 開始タグ | <a href="/docs/html/links" class="nav"> |
| タグ名 | a |
| 属性 | href="/docs/html/links" と class="nav" |
| 内容 | Links |
| 終了タグ | </a> |
| 要素 | 上のすべてを合わせたもの |
属性は必ず開始タグに書き、終了タグには書きません。詳しくは 属性 のページで解説しています。
タグ名は大文字と小文字を区別しません。<P> と <p> は同じです。小文字で書きましょう。
空要素: 終了タグのないタグ
何も中に入れられない要素があり、それらには開始タグしかありません。これを空要素 (void 要素) と呼びます (自己終了タグと呼ばれることもあります)。
一覧は次のとおりです: area、base、br、col、embed、hr、img、input、link、meta、source、track、wbr。
スラッシュを付けて <br /> と書いても構いません。HTML ではスラッシュは何の働きもせず、XHTML 形式のコードがそのまま動くように許可されているだけです。<div /> のように普通のタグに付けたスラッシュも無視されるので、その div は閉じていません。
タグの入れ子
要素は別の要素の中に入れられます。ルールは開いたのと逆の順番で閉じることです。最後に開いたタグを最初に閉じます。
<p>This is <strong>very <em>important</em></strong>.</p> <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p> <!-- wrong -->
ブラウザは入れ子の誤りを拒否せず、修復します。ただし、その修復が意図どおりになるとは限りません。次の例は、入れ子を誤った 2 つのコードをブラウザのパーサーに渡し、実際に組み立てられた構造を表示します。
2 種類の修復が起きています。重なった <b> と <i> は余分な要素に分割されます。また <p> は <div> を含められないので、ブラウザは div の前で段落を閉じ、残った </p> を新しい空の段落に変えます。CSS や JavaScript がおかしな動きをしたときは、まず入れ子の誤りを疑いましょう。
ブロック要素とインライン要素
ほとんどのタグは表示のされ方で 2 つのグループに分かれます。ブロック要素 (div、p、h1 から h6、ul、section) は新しい行から始まり、横幅いっぱいに広がります。インライン要素 (span、a、strong、em、code) はテキストの行の中に収まり、幅は内容の分だけです。
青い枠はページの端まで伸び、オレンジの枠はテキストだけを囲みます。CSS の display プロパティで変えられますが、どのタグにも初期値があります。汎用のコンテナである div と span も参照してください。
よく使う HTML タグ
| タグ | 用途 |
|---|---|
<html>, <head>, <body> | 文書の骨組み |
<title>, <meta>, <link> | head に書くページの情報 |
<h1> から <h6> | 見出し |
<p> | 段落 |
<a> | リンク |
<img> | 画像 |
<ul>, <ol>, <li> | リスト |
<strong>, <em> | 重要なテキスト、強調するテキスト |
<br>, <hr> | 改行、話題の区切り |
<div>, <span> | 汎用のブロックコンテナとインラインコンテナ |
<table>, <tr>, <th>, <td> | 表 |
<form>, <input>, <label>, <button> | フォーム |
<header>, <nav>, <main>, <footer>, <section>, <article> | 意味を持つページ構造 |
印刷できる 1 ページの一覧は HTML チートシート を参照してください。
存在しないタグ
ブラウザが知らないタグを書いてもエラーにはなりません。不明な要素を作って内容を表示し、インライン要素として扱います。
不明なタグは検索エンジンにもスクリーンリーダーにも意味が伝わらないので、実在するタグを使いましょう。JavaScript で独自のコンポーネントを作るなら、名前にハイフンを入れます (user-badge)。ハイフン付きの名前はカスタム要素用に予約されていて、将来の HTML タグと衝突しません。
よくある間違い
- 終了タグを忘れる。
</a>や</strong>が抜けると、それ以降のページ全体がリンクや太字になります。ブラウザが自動で閉じるタグ (</p>、</li>) もありますが、これらは閉じてくれません。 - 空要素を閉じる。
</br>や</img>は正しくありません。ブラウザは</br>を開始タグの<br>として読むので、<br></br>は改行が 2 つになります。 - タグを重ねる。 逆の順番で閉じましょう。
<b><i>x</i></b>が正しく、<b><i>x</b></i>は誤りです。 - 段落の中にブロックを入れる。
<p>の中に<div>、リスト、見出しを入れると、段落がそこで終わってしまいます。外側のコンテナには<div>を使いましょう。 - 見た目でタグを選ぶ。
<h2>は大きいからではなく、見出しだから使います。サイズや太さは CSS で指定します。
よくある質問
HTML のタグと要素の違いは何ですか？
タグは <p> や </p> のように自分で書くマークアップです。要素はブラウザがそこから組み立てるもの全体で、開始タグ、属性、内容、終了タグを含みます。<p>Hi</p> は 2 つのタグで 1 つの p 要素になります。
終了タグが不要な HTML タグはどれですか？
空要素 (void 要素) は内容を持てないので、終了タグがありません。<br>、<hr>、<img>、<input>、<meta>、<link>、<source>、<track>、<wbr>、<area>、<base>、<col>、<embed> です。
<br> と <br /> のどちらで書くべきですか？
どちらも正しい HTML です。空要素の末尾のスラッシュは許可されていて、ブラウザは無視します。<div /> のような空要素でないタグでもスラッシュは無視されるので、div は </div> が来るまで閉じません。
HTML タグは大文字と小文字を区別しますか？
区別しません。<P> と <p> は同じ要素になり、大文字と小文字が混ざっていても同じです。小文字が標準的な書き方で、多くのフォーマッタも小文字で出力します。
HTML タグはいくつありますか？
現在の HTML の仕様では 100 以上の要素が定義されていますが、普段のページで使うのは 20 から 30 ほどです。見出し、段落、リンク、画像、リスト、div、span、フォーム、意味を持つレイアウト用タグなどです。
存在しないタグを使うとどうなりますか？
ブラウザはそのタグの要素を作り、内容を表示し、特別な意味のないインライン要素として扱います。<user-card> のように名前にハイフンを含めれば、カスタム要素として使えます。
