Another HTML-lint gatewayでこのサイトのHTML文書の文法をチェックしてみました。
サイトを作り直すたびにチェックしてたりしますが、このチェック、結構皆さんやってみたことあるんじゃないでしょうか？
そして1回は100点を目指してみる、と（笑）
MovableTypeっていうのは、HTMLの文法的にも結構配慮した作りをしてまして、なんにも考えずに作ってても、最初からそれなりに高い点が取れます。
修飾的な要素は基本的に大部分スタイルシートで持っていて、HTMLもデフォルトのものはDOCTYPEなんかもしっかり宣言されていて、普通に手でソースをいじっていたり、エディターを使って作っていると見逃されがちなものも始めからしっかり準備されています。
で、<IMG>タグを<img />に直したり、scriptタグにtype属性を追加したり、
<meta http-equiv="Content-Script-Type" content="text/javascript" />
を追加したりして97点までは行きました。
これ以上はあんまり意味なさげので...。
しかし、このサイト、XHTML1.0 Transitional として判定されている（細かい意味は気にしないでください）のですが、必須とされたxml宣言（<?xml version="1.0" encoding="UTF-8"?>）を頭に組み込むと、 文字の大きさが変わってしまいます。
 変更前 |  変更後 |
文字が大きくなって読みやすくなるのは悪くないですが、幅に収まらなくなるのはあまり格好のいいものではありません。
文書の最初にxmlという文字を入れているから普通のHTMLとは別の基準でレンダリングされるんだろうか？ ともかく、原因がわからないので、外してみました。
おかげで86点まで落ちましたが、まぁ十分でしょう。
※後日またつけました。
ところで、以前HTMLArea3.0-RC1というMTのエントリー画面にHTMLエディター機能を付加するCGIを入れようかと考えていたけれど、どうも多機能ながらちょっと機能が多すぎる気もする、ということで、
今回作ったボタンは、MX 2004になって新しくDreamweaverに追加された「挿入」バーの「テキスト」というカテゴリーのボタン類をモデルにしています。ここには、<strong>、<em>、<h1>、<h2>、<h3>、<blockquote>、<pre>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>などのタグを挿入するボタンが並んでいます。いずれもCSS的というかSEO的というか、装飾タグではなくて意味を表す「論理タグ」となっています。この辺のタグが今後重要になるよ、というMacromediaの判断でもあると思うのですが、これらのタグをエントリー本文内でどんどん使えば、よりMovable Typeの利点を生かせると思います。
こちらのタグ挿入ボタンを使わせてもらうことにしました。
引用中にもあるように、全て「論理タグ」というのがいいではないですか。
Another HTML-lint gatewayでの文法チェックでも、装飾タグは論理タグに置き換えるように警告が出ます。
装飾タグと論理タグの違いは、例えば「ボールド（<b>）」と「強調（<strong>）」の違いで、装飾タグが単に太字にしているだけなのに対し、論理タグでは強調したいんだよという意図をもって、結果的に太字にしているという違いになります。
極端な話、太字にするのが強調ではないという文化圏（があったとしたら）に住む人が、その文化圏用のブラウザでそのページを見るときは、<strong>タグは強調として感じられるような、（太字ではない別の）適切な形にレンダリングされて表示されるでしょう。
あと、小さなことですが、URLをリンクするとき、このサイトではたいがいの場合、新しくウィンドウを開くようにしています。で、タグの編集ボタンでリンクを貼ったときにデフォルトでtarget要素が追加されるように tmpl/cms/edit_entry.tmpl の123行～130行あたりの
123: function insertLink () {
124: if (!document.selection) return;
125: var str = document.selection.createRange().text;
126: if (!str) return;
127: var my_link = prompt('<MT_TRANS phrase="Enter URL:">', 'http://');
128: if (my_link != null)
129: document.selection.createRange().text = '<a href="' + my_link + '">' + str + '</a>';
130: }
129行目に以下のように追加しました。
129: document.selection.createRange().text = '<a href="' + my_link + '" target="_blank">' + str + '</a>';
というような形でまずは内部的なものを直しました。
あとは画像をアップロードしたときにalign要素をつけることかな？（左側へ文を回り込ませることが多いので）
で、このサイト、過去の記事を探すのが大変なのは自覚しています（自分で見たいページを探すのですら大変）。
それも何とかしたいなぁと検討中です。
