備忘録的プログラミングリファレンス

<h1>-<h6>エレメント

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

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

例:<h1>エレメントでページ表題を
<h1>あきたら日記</h1>
<p>
今日は晴れです。<br>
気持ちのいい天気です。
</p><p>
調子はいかかですか?<br>
私はとても調子がいいです。
</p><p>
かしこ
</p>
ブラウザ上での表示

あきたら日記

今日は晴れです。
気持ちのいい天気です。

調子はいかかですか?
私はとても調子がいいです。

かしこ

 <h1>の内容は<title>にも使います。<title>の内容は「ページ表題 | カテゴリー名 | サイト名」もしくは「サイト名 | カテゴリー名 | ページ表題」になっていることが多いです。

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

検索ロボットへの配慮

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

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

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

JavaScript

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

Example

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

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

 「変換」ボタンをクリックすると、上記の文章の改行と段落を自動で解釈してHTMLテキストを作成します。

HTMLに変換

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

Webページとして表示