本気で学ぶ!HTML入門#07

【HTML入門】見出しは<h1> 〜 <h6>の6段階の階層構造

HTML入門#07

「HTML入門」7回目ですね。今回もテキスト関連のブロックレベル要素で、「見出し」という文書構造を表す「h1要素」〜「h6要素」(<h1><h6>)について学習してきましょう。「見出し要素」も「ブロックレベル要素」の中で非常によく使う要素になりますので、その使い方をに覚えていきましょう。

目次

  1. 見出し要素
  2. 見出し要素の使い方
  3. 【演習】見出し要素を使ってみよう!
  4. まとめ

見出し要素とは

見出し要素は、<h1><h6> 6段階で、WEBサイト上の章や項の見出しを表す要素です。

概要
h1要素からh6要素の「h」はHeadingの略で、見出しを表す。もっともお大きな見出しを表す<h1> 〜 もっとも小さな見出しを表す<h6>6段階でWEBサイトの階層構造を示す。
コンテンツ・カテゴリ
コンテンツ・モデル
フレージング・コンテンツ
配置できる場所
フロー・コンテンツが配置できる場所
ブロックレベル要素・インライン要素
ブロックレベル要素
(ただし、子要素(この要素の中)にブロックレベル要素は配置できない。)

要素のカテゴリやコンテンツモデルについては、下記の記事を下さい。

HTML入門#05

【HTML入門】要素のカテゴリは配置のルールを示す

WEBサイトの各ページにはさまざまなコンテンツがあると思います。それからのコンテンツに階層構造(アウトライン)を持たせるように、<h1><h6>を使い分けます。

見出し要素の使い方

見出し要素は、以下のようにコンテンツの見出しを<h1><h6>のいずれかの要素で囲みます。尚、見出し要素の中にはフレージング・コンテンツを配置することが出来ます。

サンプル

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

表示例

See the Pen rLBeNr by Qlio (@qlio) on CodePen.23853

注意点

見出し要素を使うと、主要ブラウザは通常文字サイズを大きく表示します。これはあくまで、ブラウザが視覚的に見ているユーザーに対して「見出しなので、それが視覚的にわかるように普通の文章より大きく表示しておこう」という配慮です。従って文字サイズの大きさを変更する目的で見出し要素を使うのは間違った使い方です。

<h1><h6>は、章や項などといった階層構造を持たせるように使い分けます。例えば以下のような感じです。(かなり強引に階層を深くしていますし、見出し以外の要素は省略しています。)

<h1>豊中の美味しいごはん屋さんを紹介</h1>
  <h2>和食</h2>
    <h3>お寿司</h3>
      <h4>回転寿司</h4>
        <h5>100円寿司</h5>
          <h6>お寿司屋A(店名)</h6>
          <h6>お寿司屋B(店名)</h6>
          <h6>お寿司屋C(店名)</h6>
        <h5>100円以外</h5>
          <h6>お寿司屋D(店名)</h6>
          <h6>お寿司屋E(店名)</h6>
          <h6>お寿司屋F(店名)</h6>
      <h4>まわってないお寿司</h4>
        ・・・省略・・・
    <h3>うどん</h3>
      <h4>セルフうどん</h4>
        ・・・省略・・・
      <h4>セルフ以外</h4>
        ・・・省略・・・
  <h2>洋食</h2>
    ・・・省略・・・
  <h2>中華</h2>
    ・・・省略・・・

わかりにくいかもしれませんがこんな感じです。なので、見出しの数字は階層の深さを表します。そして、<h2>の次に、いきなり<h4>などといった、番号が飛ぶこともありません。

つまり例え視覚的に見出しがなくて情報が伝わる場合でも、章や項など話題が変わる場合は見出しをつける方がふさわしいです。視覚的に文字サイズなどの表示を変更したい場合はCSS(WEBサイトの視覚的表現を行なう言語)を使って下さい。

属性

