見出し

第二章ではフレージング・コンテンツを主に紹介してきましたが、第三章ではもっと大きい枠組みでHTMLの構造をとらえます。

HTMLの構造を表すものとして、文章を書くで紹介したp要素がありました。これは、フレージング・コンテンツではなく、「段落」というもっと大きい単位の要素（昔のHTMLではブロックレベル要素と呼ばれていました）です。

そこで、今回紹介するのが見出しです。

見出しとは

それで、見出しとはなにかというと、文章や節の内容を短くまとめて題名のようにしたものです。このページにもあります。

上の「見出し」や、すぐ上の「見出しとは」がそうです。つまり、この「見出しとは」という見出しから下の文章で、見出しとは何かということを説明している、ということを表しているのです。

それでは、見出しの作り方ですが、h1要素～h6要素の6種類あります。h1が最も大きい見出しで、h6が小さい見出しです。

h1～h6要素の子はフレージング・コンテンツです。この要素自体はそうではないので、p要素中など文中に紛れ込ませることができません。p要素などと同様に並べます。つまり、次のようにします。

<h1>見出し1</h1>
<p>文章</p>
<h2>見出し1-1</h2>
<p>文章</p>
<h2>見出し1-2</h2>
<h1>見出し2</h1>
<p>文章</p>

この例では、一番大きいh1と次に大きいh2を使っています。この例が表していることは、まずh1の見出しが2箇所にあるので、「見出し1」と「見出し2」の2つに全体が分けられているということになります。

「見出し2」の配下には段落があるだけですが、「見出し1」の配下にはさらにh2の見出しがあります。

「見出し1」の配下にも段落があり、さらに「見出し1-1」と「見出し1-2」があり、それぞれの配下に段落があります。

これはHTML要素の入れ子構造に似ています。全体に「見出し1」と「見出し2」があり、「見出し1」の中にはさらに「見出し1-1」と「見出し1-2」があるのです。

文章には、見出しは非常に大切です。積極的に見出しを付けていきましょう。

HTML4においては、見出しはただそこにあるだけだったのですが、HTML5になるとさらに大きな意味を持つようになりました。それは次回解説します。

hr要素

これだけでは短いので、もうひとつhr要素を紹介します。このhr要素は空要素で、「テーマの変わり目」を表すところに配置します。つまり、いくつか段落が並んでいる中で、「ここまでとここからでは話が多少違う」というような区切りの位置にこのhr要素を配置します。つまり、こんな感じです。

<p>時計を眺めながらふとんの中で過ごしていた。もう11時になった。</p>
<hr>
<p>ところで、今日の昼食は何にしようか、と思いつつ・・・（略）</p>

このように、話題の区切れ目に使います。また、さっきの見出しとの兼ね合いですが、当然異なる見出しに属する文章は異なるテーマなので、テーマの違いは見出しによっても表せています。

hr要素によるテーマの区切りは、見出しによるものよりは弱いです。つまり、同じ見出しに属するという点で大まかなテーマは同じですが、その中で話題の句切れがある場合などに使えます。また、小説など、そもそも見出しがあまりない文章でも使えます。