ブラウザ上で表示する内容は、body要素内に記述します。文書構造に合った要素を使うことが重要ですので、これから紹介する要素の役割をまず覚えておきましょう。
用途別に分けると以下のようになります。また、この表には非推奨となっている要素は含めておりません。
| 用途 | 要素名 | 説明 | ブロック/インライン |
| テキスト表示 | <h1>～<h6> | 見出しを定義 | ブロックレベル |
|---|---|---|---|
| <p> | 段落（パラグラフ）を定義 | ブロックレベル | |
| <div> | グループ化（ディビジョン）を定義 | ブロックレベル | |
| フォントスタイル | <sup> | 文字を上付きにする | インライン |
| <sub> | 文字を下付きにする | インライン | |
| リスト表示 | <ul> | 番号なし（行頭文字）リスト形式を定義 | ブロックレベル |
| <ol> | 番号付きリスト形式を定義 | ブロックレベル | |
| <li> | リスト形式の各リストを定義 | ||
| <dl> | 見出し付きリストの定義 | ||
| <dt> | リストの各項目を定義 | ||
| <dd> | リストの詳細説明を定義 | ||
| 意味の定義 | <address> | 住所、署名を定義 | ブロックレベル |
| <em> | テキストの強調を定義 | インライン | |
| <strong> | テキストのより強調を定義 | インライン | |
| リンク | <a> | アンカーを定義 | |
| テーブル | <table> | 表（テーブル）を定義 | ブロックレベル |
| <caption> | 表の表題を定義 | ||
| <tr> | 表の行を定義 | ||
| <th> | ヘッダセル（項目名のセル）を定義 | ||
| <td> | データセルを定義 | ||
| フォーム | <form> | フォーム要素を定義 | |
| <input> | さまざまなフォーム要素を定義 | ||
| <textarea> | テキスト入力エリアを定義 | ||
| <select> | 選択リストを定義 | ||
| <option> | 選択リストの項目を定義 | ||
| <optgroup> | 選択リストの項目をグループ化する定義 | ||
| <button> | ボタン要素を定義 | ||
| <label> | フォーム要素にラベルを付ける | ||
| レイアウト | <br> | 強制改行 | インライン |
| <pre> | 改行、スペースなどを保ったまま表示 | ||
| マルチメディア | <img> | 画像の配置を定義 | インライン |
| <object> | 動画、音声などやアプレットの埋め込み | ||
| その他 | <span> | テキストの範囲を指定 | インライン |
| <hr> | 区切り線の表示 | ブロックレベル |
2つの要素（ブロックレベル要素とインライン要素）
要素は大きく2種類に分けられます。骨組みとなるブロックレベル要素（ブロックレベルともいう）と文章中の一部として扱われるインライン要素です。その他に、置換インライン要素（インラインブロック）と呼ばれる特殊な要素もあります。
2つの要素の違いを表で表すと以下のようになります。
| ブロックレベル要素 | インライン要素 |
|---|---|
| 構造的な意味を持った要素 | 論理的な意味を持った要素 |
| 行単位で存在 | 文節・語単位で存在 |
| 一つの段落中に、別のブロックレベル要素は入れられない | ブロックレベル要素の中だけに入れられる |
| ブラウザ上では前後に改行が入る | ブラウザ上では前後に改行は入らない |
ブロックレベル要素
このタイプの要素は、画面の横幅いっぱいの領域を持つので、要素の前後には自動的に改行が入ります。ブロックレベル要素の中には、別のブロックレベル要素、インライン要素を入れることが可能です。ただし、一部のブロックレベル要素（h1、p、address）では、インライン要素を入れることはできますが、別のブロックレベル要素を入れることはできません。
主なブロックレベル要素
<h1>～<h6>、<p>、<div>、<table>、<ul>、<ol>、<address>、<dl>、
<form>、<hr>、<pre>
インライン要素
このタイプの要素は、行の一部として扱われるので、要素の前後には改行が入りません。インライン要素の中に別のインライン要素を入れることはできますが、ブロックレベル要素を入れることはできません。
主なインライン要素
<a>、<br>、<button>、<em>、<img>、<input>、<object>、<span>、
<strong>、<select>、<sub>、<sup>、<textarea>
置換インライン要素
通常、インライン要素は横幅と高さを持ちません。横幅と高さを持っているインライン要素を置換インライン要素と言います。
主な置換インライン要素
<img>、<input>、<object>、<select>、<textarea>
ブロックレベル要素の包括規則
一般にブロックレベル要素の中にブロックレベル要素、インライン要素を包括することができますが、インライン要素の中にブロックレベル要素を包括することはできません。また、ブロックレベル要素の中でも次のような規則があります。
- インライン要素のみを包括できるもの
<h1>～<h6>、<p>、<address>、<pre> - ブロックレベル要素のみを包括できるもの
<form>、<noscript>、<blockquote> - ブロックレベル要素、インライン要素とも包括できるもの
<div> - 特定の要素のみを包括できるもの
<table>、<ul>、<ol>、<dl>
ul、ol要素はli要素のみ包括可能で、dl要素はdt、dd要素のみ包括可能です。
下図は、上の記述をブロック要素とインライン要素に分けて図式しています。
- ※注意点
- ブラウザ上に表示したい内容は、ブロックレベル要素であるbody要素内に記述しますが、そのbody要素の直下にインライン要素を記述することはできないことに留意する必要があります。
構造的な意味合いのない画像やアンカー・文字列などは、すべて何らかの構造的な意味合いを持ったブロックレベル要素を使って記述します。これはインライン要素がWebページのどの役割を果たしているかを明示的にするために必要となります。
要素の親子関係
HTMLの要素は、ある要素がある要素を含み（包括）、さらにその要素が別の要素を含むという、階層的な構造（ツリー構造）で表されます。そして、この関係は親要素、子要素、孫要素などと、親子関係にたとえられます。
HTML文書の最上位がhtml要素で、その中のhead要素に文書情報を、中身（コンテンツ）はbody要素の中に配置します。この構造からすると、1つ上の階層にある要素を「親要素」、逆に親要素からみると１つ下の階層の要素を「子要素」と表現できます。
※html要素は、head要素、body要素から見ると親要素であるが、html要素から見るとhead要素、body要素は子要素になります。
【body要素内に記述する要素】