HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。
HTML5での変化
コンテンツに則した素直な形でマークアップできること。
HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化はHTML 4.01では制作者やブラウザーによる拡大解釈なしでは成し得なかったセマンティクスを、HTML文書が素直なマークアップのみで手に入れることができるということを意味する。
しかしコンテンツに則した素直なマークアップが制作者達にも素直に受け入れられるものかというと必ずしもそうではない。
そういった仕様の目指すものと制作者のイメージとのギャップを埋めるために仕様には豊富な例示が用意されている。それらにより「こうならばこう」という指針が定められることとなり、こと一般的な文章においてはどのようにマークアップされると適切なのかは確定したと言って良いだろう。
一部、小見出しやblockquote要素の引用元など、仕様に関わる人々の間でも一致をみないものはある。それでもHTML5仕様そのものにおいてはマークアップの仕方が明示されているので、それに従うのみで良く、大きな問題ではないはずだ。
これら豊富な例示をよく見ることがマークアップするための第一歩と言って良い。
著作権表示のマークアップ
例えば著作権情報の表示をマークアップすることを考えてみよう。ウェブサイトによくあるCopyright云々というあれだ。日本では特に必要とされることはないが、色々入り混じる部分なのでこれを取り上げる。典型的な文言は以下のようなものだろう。
Copyright © 2014 W3C ®, All Rights Reserved.
古くはaddressing copyright informationなどという体でaddress要素を使ってマークアップされているウェブページはよく見た。今もかなりあるが、そういうウェブページでは以下のようなHTMLコードになっている。
<div class="footer">
...
<address>Copyright © 2014 W3C ®, All Rights Reserved.</address>
</div>
HTML5ではaddress要素は連絡先を表す要素であるとはっきりと書かれるようになった。直接は言及されていないが、最終更新日時の例のように著作権表示にも使うべきではないと言っていると考えて良いだろう。この項の最後の例にあるようにp要素とsmall要素を組み合わせてマークアップする。またUTF-8で書いているなら文字参照はもう必要ないだろう。
<footer>
...
<p><small>Copyright © 2014 W3C ®, All Rights Reserved.</small></p>
</footer>
仕様及びその例示からすると、まずはこれが適切なマークアップと考えられる。
small要素
HTML 4.01ではsmall要素は単に小さい文字で表示するための要素であったが、HTML5では小さく書かれることが多い補足的な文字列(small print)を表す要素と改められた。典型的な使われ方は以下のようなものだ。
<p>たまご 1パック 100円
<small>ただし、お一人様につき1パックまで</small></p>
主となるコンテンツであるところの安売りの値段があった上で、その補足的な文であるところの購入数の制限をsmall要素でマークアップすることになる。仕様ではsmall要素は他に注意書きや法に基づく表示義務に加え、著作権表示にも使うことが出来るとされている。既に挙げた著作権表示のマークアップは、small要素の観点からも適切だと言えるだろう。
footer要素とsmall要素
footer要素には多くの場合、著作権表示以外にも様々な情報が格納される。制作者の連絡先であったり、文書の公開日時であったりだ。footer要素そのものにより、その中身が配置されたセクションの様々な情報であることを表すことができる。要素の用途としてはsmall要素と似ているところがあると言って良いだろう。
両者を組み合わせることはできるが、かと言ってfooter要素の中身はすべてsmall要素でマークアップするべきかというとそうではない。その中で補足的なものに限られるべきだろう。つまり主たる何かがあってこその補足であり、small要素であるということだ。既に挙げたマークアップ例では...に何か他のfooter要素にふさわしいコンテンツがあると考えると、それらが主であり、著作権情報が補足とすれば適切なマークアップと言える。
だが仮にfooter要素に著作権表示しかないとすると、small要素を使わない方がより適切になるだろう。
<footer>
<p>Copyright © 2014 W3C ®, All Rights Reserved.</p>
</footer>
併用するのはいかにも冗長であるから、と言うことではなく、small要素足る条件を満たしていないと考えられるから、だ。
p要素とdiv要素
さて、このような著作権表示の場合、p要素を使って段落とする必要があるのかという疑問があるだろう。なんとか文ではあるが、段落と呼べるようなものではないので、汎用要素であるdiv要素の方が適切と考えても不思議ではない。この辺りのことは日本語における意味段落と形式段落の違いや、英語におけるparagraphとの違いも相まって、古くから議論の尽きない問題だった。字下げして違和感があるかどうか
という考え方は妥当な結論だったように思う。
HTML5では仕様においてこのparagraphというものが触れられるようになった。簡単に言うと単に特定の話題に関する一連の文(意味段落)やタイポグラフィー都合上の文のまとまり(形式段落)というだけではなく、何かをひとまとまりしたものであっても良いとされている。p要素はこのparagraphを表すものであるので、例えばlabel要素とinput要素など、何かをひとまとめにしたい場合はp要素が適切な要素ということになる。
すなわちp要素が子に持てる要素達(phrasing content)をまとめるための汎用的な要素として機能するようになったので、div要素はp要素が子に持てないような要素を含めてひとまとめにしたい時に使うものとなった、とも考えられる。つまり著作権表示において、div要素を使うことは間違いではないが、p要素の方が適切であることは疑いないと言って良いだろう。
footer要素とp要素
それではfooter要素に著作権表示のみならばp要素は必要なのだろうか。まとめる必要性はかなり薄いと考えられる上、paragraphの定義において、わざわざマークアップせずとも暗黙にparagraphとみなされるであろうことが触れられている。つまり特に必要のないp要素で、これは単に冗長なマークアップと言えるだろう。
<footer>Copyright © 2014 W3C ®, All Rights Reserved.</footer>
footer要素に著作権表示のみならば、こうマークアップするのが最も適切であると結論できる。
スタイリングとの兼ね合い
だが僕たちはCSSで文書の体裁を整える必要がある。その場合にfooter要素直下に直接文字列がくるのはなんとも都合が悪い。ともするとsmall要素が著作権情報の表示に使えると仕様で触れられていることを意識して、こうマークアップしてしまうかもしれない。
<footer>
<small>Copyright © 2014 W3C ®, All Rights Reserved.</small>
</footer>
しかしこれは既に論じたようにsmall要素足る条件を満たしていないので、間違いと言って良い。激しく非難するのなら似非セマンティクスと呼んでも良いだろう。ちょうど昔のTwitter Bootstrapがアイコンの表示に空のi要素をidentifierだからと使っていたことに似ている。
これらが大きく間違っていることは表層的な意味で要素を割り当てただけであって、文書の一部としてマークアップすることを考えていないところだ。identifierであるとしてi要素を採用するなら、空ではなくidentifier足る何かがその子に必要だろう。またsmall printとして著作権情報を表示するためsmall要素を採用するなら、small printとなりうるための主たる何かが必要である、ということだ。
small要素で括ることは間違いだが、その一方でp要素でマークアップすることについては冗長であるとは言えるが、間違いではない。スタイリング都合のためなので、合わせて適当な値をclass属性に設定してやる必要もきっとあることだろう。
<footer>
<p class="copyright">Copyright © 2014 W3C ®, All Rights Reserved.</p>
</footer>
マークアップの適切さにおいては一歩譲るが、これはこれで適切さと保守性、拡張性のバランスがとれた良いマークアップと言える。スタイリングへの意識を欠かすことはできない現在においてはより実践的である、とも言えるだろう。
マークアップするということ
ここまで著作権表示を例にして適切なマークアップの模索について書いてきた。
このように同じ文言であったとしてもその使われる文脈で適切なマークアップは変化するであろうし、HTMLではない周辺技術との兼ね合いを考えると更にまた違うものにもなりうる。しかし基本となるマークアップは常に仕様に従って決定できる。そこから文脈や周辺技術との兼ね合いを考慮して時に要素や属性を削り、時に要素や属性を加えていくこと、それが“マークアップ”するということだ。
もちろんコンテンツがどのようなものかをよく考えて適切な要素を選択することは重要だ。だが、それだけではマークアップの半分でしかない。そこから更に思考し要素や属性を取捨選択していく、そこまでやってようやくマークアップだ、と言える。
HTML5仕様では単なる語彙の変更や要素の追加だけではなく、非英語圏も視野に入れ、用語に至るまで様々な点で標準化がなされている。p要素の表すparagraphはそのもっとも顕著なもののひとつと言えるだろう。こういった仕様の変化は、単に文書の一部分をその意味を示唆する目印としてHTMLタグで括っていくのではなく、文書の一部としてここまで述べたような意味で“マークアップ”していくように変化することを促している。
単純な保守性や拡張性を担保するにはもっと良いやり方もあるだろう。それこそdivとspan要素のみですべて賄われたHTMLのようなもので制作されたウェブサイトでも十二分に機能する上、同時に異常な開発スピードをもたらす。しかしそういったHTMLのようなものが失ったものは多く、そしてこれから大きくフォーカスが当てられる部分はまさにそこだと多くの人が考えているはずだ。