文書構造と見栄えを切り離し論理マークアップを行うということは、単にCSSを使ってレイアウトや装飾を行うというだけに留まらず、見た目にとらわれないマークアップが重要なのではないかと思ったり。
日常的にCSSを無効にしてブラウジングしている、なんて人もそんなにいないだろうけど、Operaのスモールスクリーンレンダリング(京ぽんとか)ではmedia allのCSSは適用されないし、w3mやlynxといったテキストブラウザを頻繁に利用する人は少なくないと思う。
そんな特殊な状況下でなくとも、もっと身近な例。
blog等のRSSをアグリゲータで読む場合なんてのは、当然スタイルシートが適用されていない本文だけが表示されるし、もしそのRSSがcontentモジュールを利用して全文配信していれば、わざわざそのサイトへ足を運ばないでしょう。
そんな場合いくらp要素へclassセレクタを使って文字に色々装飾したとしても、それは読者に伝わらない。文字をデカくしたりカラフルにしたり、という事ではなくて、p要素に別の意味を持たせようとしても、それはどうやってもp要素以外になり得ない、という事。
分かっていれば大したことじゃないんだけど、CSSを覚えたての時はよくやるミス(オレもそうだった)なのでまとめておきます。一応blogの本文を書く時、という状況でのマークアップを想定してみる。
//blogツールによっては本文中に使えないタグがあるとか、wikiみたいに独自の記法だったりとか、そーいう場合もあるかもしれないけど、そのへんは考慮してない。
//あとstyle属性は無視。あれあんまり好きじゃない。物理マークアップするのと大差ないし。
小見出しはh要素
そのページの大見出しとなるページタイトルは、通常h1要素でマークアップされ、小見出しに関してはh2からh6を用いるのが一般的。
blogなどでは、エントリのタイトルがh2要素でマークアップされている事が多いのではないでしょうか？
で、そのエントリ内で見出しを付ける場合。
本文内だからってテキトーな要素にテキトーな装飾したりしないで、これもやっぱりh要素でマークアップすべきでしょう。そうすればRSSアグリゲータなどで見た時に、そこが小見出しであることが丸分かり。これだけで格段に読みやすくなります。
引用マークアップ
引用してリンクして、言及してトラックバックを飛ばす。という状況が多いblogでは、引用のマークアップは比較的使用頻度が高いのではないでしょうか。
また引用する際は引用元の明示が不可欠なので、少々面倒でも引用のマークアップはしっかりと行いたいものです。
長い文章の引用はブロックレベルのblockquoteを使う。基本形はこんな感じ。
<blockquote cite="http://" title="ページタイトル">
<p>引用した文章</p>
<p>
<cite>
<a href="http://">ページタイトル</a>
</cite>
</p>
</blockquote>
blockquote要素のcite属性とtitle属性は、あればなお良い、というくらいのものでしょうか。引用元へのリンクはcite要素でblockquote要素内に記述していますが、これはblockquote要素の外に書いても問題ありません。
なお、blockquote要素で記述すると、多くのブラウザではインデントが設定されて表示しますが、インデント目的でblockquote要素を使うべきではありません。
短い引用はインラインのq要素で
<q cite="http://" title="ページタイトル">引用文</q>
こんな感じでお手軽に。
q要素でマークアップされた部分は、多くのブラウザではダブルクォーテーションに囲まれて表示されます。まれに対応していないブラウザもありますが。
斜体、太字など
文字に'斜体|太字|下線|打ち消し線'などの装飾を行う要素はありません。
しかし、以下のような要素を利用する事が出来ます。
- em要素は強調を意味します。多くのブラウザでは斜体で表示されるようです。
- strong要素は、より強い強調を意味します。多くのブラウザでは太字で表示されます。
- del要素は削除文を意味します。間違った記述を削除する際に利用します。多くのブラウザでは
打ち消し線を伴って表示されます。 - ins要素は追加文を意味します。訂正した新しいテキストを追加する際に利用します。多くのブラウザでは下線を伴って表示されます。
物理要素であるs要素やb要素が廃止されたのに、何故emやstrongは許されるのだろう、と。そんなふうに思っていたのですが、要素そのものに斜体や太字といった物理的な意味があるs要素やb要素と違い、emやstrongはそれ自体には強調という意味が与えられているだけ。そう考えると納得出来ます。
ところで、削除文を意味し多くのブラウザでは打ち消し線を伴って表示されるdel要素ですが、これを削除文でもないのにただネタとして利用するのは問題ではないでしょうか。それと便座カバー。
……こんなカンジに。
こういった場合は、その要素の意味にそぐわないので、むしろspan要素をclassセレクタで装飾した方が良いような気がするのですが。
//いや、ネタの時は打ち消し線じゃなくて^h^h^hとかやるか。
//strike要素も廃止されてるので使わない方向で。
リストマークアップしよう
こんな書き方は如何なものか。
<p>
1.trackbackに報告は必要？<br />
2.初めてのコメントに挨拶は？<br />
3.trackback spamへの対処
</p>
リストならばul要素や、番号付きのol要素を用いてリストマークアップするべき。
<ol>
<li>trackbackに報告は必要？</li>
<li>初めてのコメントに挨拶は？</li>
<li>trackback spamへの対処</li>
</ol>
ol要素はli要素以外を含むことが出来ないけれども、li要素内には別の要素を含ませる事が出来る。
<ol>
<li>trackbackに報告は必要？
<p>trackbackを送信するという行為そのものが、相手に「リンク、言及を行った」と通知する事になるので報告は不要と考えています。</p>
</li>
<li>初めてのコメントに挨拶は？
<p>そーいえば最近「はじめまして」なんて書いたこと無いなぁ。</p>
</li>
<li>trackback spamへの対処
<p>言及リンクの行われていないtrackbackに関しては、spamと判断し連絡なしに削除することがあります。</p>
</li>
</ol>
ただ、こーいう場合はむしろ定義型リストマークアップにした方がすっきりするかも。連番付かないけど。
<dl>
<dt>definition term</dt>
<dd>definition description</dd>
</dl>
と、いうことで
私が日記本文中によく使うマークアップをまとめてみました。
本格的な(x)htmlの解説には遠く及びませんが、日常的なマークアップ作業ではとりあえずこれだけ知っていれば困らないのではないでしょうか。
webにhtmlを公開するときは、validatorやlintでチェックするのも大事ですが、色々な状況を想定して表示確認する事も重要だと思います。そして、その手間を可能な限り減らす為には、標準的で適切なマークアップをすること、なんじゃないのかなぁ。
//CSSでの見た目にとらわれないhtmlを、というテーマだったけど書きかけて飽きたから途中でごっちゃになってる。