初心者でもわかるh要素による見出しとは？

h要素とは

HTMLには見出しを表現する要素として、h要素があります。

h要素は重要度に応じて、<h1>〜<h6>までの6段階あります。<h1>が最上位の見出しを意味します。開始タグ<hx>と終了タグ</hx>の間に、見出しテキストを記載します。

<h>タグの種類

<h1>見出しレベル1</h1>

<h2>見出しレベル2</h2>

<h3>見出しレベル3</h3>

<h4>見出しレベル4</h4>

<h5>見出しレベル5</h5>

<h6>見出しレベル6</h6>

見出しが挿入されることで、後に続く文章の「要約」を表し、文章を「まとまり」ごとに区切り、「階層構造」を可視化しているため、可読性が高くなっています。見出しは後の文章の要点を知る手がかりであり、段落ごとに設置することで文章のまとまりを視覚的に表現できます。

h要素は、見出しレベルに合わせたフォントのサイズや太さが変更されるため、コンテンツの階層構造を視覚的にユーザーに伝えることができます。結果として、ユーザーはパッと見ただけでコンテンツの概要を理解できます。

見出しの役割は、コンテンツを閲覧するユーザーだけでなく、検索エンジンにとってもコンテンツを把握する材料になるとされています。

h要素を記載する際の注意点を紹介します。h要素の不適切な使用は、SEOに悪影響を及ぼす可能性があります。

h要素は<h1>から<h6>まで順番に階層構造を意味しています。

最上位のh1は1ページに1つだけを記載し、その下にh2やh3を続けることをおすすめします。

段落を細かく分類して必要以上に多くの見出しを設置すると、見出しが持つ要約の意味が薄くなり、論理構造を理解しづらくなってしまいます。意味のまとまりである段落として、見出しをつけましょう。

1ページに1つだけ記載するh1で設定する見出しは、title要素と同じようにページの内容を端的に要約したものになります。各ページは異なるため、h1の見出しも当然ページごとに違うものになります。

見た目のスタイルを整える目的だけで、h要素を使用することは適切ではありません。見出しは階層構造を表すものであり、文章構造に応じて設置すべきです。

レイアウトデザインには基本的にCSSを使用しましょう。「文書はHTML」「装飾はCSS」と別ファイルにする方が管理が簡単です。