HTML: HTML要素
ブロックレベル要素とインライン要素の違いを理解し、タグの正しいネスト方法をマスターしましょう。
1. HTML要素とは
HTMLにおいて、要素とは開始タグから終了タグまでの完全な構造を指し、タグ自体とその中に挟まれたコンテンツの両方を含みます。ブラウザは各要素をDOMツリーのノードとして解析し、ページの階層構造を形成します。
完全なHTML要素は3つの部分から構成されます。
▶ サンプル
<p>これは段落要素です</p>
<!-- 開始タグ + コンテンツ + 終了タグ = 完全な要素 -->
<a href="https://example.com">ここをクリック</a>
<!-- 要素は属性（href）を含むことができ、開始タグに記述する -->
ただし、すべての要素がコンテンツを含むわけではありません。コンテンツがなく終了タグを必要としない要素もあり、それらは空要素と呼ばれます。
▶ サンプル
<br> <!-- 改行要素：コンテンツなし、終了タグなし -->
<hr> <!-- 水平線：これも空要素 -->
<img src="/assets/images/tutorials/html-example-photo.webp" alt="サンプル写真"> <!-- 画像要素：属性のみ、コンテンツなし -->
<input type="text" name="username"> <!-- 入力要素 -->
主な違い：通常の要素には開始タグ、コンテンツ、終了タグがあります。空要素には開始タグのみ（通常は属性を持つ）で、コンテンツも終了タグもありません。
<html> がルートノードで、<body> と <head> がその子ノードになります。要素間のネスト関係がノード間の親子関係や兄弟関係を決定します。HTMLの基本の章でDOMの概念を復習してみてください。
2. ブロックレベル要素とインライン要素
HTML要素はページ上での配置方法によって、ブロックレベル要素とインライン要素の2つに分類されます。これらの違いを理解することは、ページレイアウトをマスターする第一歩です。
(1) ブロックレベル要素
ブロックレベル要素の特徴は、親要素の幅いっぱいを占めることです。コンテンツがどれだけ狭くても、常に行の幅全体を占有し、前後の要素は別の行に表示されます。
よく使われるブロックレベル要素を以下の表に示します。
| タグ | 説明 | タグ | 説明 | タグ | 説明 |
|---|---|---|---|---|---|
<h1>〜<h6> |
見出し1〜6 | <dl> |
定義リスト | <article> |
記事 |
<p> |
段落 | <dt> |
定義用語 | <aside> |
サイドバー |
<fieldset> |
フィールドグループ | <dd> |
定義の詳細 | <footer> |
フッター |
<hr> |
水平線 | <header> |
ヘッダー | <table> |
テーブル |
<ol> |
順序付きリスト | <nav> |
ナビゲーション | <div> |
ブロックコンテナ |
<ul> |
順序なしリスト | <main> |
メインコンテンツ | <form> |
フォーム |
<li> |
リスト項目 | <section> |
セクション |
▶ サンプル
<p>これは最初の段落で、行全体を占めます</p>
<p>これは2番目の段落で、新しい行から始まります</p>
<div>
<h2>見出しも独自の行に表示されます</h2>
<p>div内の段落もそれぞれ別の行に表示されます</p>
</div>
(2) インライン要素
インライン要素の特徴は、行全体を占めないことです。コンテンツの幅だけを取り、行内で左から右に配置され、幅が足りなくなると自動的に次の行に折り返されます。
よく使われるインライン要素を以下の表に示します。
| タグ | 説明 | タグ | 説明 |
|---|---|---|---|
<a> |
ハイパーリンク | <ins> |
挿入テキスト |
<b> |
太字 | <del> |
削除テキスト |
<strong> |
重要なテキスト | <button> |
ボタン |
<em> |
強調（斜体） | <input> |
フォーム入力 |
<i> |
斜体 | <img> |
画像 |
<small> |
小さいテキスト | <span> |
インラインコンテナ |
<sub> |
下付き文字 | <sup> |
上付き文字 |
▶ サンプル
<p>このテキストには <strong>太字の部分</strong> と <em>斜体の部分</em> が含まれており、<span style="color: red">同じ行に</span> 表示されます。</p>
(3) 2つのタイプの核心的な違い
▶ サンプル
<!-- ブロックレベルの比較 -->
<div style="border: 1px solid #e74c3c; padding: 4px;">ブロック1</div>
<div style="border: 1px solid #e74c3c; padding: 4px;">ブロック2</div>
<!-- 各divは独自の行を占有し、縦に積み重なる -->
<!-- インラインの比較 -->
<span style="border: 1px solid #3498db; padding: 4px;">インライン1</span>
<span style="border: 1px solid #3498db; padding: 4px;">インライン2</span>
<!-- 2つのspanは同じ行にあり、横に並ぶ -->
- ブロックレベル要素はインライン要素や他のブロックレベル要素を含めることができます。
- インライン要素はインライン要素（またはテキスト）のみを含められます。ブロックレベル要素を直接含めることはできません。
- 例外： HTML5では
<a>タグはブロックレベル要素をラップできます。例えば、カード全体をクリック可能なリンクにできます。
3. 要素のネストと階層
HTML要素はマトリョーシカのように互いにラップできます。この関係をネストと呼びます。ネスト構造はDOMツリー内での要素の階層関係を決定します。
(1) DOMツリーのノード関係
要素が互いにネストされると、3種類の関係が形成されます。
- 親子関係： 外側の要素は内側の要素の「親ノード」です。例えば、
<body>は<p>の親ノードです。 - 兄弟関係： 同じ親の下にある複数の子要素は互いに「兄弟ノード」です。例えば、
<h1>と<p>はどちらも<body>の子要素の場合、兄弟になります。 - 先祖-子孫関係： 複数レベルのネストをまたぐ関係です。例えば、
<html>はすべての要素の先祖ノードです。
次のネスト構造は、要素間の階層関係を明確に示しています。
▶ サンプル
<body> <!-- 親ノード -->
<h1>ページタイトル</h1> <!-- 子ノード + 兄弟 #1 -->
<p> <!-- 子ノード + 兄弟 #2 -->
この段落には <strong>強調されたテキスト</strong> が <!-- 孫ノード（pの子） -->
含まれています。
</p>
</body>
対応するDOMツリー構造は以下の通りです。
body
├── h1 ("ページタイトル")
└── p
├── テキスト: "この段落には "
├── strong
│ └── テキスト: "強調されたテキスト"
└── テキスト: " が含まれています。"
(2) 正しいネストと間違ったネスト
ネストは「後入れ先出し（LIFO）」の原則に従う必要があります ― 最も内側の要素を先に開き、最後に閉じます。タグが交差するように閉じられると、間違ったネストになります。
▶ サンプル
<!-- 正しいネスト：先に開いたものを後に閉じる -->
<div>
<p><strong>重要なテキスト</strong> に続けて通常のテキスト。</p>
</div>
<!-- 間違ったネスト：タグが交差している -->
<div>
<p><strong>重要なテキスト</p></strong>
</div>
<!-- ブラウザはこのエラーを修正しようとするが、予期しないレイアウト問題を引き起こす可能性がある -->
- インライン要素（例：
<span>、<strong>）はブロックレベル要素（例：<div>、<p>）をネストできません。 <p>タグは内部に他のブロックレベル要素（<div>や別の<p>など）をネストできません。- 深いネストは構文的には有効ですが、可読性とメンテナンス性が低下します。ネストは3〜4レベル以内に収めることを推奨します。
- ブラウザの「検証」機能（F12）を使ってDOMツリー構造を視覚的に確認できます ― 優れた学習方法です。
❓ よくある質問
div、section、article）を使用し、インライン要素（strong、em、a）はテキストレベルのスタイル付けにのみ使用します。<a>タグで、カード全体をクリック可能にするためにブロックレベル要素を囲むことができます。<strong>と<b>はどちらも太字、<em>と<i>はどちらも斜体ですが、違いは何ですか？<strong>は「このテキストは重要である」、<em>は「このテキストは強調が必要」を意味し、内容の重要性を伝えます。一方、<b>は「テキストを太字にするだけ」、<i>は「テキストを斜体にするだけ」で、見た目にのみ影響します。検索エンジンとスクリーンリーダーは<strong>と<em>のセマンティクスを認識しますが、<b>と<i>は無視します。原則：内容の意味を強調する場合は<strong>/<em>を使い、 purely visualなスタイリングには<b>/<i>またはCSSを使います。📖 まとめ
- 要素 = 開始タグ + コンテンツ + 終了タグ（通常の要素）、または開始タグのみ（空要素）。
- ブロックレベル要素は行全体を占有し、他のブロックレベル要素やインライン要素を含められる。インライン要素は同じ行に留まり、テキストまたはインライン要素のみを含められる。
- ネストは「後入れ先出し」の原則に従う。交差ネストは不可。
- DOMツリーでは、要素は親子、兄弟、先祖-子孫の3種類の関係を形成する。
📝 練習問題
-
ブロック vs インラインの実験： 同じ内容を持つ2つの
<div>（ブロックレベル）と2つの<span>（インライン）を使ってページを作成し、style="border:1px solid red"のスタイルを追加して、ブラウザでの配置の違いを観察してください。 -
DOMツリーの練習： 次のコードのDOMツリー構造を書き出してください（手書きでツリー図を描いてみましょう）。
<div><h2>タイトル</h2><p>テキスト<strong>強調</strong>終わり</p></div>
