見出し
h1〜h6
見出し要素はページの文書構造を定義するセマンティック要素です。h1が最上位、h6が最下位で、検索エンジンやスクリーンリーダーがページ構造を解釈するために使用されます。
デモ：h1〜h6の見た目
h1 — 最上位の見出し（ページ全体のタイトル）
h2 — 第2レベル（大セクション）
h3 — 第3レベル（中セクション）
h4 — 第4レベル（小セクション）
h5 — 第5レベル（より細かい区分）
h6 — 第6レベル（最小の見出し）
コード例
<h1>ページのメインタイトル</h1>
<h2>第2レベルの見出し</h2>
<h3>第3レベルの見出し</h3>
<h3>第3レベルの見出し（兄弟要素）</h3>
<h4>第4レベルの見出し</h4>
<h2>次の第2レベルセクション</h2>文書アウトラインのベストプラクティス
- h1はページに1つだけ推奨（SEOおよびアクセシビリティの観点から）
- 見出しレベルは順番通りに使用する（h1→h2→h3）。h1の次にh3を飛ばすのは避ける
- 見出しはスタイリング目的で使わない。太字にしたいだけならCSSを使う
- スクリーンリーダーは見出しをナビゲーションポイントとして使う
比較：h要素 vs CSSで見た目だけ変える
| 観点 | h1〜h6（セマンティック） | divにfont-sizeのみ |
|---|---|---|
| SEO | ✅ 検索エンジンが構造を認識 | ❌ 意味を持たない |
| スクリーンリーダー | ✅ ナビゲーションポイントとして機能 | ❌ 単なるテキストとして読み上げ |
| デフォルトスタイル | ブラウザのユーザーエージェントスタイルが適用 | スタイルなし |
| スタイルの自由度 | CSSで上書き可能 | 完全に自由 |
Tipsaria-level でカスタム見出し
スタイル上の理由でh要素を使えない場合、role="heading" と aria-level を組み合わせることで意味的な見出しを表現できます。
<div role="heading" aria-level="2">
セマンティックな第2レベル見出し
</div>🤖 AIプロンプトテンプレート
以下の要件を満たす、見出しタグのHTML・CSSサンプルを作成してください。 - `<h1>` 〜 `<h6>` の階層構造を正しく使った文書アウトラインを示すこと - `<h1>` は1ページに1つだけ使用し、ページの主題を表すこと - 見出しレベルをスキップしない（h1→h3のようなスキップはNG）例と理由を示すこと - スクリーンリーダーによる見出しナビゲーションのアクセシビリティを説明すること - 見出しのCSSスタイリング（サイズ・余白・カラー）のサンプルも含めること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。