HTML5で覚えておきたい！セクションマークアップの要点とは

2016年11月12日

HTML5で新しく追加されたタグの一つ、「section要素」。
「人間にとってもコンピュータにとっても内容を理解しやすい文書構造を作ろう」というセマンティックWebの考え方に基づいて登場しました。そのsection要素を使ったマークアップの考え方を把握することが、HTML5の正しい理解につながります。

今日は、そんなsection要素を活用する「セクションマークアップ」の考え方についてご紹介します。

セクションとは

セクションとは、章や節、項など、文書全体の中の一部のまとまりやカタマリのことを指します。セクションは、見出しと本文というように、階層構造で成り立つ領域になっています。新聞や雑誌をイメージするとわかりやすいでしょう。セクションがなければ、いくら有益な情報が載っていたとしても、読みづらく、わかりづらい文書になってしまいます。
たとえば、Webサイトを開いた時に、いきなり次のような文章が長々と続いて表示されいたら、どう思うでしょうか。

いづれの御時にか。女御、更衣あまたさぶらひ給ひけるなかに、いとやんごとなき際にはあらぬがすぐれて時めき給ふありけり。

がんばって読み進めなければ、何の情報が載っているのか分かりませんね。しかし、最初に大きな文字で「源氏物語を読む」とタイトルが表示されていればどうでしょうか。
読み進めなくとも、「『源氏物語』のサイトなんだな」と理解できます。さらにその下に「桐壷」と見出しがあれば、桐壷の章の冒頭であることが分かります。さらに「原文」と書いてあれば、ここから原文が書いてあるんだと理解できます。

「セクショニング」と「アウトライン」

HTML5登場以前は、見出しタグによって、見出しと本文を分け、階層を持たせていました。しかし、それでは文章の内容としてどこからどこまでが一つのセクションなのか、明確ではありません。
そこでHTML5では、<section>というタグを項の最初と最後に配置することで、セクションを定義することができます。このように文書構造を明確にすることを「セクショニング」と言います。セクショニングされたコンテンツ構造を「アウトライン（階層構造）」と言います。

セクショニングばなぜ必要か

文章を正しくセクショニングすることは、「この文章が何について書かれたものなのか」を検索エンジンに正しく伝え、検索結果に反映することにつながります。検索エンジンが利用者のニーズにより正確に応えられるようになり、文章を書いた者にとっては、本当に情報が必要な人に読んでもらえるようになります。

section要素の使い方

section要素は文章の論理構造を表す目的で使用します。
従来は、文章の部分をdiv要素でまとめていた方も多いかと思いますが、章や節といった単位でsection要素で囲んであげる必要があります。使用例は下記を参考にしてください。

『源氏物語』を読む

このページでは、源氏物語の原文と現代語訳を交互にご紹介します。

桐壷

「いづれの御時にか」原文

いづれの御時にか。女御、更衣あまたさぶらひ給ひけるなかに、いとやんごとなき際にはあらぬがすぐれて時めき給ふありけり。...

「いづれの御時にか」現代語訳

いつの天皇の御代だったか、女御や更衣というお妃たちが大勢お仕えなさっている中に、それほど高貴な身分ではない方で、ものすごく帝のご寵愛を受けていらっしゃる女性がいました。...

見出しタグの使い方

サイトのタイトルは必ずh1要素を使用するものですが、それ以降の見出しに関して、hタグの後ろの数字のランクの扱い方はどうすればいのでしょうか？
すべてh1要素を使用するやり方と、ネストに合わせてランク付けしていくやり方が考えられます。従来はネストに合わせてh1,h2,h3...と順番につけていくのが一般的でしたが、HTML5では、すべての見出しをh1要素で記述するという書き方で紹介されています。

ただし、今の検索エンジンでは、h1の多用をスパムととらえる傾向がありますので、従来通りネストに合わせたランク付けで見出しタグを使用する方が安心でしょう。