h1要素からh6要素は、以前紹介したグローバル属性を付けることができます。

<h1 id="page-title">このページのタイトルと同等レベルの見出し</h1>
<h2 class="headline">このページのトピックのひとつ</p>

もし、「属性って何?」
という感じでしたら、先にそちらを御覧ください。

HTML入門#2

【HTML入門】HTMLの属性ってなに?属性の役割と書き方

なお、p要素と同様で昔は上記のグローバル属性以外に「align属性(アライン属性)」という属性を用いて、文章を中央揃えにしたり、右揃えにしたりしていました。

<h1 align="center">align="center"は中央揃え。</p>
<h2 align="right">align="right"は右揃え。</p>

See the Pen ZOzWYo by Qlio (@qlio) on CodePen.23853

ですが、HTML4.01からは「非推奨属性」、HTML5からは「廃止」になっています。

HTMLはあくまで、「文書構造」を記す言語です。目の見えない方や機械にとって、「文章が中央揃えであるか」、「右揃えであるか」、という事は重要ではありません。このような視覚的な表現は全てCSS(WEBサイトの視覚的表現を行なう言語)で行うことが推奨されています。

【演習】見出し要素を使ってみよう!

では、前回のHTMLみ見出しを付けていきましょう。

完成イメージ

See the Pen RRbomV by Qlio (@qlio) on CodePen.23853

index.htmlの編集

  1. 前回作った「index.html」をテキストエディタを開いて下さい。

  2. body要素の開始タグ(<body> )の直後に以下の文章を入力して下さい。(下記の文章をコピーでも可)

    サンプルカフェ
    大阪府豊中市にある架空のカフェ
    
    こだわり
    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>サンプルカフェ</title>
    </head>
    <body>
    サンプルカフェ
    大阪府豊中市にある架空のカフェ
    
    こだわり
    <p>サンプルカフェは、大阪府豊中市にある架空のカフェです。厳選されたとっても美味しいコーヒー豆をのみを焙煎しご提供しています。お客様に「最高のコーヒーをゆったりと楽しんで頂きたい」そんな想いがたっぷり詰まったカフェです。</p>
    </body>
    </html>
  3. 入力した文字列「サンプルカフェ」を見出し1(<h1>)に、文字列「大阪府豊中市にある架空のカフェ」を段落<p>)に、文字列「こだわり」を見出し2(<h2>)にしましょう。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>サンプルカフェ</title>
    </head>
    <body>
    <h1>サンプルカフェ</h1>
    <p>大阪府豊中市にある架空のカフェ</p>
    
    <h2>こだわり</h2>
    <p>サンプルカフェは、大阪府豊中市にある架空のカフェです。厳選されたとっても美味しいコーヒー豆をのみを焙煎しご提供しています。お客様に「最高のコーヒーをゆったりと楽しんで頂けきたい」そんな想いがたっぷり詰まったカフェです。</p>
    </body>
    </html>
  4. 上書き保存し、ブラウザで確認(ファイルをダブルクリック)

See the Pen RRbomV by Qlio (@qlio) on CodePen.23853

上記のようになっていればOKです。
よく、<h1>の下のサブタイトル的な文章を<h2>とマークアップ(タグ付け)する方を見ますが、僕は、サブタイトルは見出しではないかなぁと思うので<p>でマークアップ(タグ付け)します。

まとめ

見出し要素は、<h1></h6>の6段階を適切に使いわけて指定します。

  • 見出し要素は、階層構造(アウトライン)を意識する
  • <h1></h6>は順番は守る
  • 見出し要素は、文字サイズを変える目的では使用しない

上記の事に注意して、正しいマークアップ(タグ付け)を心がけて下さい。

次回は、p要素や見出し要素よりは使用頻度は低い、テキスト関連のブロックレベル要素を学習しましょう。

HTML#08

【HTML入門】blockquote要素、pre要素、div要素の使い方