「見出し」を表すh要素は、Webページ内の文章の要約と重要性のランクを意味付ける要素です。文書構造を定義するとき、「段落」を意味するp要素とともに適切にマークアップすることで「表題」とそれに続く「本文」という情報の関係性を明確にするための最も基本的な要素となります。
見出しを表すh要素
h要素は「heading」の略で、「見出し」を意味します。「見出し」とは文書全体の表題や文章のタイトルのことです。 Webページにもページのタイトルとなるものやそれぞれのセクションに適切な見出しがあり、h要素はそれらをマークアップするのに使用するタグです。見出しとしてマークアップするテキストは、それに続く文章の要約であり、その情報の重要なキーワードでもあるということになります。
h要素のタグにはh1、h2、h3、h4、h5、h6の6つが存在します。1から6は見出しの重要度を示すレベルを数字で表したもので、h1が一番重要度が高く、h6が一番重要度が低いものにマークアップします。
見出しを表すh要素
<h1>１番目に大きな見出し</h1>
<h2>２番目に大きな見出し</h2>
<h3>３番目に大きな見出し</h3>
<h4>４番目に大きな見出し</h4>
<h5>５番目に大きな見出し</h5>
<h6>６番目に大きな見出し</h6>h要素は検索エンジンの最適化のために重要な役割を担っているだけでなく、見出しを適切にマークアップすることでユーザーにとって文章の構成や重要度などが分かりやすいページに仕上げることができます。
Note
Webブラウザで確認すると、h要素でマークアップしたテキストの文字サイズが見出しランクによって大きさが変わり、そのランキングを視覚的に表現され、その前後が改行されています。これはh要素が Webブラウザでは前後に改行が入り、広がれるだけ左右いっぱいに広がるブロックとして表現されるからです。
このように表示される要素は以前は「ブロックレベル要素」と呼ばれていた要素のグループで、その名の通り情報をひとつのブロックとして表現します。現在は「ブロックレベル要素」という分類はなくなり「ブロックボックス」という視覚的な表示特性としてCSSでコントロールされています。
h要素の使い分け
h要素の構造では、h1～h6を階層や段落に応じて適切に使い分る必要があります。例えば、h2要素の下層にh4要素が現れた、さらにその下層にh3要素が現れたりする構造は、階層がバラバラのため適切なマークアップとはいえません。可能な限り階層に応じた適切な見出しランクをできる限り考慮する必要があります。
適切な見出しのランクを設定することでそのページ内の文書構造を明確にすることができます。ユーザーがコンテンツの階層構造を理解するための手助けになります。
h1要素の重要な役割
h1要素はWebサイト全体の主題やWebページのタイトルになるものをマークアップする最も重要な意味を持つ要素です。
h1要素はtitle要素と並んでSEO上大変重要な要素です。検索エンジンが検索順位を決める際、WEBサイトの題名であるh1要素・title要素は最も重要なテキストとして判断しているとされています。検索エンジンの評価を考慮してh1要素は最も大きな（重要な）見出しで、 Webページの主題を表すのに一度だけ使うのが良いとされています。
段落を意味するp要素
p要素は「paragraph（パラグラフ）」の略で文書の段落を表します。段落とは文書内でひとかたまりになっている文章のことで、通常は複数の文によって構成されます。 Webページ上のほとんどの文章は、このp要素を使います。
段落を意味するp要素
<p>p要素は「paragraph（パラグラフ）」の略で文書の段落を表します。</p>強制改行を意味するbr要素
p要素でマークアップしたときにもh要素と同様に視覚的に前後に改行が入りますが、単純に文章の途中で改行を入れたいときはp要素で段落分けするのではなくbr要素を使って改行します。
br要素は「（forced line） break」の略で、強制的に改行を挿入します。文章の途中で区切りを入れるために使用します。改行位置を示すためのbr要素には終了タグはなく、中身を持たない空要素です。
br要素は連続して書くことで改行されて行が空いていきますが、本来見た目の行間を調整するためのものではありませんので、そのような使い方をするべきではありません。
行間を空けるときはp要素で段落として分割し、スタイルシートを使って段落の間の隙間を調整するようにしましょう。
強制改行を意味するbr要素
<p>文章の途中で区切りを入れるために改行する場合はbr要素を使います。<br>
連続して書くことで見た目の行間を調整するために使用するのはやめましょう。</p>