XHTML2終了、HTML5へ一本化

XHTML 2終了、HTML 5一本化: マイコミジャーナル

HTML 4.01の後継となる規約がHTML 5になることが、ほぼ明らかになった。2日(米国時間)、W3CはXHTML2 Working Group Charterが12月31日に期限をむかえても、もはや更新しないことを明かにした。これはW3Cが次世代のHTMLとしてHTML 5を推進していることを明示するとともに、HTML 5の策定作業に割くリソースを増やしたい狙いがある。

HTML 4.01の後継規格としてXHTMLの策定が進められたが、当初期待されていたようには普及しなかった。結局、あとから策定が進められたHTML 5が後継として使われることになった。ただしHTML 5には、XHTML 2で規程されている機能のいくつかは取り込まれている。

最近は勉強不足で、HTML5についてはほぼ無知識状態です。何やらマークアップの仕様レベルでビデオの再生まで規定する、ということぐらいしか知りません。それすら合っているか微妙です。。。

しかしXHTMLが流行らなかったからやめるって。。。W3Cってそんなにいい加減なの？ まー仕様は1つだけあればいいですよ。

何でもXML化するのが世の流行りという中で、HTMLだけは異色の存在となっている現状ですが、これでよりStrictなマークアップ言語になるのでしょうか。だいたいXHTMLが流行らないのはそれ用のソフトウェアが少ないからですよ。

HTMLでは「空要素には閉じタグは不要」とか「属性値をダブルクォーテーションで囲まなくてもよい」とか言われていますが、仕様上許容しているだけであって推奨しているわけではありませんなのでHTML4.01準拠の文書でも「空要素に閉じタグを付ける」「属性値は必ずダブルクォーテーションで囲む」とすればいいんです。

しかしこれは何も作成者が必ず意識しなければならないことではありません。作成するソフトウェア側で吸収すればいいのです。Wordで文書を古いHTMLで出力させると、丁寧に空要素から閉じタグを消してくれますが、これこそ余計なお世話なのです。HTML4.01で出力しようがXHTML1.0で出力しようが、基本的に同じ内容になるようにするべきです。

例えば<i>タグはXHTML1.0では使用できませんが、そもそも斜体はCSSで表現するべきものですし、<i>ではなく<em>を使えばよいのです。無理に<i>タグなんて使わなくてよいのです。

「XMLを必須にするとWebページ制作者への負担が増える」とも言われていますが、そうでしょうか。FlashやActionScriptの方がHTMLよりよっぽど複雑です。それでもFlashは十分市民権を得ています。それはオーサリングソフトが優れているからです。対してHTMLはタグの手打ちか、ひどいタグ出力しかできないWYSIWYGエディタだけです。

「思ったより流行らなかった」とティムバーナーズリーが嘆いているのは、HTML出力ソフトウェアの製作者の志の低さだと言っても過言ではありません。なるべくしてなった結果なのかもしれません。もっとガンガンXMLをプッシュしましょうよ。

ん？待てよ？XHTMLが流行らなかったからHTML5に統合するってことは、HTML5でもぐだぐだな仕様が続くってこと！？まさかね。。。

なお、HTML5が出てきた経緯については、ちょっと古い記事ですが@ITのHTML5が持つ本当の意味が参考になると思います。

brタグの正しい利用場面はどこ？

HTMLには改行を表す<br>タグというものがあります。間違って使われるタグとして有名な<br>ですが、そもそもどこで使えばいいのでしょうか？

個人ブログなどではよく段落の区切りとして<br>を使っているのを見ますが、これは言うまでもなく誤りです。段落は<p>で区切るべきです。段落区切りのために<br>を使ってはいけません。reflux flowによると、<br>は段落内で視覚整形目的で改行を入れたい場合に使うのがそもそもの目的のようですが、視覚整形はCSSで全てやるべきですよね。<address>内の区切りを示したいのなら、<address>を複数入れるべきです。

誤って使われる一番の理由は、WYSIWYGなエディタで改行を入力すると、自動的に<br>に変換されてしまうことにあると思います。だからブロガー達は知らず知らずに誤った使われ方をしてしまうのです :s エディタ内での改行は<br>ではなく、<p>タグの終了を表すようにすればいいのです。<br>を複数入力して大きくスペースを開けたい場合はstyle="margin-bottom: 100px;"等の属性指定をすればいいのです。そんなWYSIWYGエディタ作ってください。Googleさん。(まずはBloggerから。。)

