h1 - h6 タグエレメント

　<h1>-<h6> エレメントは、文章のヘッダー、題、見出しを表す HTML タグエレメントです。

　ページの題は <h1> を使うのが一般的です。それ以降は <h2>-<h6> エレメントを使います。
　少なくとも最上位の見出しである <h1> だけは使った方がよいようです。

<h1>あきたら日記</h1>
<p>
今日は晴れです。<br>
気持ちのいい天気です。
</p><p>
調子はいかかですか？<br>
私はとても調子がいいです。
</p><p>
かしこ
</p>

　注意する点としては、<h1>-<h6> エレメントといったヘッダーエレメントにリンクのための<a>エレメントを含めないという勧告がなされています。
　<h1>-<h6>内にリンクを張らないようにしましょう。

　<h1>の内容は <title> にも使うことができます。多くの場合は分けていることの方が多いようです。 <title> は、Google の検索結果の一覧の表題として使われるようです。
　<title> の内容は「ページ表題 | カテゴリー名 | サイト名」もしくは「サイト名 | カテゴリー名 | ページ表題」になっていることが多いです。

検索ロボットへの配慮

　検索ロボットがページの内容として <h1> や <title> とページ内容がほぼ合っているかを検証しているという話があります。 さらに、<h1>-<h6>エレメントは内容に沿って順次使わなければならないという話もあります。

　しかし、実際には検索ロボットのアルゴリズムを見ないと分かりません。 <h1>-<h6> エレメントを使っていないようなページや <h1> を多用しているページでも検索一覧に表示されるからです。
　検索された一覧に、<title> や <meta name="description"> の内容、<h1>とその直下の文面が表示されるので、特にそれらを要視している可能性はあります。

　LPページといった事業紹介ページなどは関係ないかもしれませんが、文章を中心として内容のページでは <h1>-<h6> を使って分かりやすく作成した方がよいでしょう。
　使っておいた方が後でレイアウトや装飾加えるときに楽ですし、見やすく、読みやすいページは閲覧が増えます。 閲覧が増えるほど検索ロボットは高評価を与えます。

　、<h1>-<h6> エレメントはセクショニングと呼ばれ、仕様書では内容を分けている最初にあることが期待されます。

Example

　<h1>-<h6>エレメントが文章中でどのように見えるかを確かめてみましょう。

　まずは以下の「テキスト編集」で文章を作成します。タグエレメントのことは気にしないで自由に編集してみましょう。

　「確認」ボタンをクリックすると、変換されたHTMLテキストのブラウザ上での見え方が分かります。
　以下の文章の１部を適当に選択し、「P」、「H1」などのボタンでテキストのタグエレメントを変更してみましょう。

JavaScript

　<h1>-<h6> を定義しているのは、HTMLHeadingElement です。プロパティ、メソッド、イベントについては HTMLHeadingElement を参照してください。

関連（Related）