HTML要素 ・ 見出し・文章
<h1>
最上位の見出し
ページの主題を表す、最も重要な見出しです。見出しは h1 から h6 までの6段階があり、h1 はその最上位にあたります。
01
サンプルコード
HTML
1<h1>Hello World</h1>
2<p>はじめてのWebページです。</p>
02
実行結果
ブラウザでの表示
03
解説
h1 は "heading 1" の略で、そのページ全体の主題を示す見出しです。ブラウザは既定で大きく太い文字で表示し、上下に余白をとります。
見出しは h1 から h6 までの6段階があり、数字が小さいほど重要度が高くなります。文書の章立てに合わせて h1 → h2 → h3 の順に階層を下げていきます。
検索エンジンやスクリーンリーダーは、見出しの階層をもとにページの構造を理解します。見た目の大きさではなく、内容の重要度で選ぶことが大切です。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
id | ページ内リンクの移動先として使う名前 |
class | CSSで装飾するための名前 |
lang | 見出しだけ言語が異なる場合に指定 |
ページの見出し構造をつくる
サイト名やページタイトルを h1 にし、その下の章を h2、節を h3 で表します。
HTML
1<header>
2 <h1>HTML & CSS GUIDE</h1>
3</header>
4<main>
5 <h2>Flexbox入門</h2>
6 <h3>主軸と交差軸</h3>
7</main>
注意点
- 01文字を大きく見せる目的で見出しを使わないでください。大きさはCSSの font-size で調整します。
- 02h1 の次にいきなり h3 を使うなど、階層を飛ばさないようにします。
- 03h1 は1ページに1つが一般的です。