HTML 見出し

Volardev 編集部 April 12, 2026

HTMLの見出しは、ページ内のタイトルやサブタイトルを定義するための要素です。

1. HTML 見出しの基本

HTMLの見出しは <h1> から <h6> までのタグで定義されます。
<h1> は最も重要な見出しを定義し、<h6> は最も重要度の低い見出しを定義します。

<h1>見出し 1</h1>
<h2>見出し 2</h2>
<h3>見出し 3</h3>
<h4>見出し 4</h4>
<h5>見出し 5</h5>
<h6>見出し 6</h6>

[!NOTE]
ブラウザは、見出しの前後に自動的に余白（マージン）を追加します。

2. 見出しの重要性

検索エンジン（Googleなど）は、見出しを使用してウェブページの構造とコンテンツをインデックス化します。

ユーザーは多くの場合、見出しを見てページを素早くスキャンします。見出しを使用してドキュメントの構造を示すことは非常に重要です。

<h1> 見出しはメインの見出しとして使用し、その後に <h2>、さらにその次に <h3> というように順番に使用するのがベストプラクティスです。

[!TIP]
テキストを太字にしたり大きくしたりするためだけに見出しを使用しないでください。見出しは、ドキュメントの構造を示すためだけに利用すべきです。

3. 見出しのサイズを大きくする

各HTML見出しにはデフォルトのサイズがあります。しかし、style 属性を使用して、CSSの font-size プロパティで任意のサイズを指定することも可能です。

<h1 style="font-size:60px;">見出し 1</h1>

4. HTML の水平線 (Horizontal Rules)

<hr> タグは、HTMLページ内にテーマの区切り（内容の切り替え）を定義し、水平線として表示されます。

<hr> 要素は、HTMLページ内のコンテンツを分離（または区切りを定義）するために使用されます。

<h1>これは見出し 1 です</h1>
<p>これはテキストです。</p>
<hr>
<h2>これは見出し 2 です</h2>
<p>これはテキストです。</p>
<hr>

<hr> タグは空要素（Empty Element）であるため、終了タグを持ちません。

5. HTML <head> 要素

HTMLの <head> 要素は、メタデータ（データに関するデータ）のためのコンテナです。HTMLのメタデータは、HTMLドキュメント自体に関する情報です。メタデータはブラウザには表示されません。

<head> 要素は、<html> タグと <body> タグの間に配置されます。

<!DOCTYPE html>
<html>

<head>
  <title>マイ・ページ・タイトル</title>
  <meta charset="UTF-8">
</head>

<body>
  コンテンツはここに入ります...
</body>

</html>

[!NOTE]
通常、HTMLのメタデータはドキュメントのタイトル、キャラクターセット、スタイル、スクリプト、その他のメタ情報を定義します。

6. HTML ソースを表示する方法

ウェブページを見て、「どうやって作られているんだろう？」と思ったことはありませんか？

6.1 HTML ソースコードの表示 (View HTML Source Code)

ブラウザ（Chrome、Edge、Firefoxなど）で表示しているページを右クリックし、「ページのソースを表示」を選択します。これにより、ページのHTMLソースコードが表示されるウィンドウが開きます。

6.2 要素の検証 (Inspect an HTML Element)

要素を右クリック（または要素をタップしたままに）して、「検証」を選択します。これにより、どの要素（HTMLとCSSの両方）で構成されているかを確認できるデベロッパーツール（Developer Tools）が開きます。また、デベロッパーツール内でHTMLやCSSをリアルタイムで編集し、その結果をブラウザ上で確認することもできます。