XHTMLでは同じ空要素として<hr>タグが定義されていますが、これはCSS非対応のブラウザに対して区切りを示すために使用することが許されているようです。う～ん、CSS非対応なら独自の視覚整形機能を持っているだろうから、<hr>は不要だと思うんですけどね :s <br>も同じようにCSS非対応のブラウザのために使えばいいんですかね？

結局、ソースコードを載せるときの書式として、長い行を要素の端で折り返して、かつ任意の場所で改行したい場合に、<br>を使うぐらいしか思いつきませんでした。正しい使い方、というよりそれしか実現方法がないから使う、と言った方がいいかもしれません。

ちなみに、上記のソースコード表現を行う場合に注意があります。ソースコードの表現には<pre>を使ってwhite-space: normal;を指定すれば上記条件を満たせますが、white-space: normal;だと連続する空白文字列が1つにまとめられてしまいます。これを回避するには、空白文字を&nbsp;に置換する必要があります。めんどくさいですね。(CSS2.1にはpre-wrapがありますが、IE8で初めてサポートされるぐらいレアな値なので、まだまだ使えません :( )

<br>の正しい使い方については、同じような議論は色々なところで行われています(Robert's talk等)が、結局よく分からず。積極的に使おうとする必要はないんでしょうか。

詳しい人いましたら教えてください！

意味を主にしたデザインが必要な理由

昨日「意味を主にしたデザイン」について書きました。

• 意味を主にしたデザインの提案

今日は意味を主にしたデザインがなぜ必要なのかをもう少し詳しく説明(釈明)したいと思います。

装飾内容を統一、再定義するのに便利

以下はMicrosoft Office Word 2007で作られた文書です。見出し、本文で構成されていて、本文内には赤字や取り消し線の付いた青字の装飾がされた文字列があります。段落、文字列に対する装飾の設定は、全て「スタイル」機能を使っています。 太字で大きく書いてあるのは見出しだとすぐ分かりますね。取り消し線の付いた青字も何となく削除する文字列だと分かります。では赤字は何でしょうか。ぱっと見は分からないと思います。そこで文章の中身を見ると、何となく「修正結果」を表しているのではないか、と判断できます。

この文書に対して「修正個所は赤ではなく緑にしたい」とか「削除する文字列は表示しないようにしたい」とか、また「見出しの字をもう少し小さくしたい」とかの要望がある場合、もしスタイル機能を使っていなかったら、全ての設定を手で行う必要があります。また、もし「印刷用に修正箇所をいったん黒に戻して」なんて要求を受けた日にはどこが修正箇所か管理できなくなってしまいます。

段落、文字列に対する意味付けとしてスタイル機能を使っておけば、色の変更は一発でできますし、非表示も「隠し文字」に設定すればOKです。印刷用に一旦文字色を黒に統一するのなんてお茶の子さいさいです。

将来的にはGoogle Map、Amazon、Wikipediaと連携

他にもこんな使い方が想定できます。下は大塚愛さんのアルバム「Love Letter」に関するエントリです。このエントリ中で「Love Letter」という文字列に対して、Amazonへのリンクを貼っています。これは手動で貼ったものですが、将来的にはこの文字列に「CD」という意味を持たせておけば、Bloggerが勝手にAmazonへのリンクを貼るようになるかもしれません。ひょっとしたらブラウザ側で閲覧者が指定したCDショップへリンクする機能を実装するかもしれません。ジャケットの表示も自動でできるようになってほしいです。

同様に、住所やお店の名前はGoogle Mapやぐるなびへ、人名はWikipediaへ、といった具合に、いちいち参照先を指定せずとも、サーバなりブラウザなりが自動で適切なナビゲーションを行うことができるようになるかもしれません。そうなれば、文書構造は破壊されませんので、文書の見通しが良くなるだけでなく、書き手の負担も減ります。Amazon嫌いの人が勝手に意図せずAmazonに飛ばされることもなくなるかもしれません。

全てはセマンティックウェブのために

要はさっさとセマンティックウェブの考え方が浸透してくれればいいのですが、なかなかこういう考え方は広まりませんね。なおこのブログは全て手動でタグ打ちしているため、何から何まで非常にめんどうでなりません。早く意味を主にしたデザインのアプリケーションができることを祈っています。

HTMLは構造を表現する言語。意味はclassで指定すべき

マイコミジャーナルに、あまり使われていないHTMLタグについての記事がありました。

• あまり使われないHTMLタグ label、fieldset、legend、optgroup…

確かにあまり使われていませんね。私はせっかくあるんだからと積極的に使うようにしていますが、使おうとすると逆に使い方を調べるのに苦労するぐらい使われていません。

しかし、そもそもHTMLのタグだけで意味を表現しようとすること自体が間違っている気がします。HTMLは文章の構造を定義する言語なのですから、文章内で意味を持たせたい場合は、以下のようにタグのclassで意味を指定すればいいのではないでしょうか。

<span class="field string">名前</span>: <input>...

classで指定するようにすれば、自分の好きなようにいくらでも拡張可能ですから、いちいち「入力欄の説明に使うタグは何だっけ？」と迷うこともなくなります。また、HTML自体の構造もシンプルになります。こうすればlabelとかlegendとかは使わなくてもよくなります。

HTML5では文章構造を表すsectionやヘッダ、フッタを表すheader, footerなどがどかどかっと追加される予定みたいですが、ちゃんと使われるんでしょうかね。ブロック要素div、インライン要素span、表組みtable、リスト構造ul(もしくはol)さえあれば、何でも表現できますよ。きっと。

1つ実例を挙げたいと思います。以下をご覧ください。

上記はMicrosoft Wordで「新しいスタイル」を作るときの画面です。これを見ると「種類」には段落、文字、リンク、表、リストしかありません。Microsoftは、これだけあれば文章の構造化は可能である、と判断しているということです。

またWordには「スタイル」という、上述した「構造」に対する「装飾」を定義するための機能があります。HTMLとCSSみたいなものです。とてもシンプルです(複雑なのは使い方だけです :p )。Microsoftの製品を引き合いに出すと、何か悪い例を示しているような錯覚を感じる方もいるかもしれませんが、このデザイン、操作性が世のデファクトですから、仮に正しないとしても、間違ってはいないはずです。

もちろん、グラフの描画や複雑なレイアウトを構造化するのであれば、上述の構造だけでは足りないですが、一般にはそれだけで9割程度の要求を満たせると思います。シンプルに行きましょうよ。

意味を主にしたデザインの提案

Microsoft Office 2007のWordには上記のようなツールバーがあります。Wordに限らず、多くのアプリケーションで文章の書式を設定するときには、このようなツールバーを使いますよね。Bloggerの投稿フォームにも同じようなツールバーがあります。こういうデザインをWYSIWYG(What You See Is What You Get)って呼んだりします。見たままの効果を文章に反映できる、とても優れたデザインです。これらのツールバーには、お決まりのように「太字」「斜体」「フォントの色」「フォントのサイズ」「左寄せ」「中央揃え」などのボタンがあります。ある意味、文章の編集にはこのツールバーデザインがデファクトとなっているため、もはや誰もこれを不便だとは思わないと思います。

しかし私はあえてこのデザインに異論を唱えてみます。そもそも文章内の文字列を太字にしたり色を変えたりするのは、その文字列が大事な内容であったり、逆に婉曲したい内容であることを読者に示したいからです。人は文字列を装飾することで意味を持たせようとしているのですね。

であれば、装飾の変更単位も「太字」や「色の変更」ではなく、最初から「強調」や「婉曲」などの「意味を主にしたデザイン」にしてみてはどうでしょう。つまり意味とそれを表す装飾の分離をするということです。HTMLとCSSみたいなものですね(HTMLは意味ではなく構造を表す言語なので、ちょっと違いますが)。

具体的にこんなデザインにしてみてはいかがでしょうか。

ツールバーのボタンには、装飾ではなく、意味を示すアイコンを並べてみました。使い方はWYSIWYGツールバーと同じです。文字列、あるいは段落を選択してクリックするだけ。「強調」ボタンを押せば、文字列に「強調する内容である」という意味を付けられます。「強調」という意味を付けられた文字列がどのように装飾されるか(太字になるのか赤字になるのかなど)は、どこか別で定義をするようにします。例えば右にあるWordの「スタイル」ウィンドウのようなUIで。(Wordのスタイル機能も「スタイル名=意味」と思えば「意味を主にしたデザイン」を実現できているんですね。あまり使われていませんが。)

このデザインの利点は、同じような文書をいくつも書く場合(設計書、マニュアル、ニュース記事、真面目系(?)のブログ等)、同じデザインを複数の文書に適用できます。一方難点は、ツールバーのボタンを押しても何が起こるか想像できないということです。分かりやすさはWYSIWYGには遠く及びません。

ここまで書いてて思いましたが、HTML+CSSなら大体実現できるんですね :) Blogの投稿もHTMLでするんですから、もっと意味を主にしたデザインでできるようにしてくださいよ。(HTMLタグ直打ちは結構厳しいです。。。)