概要

<h1> から <h6> は、HTMLの見出し要素で、文書の構造を示すために使用されます。
<h1> が最も重要な見出しで、<h6> に向かって優先度が下がっていきます。
適切な使用はSEOやアクセシビリティの観点でも非常に重要です。

基本的な使い方

See the Pen metaについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

<h1>メインタイトル</h1>
<h2>セクション見出し</h2>
<h3>小見出し</h3>

<h1> はそのページの主題を示すために1ページに1回のみ使用するのが理想的です。
<h2>〜<h6> は、内容に応じて階層的に使い分けます。

出力される内容の例

会社概要
沿革
創業期（1990年〜）

役割とメリット（定義リスト形式）

文書構造の明示

階層的に見出しを配置することで、ページ全体の構造を明確に伝えることができます。

SEOに有効

検索エンジンは <h1> を特に重視し、ページのテーマを把握する手がかりとします。

アクセシビリティ向上

スクリーンリーダー利用者も見出し構造を通じてページの内容を把握しやすくなります。

スタイリングの基準

見出しにはデフォルトでスタイルが適用されており、CSSで簡単に装飾を変えることができます。

注意点

• <h1> は1ページ1回の使用が推奨されます（特にSEO観点）。
• 見出しの順序を飛ばさずに使うことが理想です（例：<h1>の次に<h3>ではなく<h2>）。
• 見た目のデザイン目的で使わず、意味的に正しい位置に配置しましょう。
• セクションを明確にしないと、検索エンジンにもユーザーにも伝わりづらくなります。

まとめ

<h1>〜<h6> は、Webページの構造を示すための重要なHTMLタグです。
正しく使うことでSEOやユーザビリティが向上し、検索結果やアクセシビリティの改善にもつながります。
特にWordPressテーマ制作では、テンプレート階層ごとの適切な見出し配置が求められます。