HTML で「見出し」を入れるときに、h1-h6 要素を使いますよね。でも、なんとなくテキトウに入れてませんか？
今回は、そんなh1-h6 要素についてまとめてみました。
h1~h6 要素は
ヘディング の「h」
h1-h6 要素の h は、heading（ヘディング：見出し）の『h』からくるものだと考えられます。意味は、「見出し」や「表題」です。
「ヘッダー」ではありません。
そう覚えておいても支障はないかもしれませんが、せっかくなので正しく覚えちゃいましょう！ちなみに「ヘッダー」は、ページやセクションなどの上部の領域を指します。概要とかナビゲーションとかアイコンとかを配置される場所ですね。
「ヘディング」は、先述の通り見出しや表題、タイトルのことです。似たような単語ですが、それぞれ別の役割や意味を持っています。
クラス名とかつけるときに、きちんと使い分けられたら、ちょっとプロっぽくてカッコいいですよね！
単語
heading：【名詞】（ページ・章などの）表題、見出し、項目（weblio）
１つのページに
h1 要素は１つだけ！？
h1 要素は、１つのWeb ページに１つだけというのが一般的です。特に理由がない場合はこの習わしに従ってしまうのが良いと思います。
しかし、実際のところは、
公式である W3C も、 Google 様も、『h1 要素は１つにしなければならない』と明示しているわけではなく、とくに推奨しているわけではないのです。かといって SEO に影響がないとは言い切れません。大切なのは「見出し」のセマンティックの役割をきちんと果たすようにすることです。
海外&国内SEO情報ウォッチさんの記事がとても参考になりましたので、ぜひご覧ください。
h1-h6 要素の
基本的な使い方
見出しをマークアップする際には、最も重要な見出しに h1 要素、重要度に応じて h6 までを順番に使い分けます。この h1-h6 の順序を“レベル”や“ランク”などで表したりします。
h1 要素は、ページに１つ入れるのが一般的です（ただし、先述の通り W3C や Google 様が明示しているわけではありません。）。使い方はとてもわかりやすいですよね。ブログ記事やページのタイトルを h1 要素にしてあげるのが良いと思います。
では問題は、h2-h6 をどうやって使うんだいっ！っていう話ですよね。
一般的には以下のことを意識して使います！
・レベル順に使う
・レベル順のスキップはイマイチ
・セクションを閉じてからのスキップはOK
あまりピンと来ないかもしれないので、具体例で見ていきましょう。
レベル順に使う
h1-h6 は基本的にレベル順に使います。例えばこんな感じ。
<h1>推奨される例【１】</h1>
<p>テキスト</p>
<h2>見出しレベル２</h2>
<p>テキスト</p>
<h3>見出しレベル３</h3>
<p>テキスト</p>
<h4>見出しレベル４</h4>
<p>テキスト</p>
<h2>見出しレベル２</h2>
<p>テキスト</p>
<h3>見出しレベル３</h3>
<p>テキスト</p>あんまりピンとこないですね。『h4 のあとにh2が入ってるけどどうなの？』、これは後ほどわかります。まずは悪い例【１】を見てみましょう。
<h1>悪い例【１】</h1>
<p>テキスト</p>
<h2>見出しレベル２</h2>
<p>テキスト</p>
<h4>見出しレベル４</h4>
<p>テキスト</p>
<h3>見出しレベル３</h3>
<p>テキスト</p>この例だと、
h4 と h3 の順序がイマイチということがわかるかと思います。
レベル順のスキップはイマイチ
もうひとつ、悪い例【２】を見てみます。
<h1>悪い例【２】</h1>
<p>テキスト</p>
<h2>見出しレベル２</h2>
<p>テキスト</p>
<h4>見出しレベル４</h4>
<p>テキスト</p>悪い例【１】の h3 を削除しただけなのですが、この場合は、h2 から h4 に順序を飛ばしているため悪い例です。
ただし、次の例の場合は許容されます。
セクションを閉じてからのスキップはOK
<h1>許容される例【１】</h1>
<p>テキスト</p>
<h2>見出しレベル２</h2>
<p>テキスト</p>
<h4>見出しレベル４</h4>
<p>テキスト</p>
<h2>見出しレベル２</h2>
<p>テキスト</p>いったいぜんたいどうなっているのかって言うと、
HTML の仕様として「見出し」の要素を使用することで、それに続く内容と合わせて一つのセクションとみなされます。また、セクションはレベルに応じて文書の論理的な階層を形成します。具体的には h2 と h3 がコード上で同じ階層に記述されている場合、h2 のセクション内に h3 のサブセクションが含まれていると解釈されます。
さらに、h3 のセクションの後に新たな h2 が追加された場合、これは新しいセクションが形成されることを示しており、最初の h2 のセクションは明確に“閉じられている”状態になります。
この状態であれば、h2 のセクション内に、h3 を飛ばして h4 が入っているということが、文章の論理的構造として問題ないとみなされ、許容されます。
このことを踏まえて、
先ほどの『レベル順に使う』の例での『h4 のあとにh2が入ってるけどどうなの？』という疑問は晴れましたね！h2 のセクション内に h3 > h4 があり、そのあとに新たに h2 のセクションが爆誕したという構造です！
h1-h6 要素は
テキストがオススメ！
h1-h6 要素は「ブロック要素」で、「コンテンツモデル」を参照すると、内包することができる要素は「Phrasing content（フレージングコンテンツ）」。わかりやすいものとしては a 要素や img 要素などを内包することができます。（他の要素が気になる方は W3C のページをご参照ください。）。
「コンテンツモデル」がわからない場合は下の記事をぜひご覧くださいませ。
しかし、
基本的には、
見出しはテキストにすることをオススメします！
テキスト以外のもので h1-h6 要素に内包する要素で思いつくのが、img 要素（画像）ですよね！ド派手にデザインした画像を「見出し」として挿入した方が良さそうに思いますが、見出しは SEO の観点からとても重要な要素で、画像だと検索エンジンが正しく認識できない可能性があるというのと、アクセシビリティの観点からもスクリーンリーダーなどの支援技術が正しく情報を伝えられない可能性があります。
どうしても画像で見出しを入れたい場合は、必ず alt 属性使って適切な代替テキストを入れましょう！
まとめ
見出しの要素は基本的な使い方としては、h1-h6 のレベル順で使用します。また、h1-h6 を入れると文章の論理的な見えないセクションが作られるので、閉じられたセクション内であれば、レベル順のスキップが許容される場合があります。
それと見出しはテキストを入れることが SEO やアクセシビリティの観点からオススメです！
そして、
突き詰めていくと結構ムズイ。
アクセシビリティとの関りやページ構成によっての使い分けなど、まだまだ奥深い要素なので、今回まとめきれなかったところはまた後日記事にできたらと思います。
参考・出典
・W3C. 「4.3.6 The h1, h2, h3, h4, h5, and h6 elements」. https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements, 2024年9月30日閲覧。
・MDN. 「<h1>–<h6>: HTML の見出し要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/Heading_Elements, 2024年9月30日閲覧。
・weblio. 「headingとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/heading, 2024年9月30日閲覧。
・海外＆国内SEO情報ウォッチ. 「【SEOクイズ】「h1タグは1つだけ」をグーグルは推奨している： 〇? ×?【SEO情報まとめ】」. https://webtan.impress.co.jp/e/2021/05/21/40166, 2024年9月30日閲覧。
・W3C WAI. 「Heading」. https://www.w3.org/WAI/tutorials/page-structure/headings/, 2024年10月1日閲覧。
