WEBCRE8.jp > 考える > [HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方

[HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方

この記事は約7分ぐらいで読めます

先日人と話していて、今まで自分の考えていたコーディングルールの一つが単なる思い込みであまり意味がないことに気付いたので、書きとめておきます。

はましゅんさんとお会いして

先日、私が尊敬しているweb制作者の一人であるはましゅんさん(@hamashun)にお会いしてHTML5によるコーディングの話をしました。はましゅんさんは現在個人的なブログ運営の他、ASCII.jpで浜俊太朗のHTML5マークアップ移行ガイドというとっても分かりやすく正確にHTML5について教えてくれる連載を持っています。

http://www.hamashun.com/

で、お会いしたときにここぞとばかりに私が気にしているコーディングのしかたなどを聞いてもらったりしたのですが、いくつか気になるコメントをもらえたのでじっくり考えてみました。

今まで考えていた根拠の薄いコーディングルール

私は普段からかなり文書構造に気をつけてコーディングを行っていますが、仕様の中で理解できない部分についてはわりと独自の解釈も用いています。そのひとつに、「入れ子の同じ階層にブロック要素とインライン要素を置かない」というものがありました。

入れ子の同じ階層にブロック要素とインライン要素を置かない

具体的に説明すると、body要素等のブロック要素の直下にdiv要素等が置かれていた場合、それの外側の同じ階層状にspan要素等を置かないという事です。

<body>
<div id="container">
<header id="top">
ヘッダー
</header>
	<article>
	記事
	</article>
<div class="pagetop"><a href="#top">ページトップへ</a></div>
<footer>
フッター
</footer>
</div>
</body>

ページトップへのリンクを置く場合のコーディング

ちょっとしたリンクやアラート等のテキストのオブジェクト等、イレギュラーなインラインのオブジェクトをコンテンツ内に配置する場合等、私は上記のルールに従い一旦divで囲むルールにしていました。正直なところ、このルールには「ブロック要素と同じ階層にインライン要素があると気持ち悪い」程度の根拠しかありませんでした。

HTML5においてブロック要素とインライン要素という概念は廃止されている

が、しかしこれがつまりブロック要素とインライン要素という、HTML5以前まではあったHTMLの概念に縛られた考え方だったんですね。

このことについてはましゅんさんから「なんの根拠があってそういう決まりを設けていますか？」と聞かれ、そこから私自身ブロック要素とインライン要素についてわかっているようで引きずってしまっている考え方でルールを作っていたことに気付きました。

廃止とは言うけど…

廃止とは言っても実際にCSSではdisplay:block;やdisplay:inline;という指定がありますよね。これはどう考えればいいのでしょうか。

このブロック扱い、インライン扱い、という事はあくまでHTML5の要素の定義自体には関係がありません。今までのブロック要素とインライン要素という考え方はレイアウトや見え方、つまりCSSの事を考えるときの扱いの違いのみを指すべきだったのであって、セマンティックな意味を含むものではなかったという事です。

これらにおけるセマンティックな扱いについてはHTML5からはコンテンツのカテゴリーやコンテンツ・モデル等の概念がある程度引き継いでいるので、知りたい人は以下の記事を参考にしてみてください。

[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ – WEBCRE8.jp

インライン、ブロックはCSSのプロパティーの初期値に過ぎない

HTML5にとっては、タグを使ってマークアップされ、レンダリングされる要素の殆どが一様にフロー・コンテンツに属しています。そしてそのうちのフレージング・コンテンツというものは、(スタイルとしては)HTML5でもこれまで使われてきたインライン要素とほぼ同じ扱いです。

ですがそれは単にdisplayプロパティーの初期値がinlineと指定されているというだけのことです。フレージング・コンテンツというカテゴリが決めているのは、あくまでこれが「テキストレベルのコンテンツである」というセマンティックな意味のみなのです。

実際、我々はこれまでもインライン要素をブロックコンテンツとして、またその逆をCSSで指定しています。HTML5のタグは、これらの見た目上のルールをほぼCSSに委ねたと言えると思います。

「ブロックとインラインで良かったのになんでコンテンツ・モデルとか分かりにくくしたんだ、結局CSSでブロックとかやるなら意味なくない？」という疑問をお持ちだった方は、この二つの考え方がスタイル(CSSの役割)とセマンティクス(HTMLの役割)を受け持つ別の用途の概念であることが理解できるかと思います。

ちなみにこの辺の話は、はましゅんさんの記事ではないですがやはり尊敬するHTML5に詳しいHTML5.jpの羽田野さんの以下の記事も詳しいです。こちらはCodeZineの連載ですね。

HTML5で再定義された要素と属性　ここが違う！サンプルで見るHTML5（3）（1/3）：CodeZine