XHTMLをちゃんとする 2 - 記事のマークアップ

blogだろうがそれ以外だろうが、記事中だろうがテンプレだろうが「正しくマークアップする」という観点から見れば「記事を書くときに」という条件設定をするのはおかしい。おかしいんだけど、私の場合は「記事を書く時にも（なるべく）正しくマークアップする」なんて意識を持つまでに結構時間がかかりました。

現在、正しいマークアップをしてるかと言うと、かなり怪しいんですが、Webデザインに強い人のソースを暇な時に見るようにして、blogを始めた3年前よりは随分マシになった私が記事中で使うようになったHTML要素タイプ。

h2,h3,h4

　見出し

p

段落

br

改行

em

強調

strong

さらに強調

この辺りは別に書くほどのものでもないですが。h2が入ってるのは個別記事でタイトルにh1を割り当ててるため。この辺の事情で、h2が文中に出現する時は<続きを読む＞以下に文章を書かざるおえない。（面倒で無視してるのもあるけど）

abbr

省略後

acronym

頭字語

HTML とかCSS、SBMとか。
日本語だと気を使ってないかも。はてブとか。

<abbr title="Hypertext Markup Language">HTML</abbr>

ins

追加

del

削除

datetimeで追加（削除）日時を指定。

<ins datetime="2007-02-28T21:52+09:00">追加の文章</ins>
<del datetime="2007-02-28T21:52+09:00">削除対象の文章</del>

ul

箇条書きリスト

子要素はli

2年近く前。list-style-image なんてプロパティがあるのを知らず、imgで画像呼び出して、リスト項目の頭に画像を表示してました。今となっては恥ずかしい。

ol

番号付きリスト

子要素はli

これも、2年前は ulでマークアップしてるくせに、手書きで数字を割り振ってた。無知って恐ろしい。(似たようなことを1年後にまた言うんだろうなぁ）

dl

定義型リスト

子要素は dt,dd

この記事でも使ってますね。

<dl>
<dt><code>dl</code></dt>
<dd>定義型リスト</dd>
<dd>子要素は <code>dt</code>,<code>dd</code></dd>
</dl>

code

HTML やCSS、JavaScriptなどのコードを書くとき。

2年近く前。<code>list-style-image</code> なんてプロパティがあるのを知らず、

上は文中で使う例、下はそれのソース。ソース書く時は<pre><code>。

<pre><code>2年近く前。<code>list-style-image</code> なんてプロパティがあるのを知らず、</code></pre>

blockquote

引用

cite

引用元

書籍からの引用の場合はcite属性にISBNを指定。

<blockquote cite="urn:isbn:x-xxxx-xxxx-x"><p>引用文</p></blockquote>

q は使わないですね、そう言えば。なんとなく短い文章でも blockquote で囲んじゃう癖が。

引用元の表示は、blockquote内に書くのも変だし、divでblockquoteとciteを括るのも嫌なので、前後の文中でciteで括って 「以下はxxxからの引用です」という感じで明示。

見た目のデザインのセンスは全くないので、せめてマークアップくらいは頑張ろうと思ってるんですが、ちゃんとしようと思うと結構な時間がかかるのはちょっとツライ。