HTMLの見出しレベルについて
HTML文書で「見出し」を表すのは、<h>タグ(heading tag)です。見出しは、文書の構造を示し、読み手に内容を理解しやすくするために使用します。見出しレベルは6段階あり、数字の小さい<h1>が最大レベルの見出しで、<h6>が最小レベルの見出しです。
見出しレベルと表示例
見出しレベルとブラウザでの表示例は以下の通りです。見出しタグに囲まれた内容は太字になり、その前後に改行が入ります。
| 見出しレベル | タグ | 表示例 |
|---|---|---|
| レベル1 | <h1></h1> |
レベル1の見出し |
| レベル2 | <h2></h2> |
レベル2の見出し |
| レベル3 | <h3></h3> |
レベル3の見出し |
| レベル4 | <h4></h4> |
レベル4の見出し |
| レベル5 | <h5></h5> |
レベル5の見出し |
| レベル6 | <h6></h6> |
レベル6の見出し |
見出しレベルを使い分けるメリット
- 文書構造が明確になり、読みやすくなる
- SEO(検索エンジン最適化)に効果的
- スクリーンリーダーなどの支援技術を利用するユーザーにとって理解しやすい
見出しレベルの使用例
例えば、以下のようにブログ記事のタイトルに見出しレベル1、セクションのタイトルに見出しレベル2、さらに細かい内容に見出しレベル3…と使用します。
<h1>ブログ記事のタイトル</h1>
<p>記事の導入部分</p>
<h2>セクション1のタイトル</h2>
<p>セクション1の内容</p>
<h3>セクション1-1のタイトル</h3>
<p>セクション1-1の内容</p>
<h2>セクション2のタイトル</h2>
<p>セクション2の内容</p>
よくある質問
Q1: 見出しレベルは順番通りに使わなければいけませんか？
A1: 基本的に順番通りに使用することが推奨されますが、必ずしもそうしなければいけないわけではありません。ただし、順番通りに使用しないと、文書構造がわかりにくくなる可能性があります。
Q2: 見出しの文字の大きさや色は変更できますか？
A2: はい、CSSを使って変更することができます。
Q3: <h>タグ以外に見出しとして使えるタグはありますか？
A3: <h>タグ以外に見出しとして使用できるタグはありません。見出しには必ず<h>タグを使用してください。