<h1> 〜 <h6>

<h1>最も重要な見出し（ページタイトル）</h1>
<h2>章の見出し</h2>
<h3>節の見出し</h3>
<h4>小節の見出し</h4>
<h5>さらに小さい見出し</h5>
<h6>最も小さい見出し</h6>

<article>
  <!-- h1はページに1つ。ページの主題を表します -->
  <h1>JavaScriptの基礎</h1>

  <!-- h2は章の見出し -->
  <h2>変数と型</h2>
  <p>JavaScriptでは『let』や『const』を使って変数を宣言します。</p>

  <h3>文字列型</h3>
  <p>シングルクォートまたはダブルクォートで囲みます。</p>

  <h3>数値型</h3>
  <p>整数・小数を区別なく扱います。</p>

  <!-- 次のh2セクション -->
  <h2>制御構文</h2>
  <p>条件分岐や繰り返し処理について学びます。</p>

  <h3>if文</h3>
  <p>条件に応じて処理を分岐させます。</p>
</article>

ブラウザは各見出しタグを階層構造として解釈し、『<h1>』が最も大きく太いフォントで表示され、数字が増えるにつれて小さいフォントで表示されます。見出しの前後には自動的に余白が入ります。

見出しタグは文書の階層構造（アウトライン）を作るためのものです。見た目を大きくしたいからといってh1を使ったり、フォントサイズを小さくしたいからh4を使ったりするのは誤った使い方です。見た目のサイズはCSSで調整し、タグは意味・役割に応じて選択してください。

『<h1>』は1ページに1つ使うことが推奨されています。検索エンジン（SEO）はh1をページの主題として解釈するため、ページの内容を端的に表すテキストをh1に設定することが重要です。

見出しのレベルはスキップしないようにしましょう。たとえば『<h1>』の次に『<h3>』を使うのは避け、『<h1>』→『<h2>』→『<h3>』の順番に使ってください。スクリーンリーダーのユーザーは見出しタグをナビゲーションに使うため、見出しの構造はアクセシビリティにも大きく影響します。