In HTML, the h1 through h6 elements are tags used to present headings in a hierarchical manner, clarifying a webpage’s structure and improving readability, SEO, and accessibility.
HTMLの見出し要素（Heading Elements）は、Webページの構造をわかりやすくするために欠かせないタグです。<h1>から<h6>まで6つの段階があり、文章の階層的な構造を伝える重要な役割を担います。
見出し要素とは、HTMLドキュメント内でコンテンツのタイトルや重要な項目を明示するために使うタグです。たとえば、新聞や雑誌の記事で「大きな文字で書かれているタイトル」や、「章のタイトル」を思い浮かべるとわかりやすいでしょう。ブラウザや支援技術（スクリーンリーダーなど）は、これらの見出しを使って文章構造を解釈し、読み上げの順序や目次の生成などに活用します。
HTMLでは、<h1>から<h6>までの6段階の見出しが定義されています。数字が小さいほど上位レベル（最重要）で、数字が大きいほど下位レベル（重要度が低い）を表します。
<h1><h2><h3><h4><h5><h6>HTML4の頃から存在する要素ですが、HTML5以降でも見出しの概念は変わっておらず、基本的な使い方は同じです。
HTML
<h1>メインタイトル</h1>
<p>このページのメインテーマを端的に示す見出しです。</p>
<h2>セクション1</h2>
<p>これはセクション1の内容に相当する段落です。</p>
<h3>サブセクション1-1</h3>
<p>サブセクションに関する詳しい情報をここに書きます。</p>
<h2>セクション2</h2>
<p>これはセクション2の内容に相当する段落です。</p>メインタイトル
このページのメインテーマを端的に示す見出しです。
セクション1
これはセクション1の内容に相当する段落です。
サブセクション1-1
サブセクションに関する詳しい情報をここに書きます。
セクション2
これはセクション2の内容に相当する段落です。
上記の例は、ページ全体の主題を<h1>で示し、その下に<h2>や<h3>を使って段階的に区分しています。ブラウザ上で見ると、<h1>が一番大きな文字で表示され、<h2>はそれより少し小さく、<h3>はさらに小さく表示されるのが一般的なデフォルトのスタイルです（ただし、表示の大きさはCSSなどで自由に変更できます）。
見出し要素は、文章の論理的構造を表すために用いられます。適切に階層を割り振ることで、ページを読む人にも、機械（検索エンジンや支援技術）にも内容を理解しやすくします。階層は必ずしも連番を順序通りに使わなければいけないわけではありませんが、一般的には下記のように<h2>の次に<h3>と繰り下げていくことが多いです。
単に文字を大きくするためだけに<h1>を多用すると、文書全体の意味がわかりにくくなり、検索エンジンやスクリーンリーダーにとっても混乱の原因となります。
<h1>は1回しか使ってはいけない」というルールが推奨されてきました。HTML5では技術仕様として厳密な制限はなくなりましたが、多くのSEO専門家やアクセスビリティの観点からは、現在でも「1ページにつき1つの<h1>」を守る方が無難だと言われています。<h2>があるのにいきなり<h4>を使うと、階層が飛んでしまい論理構造が不明瞭になる可能性があります。実際には技術的に不正ではありませんが、情報を整理しにくくなるため、あまり推奨されません。<h4>のスタイルをそのまま見た目として使いたい場合は、見出し要素によらずCSSでフォントサイズや太さを調整するのがおすすめです。検索エンジン（特にGoogle）は、見出しをページの内容を判断する一つのシグナルとして活用します。以下の点を押さえておくとよいでしょう。
<h1>によって、そのページの主題を示す。<h2>、<h3>などがそれぞれのサブトピックを明示する。見出しに適切なキーワードを配置すると、検索エンジンにも読者にも「このセクションは何を扱っているのか」がわかりやすく伝わります。
<article>タグで囲み、その中に見出しを適切に配置しつつArticle構造化データを付与するなどの工夫が有効です。見出し要素が正しく配置されていると、スクリーンリーダーを利用するユーザーは見出しだけを抽出して飛ばし読みができます。たとえば、h1 → h2 → h3 → h2 → h3という順に読み上げられるため、ページ全体の内容を把握しやすくなります。逆に見出しのレベルがめちゃくちゃだったり過剰に重複したりすると、利用者に混乱を与える恐れがあるので注意が必要です。
見た目重視で無理に見出し要素を使うのではなく、**文書の構造（セマンティクス）に基づいて見出しを設定しましょう。アクセシビリティ向上の基本は、「論理的でわかりやすい文書構造」**です。
HTMLが提供する見出し要素のデフォルトスタイルはシンプルですが、以下のようにCSSを使って自由にカスタマイズできます。
CSS
h1 {
font-size: 2.5em; /* フォントサイズを大きくする */
font-weight: bold; /* 太字 */
color: #333; /* 文字色 */
margin-top: 0.5em; /* 上部マージン */
margin-bottom: 0.5em; /* 下部マージン */
}
h2 {
font-size: 2em;
border-bottom: 2px solid #ccc; /* 見出しの下に線を引く */
padding-bottom: 0.3em;
}
h3 {
font-size: 1.5em;
color: #666;
}メインタイトル
セクション１
セクション１－１
<h2>や<h3>など階層に合ったタグを使い、見た目だけをCSSでコントロールするのが理想的です。HTML5の仕様としては「1ページに<h1>が複数あってもエラーではない」とされています。ただし、それぞれが別のセクションを表している場合に限られることが多く、読み手や検索エンジンに誤解を与えないかを考える必要があります。通常は「メインタイトル」1つに限定し、その下位に<h2>, <h3>... を用いる方が明確です。
<div>はセクションを区切る汎用的なコンテナ要素であり、見出しそのものの役割は持ちません。見出しテキストを大きく見せたいだけなら<div>にCSSを当てる方法も可能ですが、意味論的には正しい使い方ではないという点に注意が必要です。
WordPressなどのCMSでは、テーマやプラグインによって見出し要素のスタイルが変わる場合があります。見た目の大きさで「これは<h2>っぽい」と思っていても、実際のHTMLでは<h3>になっていたりするケースもあるので、編集画面のソースを確認すると確実です。
大型サイトやWebアプリケーションでは、コンポーネント化されたUIを使うことが多くなります。たとえば、ReactやVue.jsなどのフレームワークを用いている場合、コンポーネント単位で見出しをどう管理するかが課題になります。
<h2>や<h3>などを切り替えるロジックを持たせるか、もしくは親から「見出しのレベル」をプロパティとして受け取る形にするかなど、設計が必要です。role="heading"属性を使って、画面上では見出しのように見えない要素でも、支援技術に対して見出しであることを伝えることができます。たとえば、次のような例です。
HTML
<div role="heading" aria-level="2">このテキストは見出しとして認識される</div>ただし、単純にHTMLの見出し要素を使える場合はそれで済ませるのがベストです。ARIA属性はあくまで補足的な手段であり、「ネイティブに用意された要素で対処できるならそちらを優先する」というのが基本的な考え方です。
WordPressや、その他CMSのリッチテキストエディタでは、見出しを簡単に挿入できるボタンが用意されています。ライターや編集者の方々に構造化された文章を書いてもらうには、「見出し」を正しく設定する方法をガイドすることが重要です。
HTMLの<h1>～<h6>要素は、Webページの論理構造や可読性、そしてSEOやアクセシビリティにも大きく関わる重要なタグです。次のポイントを押さえておくと、より使いやすく、よりわかりやすい文書が書けるようになります。
<h1>はページの主要タイトルとして1つが理想<h2>～<h6>を使ってまとめましょう。適切な見出し要素の使い方を理解すれば、ユーザーにとっても検索エンジンにとっても見やすく、意味のあるWebページを作ることができます。