h1要素とは
<h1>
要素の「h」は、headingの略で見出しを表します。見出しの要素は、<h1>
〜 <h6>
まであり、階層構造に合わせて使い分けます。<h1>
要素は、もっとも最も上位の階層に使用する見出しで、ページの大見出しを表します。従って、ページのタイトルと同等レベルの見出しに、この<h1>
要素を使います。
- 意味・役割
- 見出しを表す要素(基本的にはページタイトルと同等の見出し)
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
- コンテンツ・カテゴリ
- (HTML5より前:ブロックレベル要素)
- コンテンツ・モデル(梱包できる要素)
-
フレージング・コンテンツ
(HTML5より前:インライン要素) - この要素を配置できる親要素
- フロー・コンテンツが配置できる要素
h1要素で使える属性
どの要素にでも使えるグローバル属性と以下の属性が使えます。
align属性 XHTML 1.1で廃止
要素内の行揃えを指定する属性。この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:text-align
プロパティで行うようにしましょう。
- 属性値
-
- "left": 左揃え(初期値)
- "center": 中央揃え
- "right": 右揃え
- "justify": 両端揃え(複数行の英文に有効)
- 利用できるバージョン(HTML4.01以降) HTML4.01で非推奨
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
<h1 align="center">中央揃え</h1>
<h1 align="right">右揃え</h1>
RERUN
h1要素のサンプル
<h1>ジャンル別おすすめの飲食店</h1>
<section>
<h2>和食</h2>
<p>和食のおいしいお店を集めました。</p>
<section>
<h3>お寿司</h3>
<p>お寿司のおいしいお店を集めました。</p>
<section>
<h4>回転寿司</h4>
<p>回転寿司のおいしいお店を集めました。</p>
<section>
<h5>1皿150円より安い</h5>
<p>1皿150円より安い回転寿司のおいしいお店を集めました。</p>
<section>
<h6>〇〇寿司</h6>
<p>〇〇寿司は安くて美味しいお寿司屋さんです。</p>
</section>
</section>
<section>
<h5>1皿150円以上</h5>
<p>1皿150円以下の回転寿司のおいしいお店を集めました。</p>
</section>
</section>
<section>
<h4>回ってない寿司</h4>
<p>回ってない寿司のおいしいお店を集めました。</p>
</section>
</section>
<section>
<h3>うどん</h3>
<p>うどんのおいしいお店を集めました。</p>
</section>
</section>
<section>
<h2>洋食</h2>
<p>洋食のおいしいお店を集めました。</p>
</section>
RERUN
h1要素の注意点
見出しを表す<h1>
〜 <h6>
要素は、通常、見出しのレベルに合わせて文字サイズが大きくなりますが、文字サイズを変更する目的で使用するのはやめましょう。文字サイズの変更は、CSSの:font-size
プロパティで行うようにしましょう。