Web Survive

Webで生きる道を模索するブログ

本文を構成する要素

HTML5からブロックレベル要素やインライン要素の概念が廃止

HTML5では、これまでのHTML4などにあった
インライン要素やブロックレベル要素という概念が廃止されました。

body要素(ページの本文)内を構成するものには、
大きく分けて「ブロックレベル要素」と「インライン要素」の2種類があり、
インライン要素でテキストなどに部分的な意味を与えてきましたが、
HTML5はセマンティックなマークアップを行うことを目的としており、
これらのインライン要素やブロックレベル要素という考え方は
特に意味付けに関与しておらず、
レイアウトに関しての決まりだったため廃止されました。
代わりに「カテゴリ」 と 「コンテンツモデル」 の概念が
HTML5から導入されました。

7つのカテゴリが定義され、
大半の要素は、ひとつまたは複数のカテゴリに分類されます。
どのカテゴリにも属さない要素もあります。
要素毎に、自分がどんなカテゴリや要素の子になれるか、
自分がどんなカテゴリや要素の子を持てるかが決まっています。
今後はカテゴリとコンテンツモデルを覚えていけば大丈夫ですが、
基本的なインライン要素とブロックレベル要素の役割を頭にいれておくことで
難しいコンテンツモデルの概念を覚える際に役立つと思っています。

ブロックレベル要素とインライン要素

html-body-block-inline

ブロックレベル要素

ブロックレベル要素とは「ひとつの独立したまとまり」という意味で、
見出し(h1〜h6要素)、段落(p要素)、リスト(ul、ol、dl要素)、
表(table要素)、フォーム(form要素)などがあります。
文字どおり、コンテンツのブロック(かたまり)を定義するための要素です。

インライン要素

一方、インライン要素は「行内の一部」という意味で、アンカー(a要素)、
画像(img要素)、強調(em、strong要素)などがあります。

以前は「テキストレベル要素」と呼ばれていたとおり、
ブロックレベル要素のなかで一部のテキストに役割を与えたり、
内容を埋め込むための要素です。

コンテンツ・モデル

コンテンツ・モデルとは、各要素に内包できる要素の定義のことをいいます。
要素の中に入れられる要素は何?というルールですね。
HTML4 では、インライン要素の中にはブロック要素は入れられないという
ルールがありましたが、
HTML5 ではインライン要素・ブロック要素はなくなったので、
コンテンツ・モデルを意識してマークアップ(コーディング)する必要があります。

空要素

多くの要素では開始タグと終了タグで内容を囲みますが、
テキストなどの内容をもたない要素があります。
このような要素を「空要素」といいます。

すでに解説した、head要素内に含めるmeta要素やlink要素も空要素です。
body要素内に含める要素としては、水平線(hr要素)、改行(br要素)、
画像(img要素)、フォームパーツ(input要素)などがあります。

このように、空要素には
「単にそこに埋め込むだけ」という役割をもったものが該当します。
「ここからここまでのテキストが見出し」と示す要素ではなく、
「ここに水平線を埋め込む」「ここに画像を埋め込む」という
ピンポイントな要素なのです。

空要素は終了タグを簡易終了タグとして開始タグ内に記述するために
<hr />(要素名のあとに半角スペースとスラッシュをつける)という形式で記述します。

通常の要素と空要素の書き方の違い

html-body-empty-element

div要素とID・クラス

ページ内のコンテンツは、ヘッダー、ナビゲーション、メイン部分、サイド部分、
フッターなどおおまかな範囲に分かれるのが普通です。
このような範囲を示すためにdiv要素を利用します
(divは「区間」や「部門」を意味する「division」の略)。
div要素に「ID」を振り、「ここはこういう範囲」ということを具体的に示します。
ページ内で複数出現する範囲については「クラス」を割り振ります。

このように、IDとクラスは
「ページ内でひとつだけなのか、複数出現できるのか」という違いがあります。

通常のWebサイト制作では、
ページを実際につくりはじめる前に「ワイヤーフレーム」といわれる
ページ構成図(ページをどの部分に何を配置するか、という見取り図)や、
「デザインカンプ」というデザイン図案を作成しておきます。
div要素で定義する範囲は、
ワイヤーフレームやデザインカンプをもとに決めるのが一般的です。

html-body-wireframe

ワイヤーフレーム

ここでは、ワイヤーフレームが
レイアウトの素案として使われるとを示しています。
ワイヤーフレームは、その情報構造において、
要素がどう扱われるかを示すもので
レイアウトに依存しないという考え方もあります。

なお、IDとクラス(id属性とclass属性)で利用できる文字は、
アルファベット(a〜zとA〜Z)、数字(0〜9)、ハイフン(-)、
アンダースコア(_)、ピリオド(.)です。
必ずアルファベットではじめる必要があり、
例でいうと、「id=”001″」と指定することはできず、
「id=”a001″」などと指定する必要があります。

実務的には、このような通し番号的なIDやクラスは使わず、
きちんとそのコンテンツの役割にもとづいた値をつけます。
例でいうと、お問い合わせやサイトマップなど
ユーザーの利便性を向上させるためのリンクリストには「id=”utilty”」、
注意分という意味の要素が複数あれば「class=”note”」といった値を指定します。

望ましくないID・クラス名

あまりよくないのは、
注意文を赤字にするからといって
「class=”red”」と指定したり、
ページの中で2番目に出てくるリストだからといって
「id=”list02″」と指定することです。
注意文をあとで、他の色にすることもあるでしょうし、
リストの順番を変更するかもしれないからです。
つまり、見た目で決めるのではなく、
「そのコンテンツならでは」のIDやクラスをつけるのが、
メンテナンス性を確保するコツなのです。

このような「意味」を考えたマークアップを「セマンティック」と表現します。
よく「セマンティックなマークアップを心がけよう」
といった言い回しが使われますが、
要素選びやID・クラスづけなどざまざまな場面で
意味を考えたマークアップが求められます。

これらの名前付けはCSS設計に大きく影響してきますので
名前をつける前に「意味」をよく考えてみましょう。