HTML Academy · レッスン

見出しh1〜h6とその階層

Q: 「見出しh1〜h6とその階層」で何を学びますか？

見出しレベルを使って、意味のある文書構造を作成します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

見出しレベルを使って、意味のある文書構造を作成します。

「見出しh1〜h6とその階層」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

見出しの6段階

HTMLには<h1>から<h6>まで、6種類の見出し要素があります。

h1 — ページのメインタイトル（最も重要）
h2 — 大きなセクション
h3 — サブセクション
h4, h5, h6 — より深いサブセクション（通常はほとんど必要ありません）

見出しは段階的に小さく表示されますが、サイズは番号ではなくCSSで制御されます。

セマンティックな階層構造

見出しは文書のアウトライン、つまりページの目次を作成します。

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

h1のルール

<h1>を使う際のベストプラクティス：

1ページにつき<h1>を必ず1つだけ使用する
<title>要素と一致させるか、密接に関連付ける
ページの主題を表す
SEOにおいて検索エンジンから特に重視される

見出しレベルを飛ばさない

見出しレベルは順番どおりに使用してください。h2からh4へ飛ばしてはいけません。

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

ナビゲーションのための見出し

スクリーンリーダーの利用者は、長いページを移動するために見出しを利用します。

Hキーで見出し間を移動できます
スクリーンリーダーは、目次のようにすべての見出しを一覧表示します
正しい階層構造により、視覚に頼らずページを移動できます

スタイルとセマンティクス

見出しレベルは表示サイズで選ばず、表示サイズにはCSSを使用してください。

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

セクション内の見出し

HTML5のセクション要素を使用すると、見出しの階層はセクションごとにリセットされます。

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

見出しのアクセシビリティに関するヒント

アクセシビリティのため、次の見出しのルールに従ってください。

すべてのページに少なくとも1つの見出しを置く
メインコンテンツ領域は<h1>で始める
テキストを太字や大きな文字にするためだけに見出しを使用しない
見出しの代わりに太字のテキストを使用しない

SEOと見出し

検索エンジンは、見出しを使ってページの内容を理解します。

<h1>はSEO上、最も大きな重みを持ちます
見出しには対象キーワードを自然に含める
見出しは内容を分割し、可読性の指標を向上させる
検索エンジンは検索結果に見出しを表示します（強調スニペット）

ブラウザーのデフォルトスタイル

ブラウザーは見出しにデフォルトのスタイルを適用します。

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

ナビゲーション内の見出し

見出しはナビゲーションランドマーク内でも使用できます。

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

確認問題

適切に構造化されたページには、通常いくつのh1要素を置くべきでしょうか。

まとめ：見出し

見出しの階層構造の基本：

6つのレベル：h1からh6まで
1ページにつきh1は1つ — メインタイトル
レベルは順番どおりに使用し、決して飛ばさない
見出しによってアクセシブルな文書のアウトラインを作成する
表示サイズには見出し番号ではなくCSSを使用する

よくある質問

「見出しh1〜h6とその階層」レッスンは無料ですか？

はい。「見出しh1〜h6とその階層」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「見出しh1〜h6とその階層」で何を学びますか？

見出しレベルを使って、意味のある文書構造を作成します。ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「見出しh1〜h6とその階層」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る