「HTML 5」で劇的に変わる? HTMLの書き方お作法

Source:(いずれも英語)
W3C Working Draft / HTML 5
HTML 5 differences from HTML 4


HTML 5 の初期草案がWorld Wide Web Consortium から発表された。マルチメディア対応や文章の「パート」を明確にするタグ群など、なかなか興味深いタグが増えている一方、互換性や表現上の観点から問題にすべき点もある。

この記事の視点について

 この記事は、通常htmlでホームページやブログサイトを作っているユーザーの視点に立って構成されている。その一方で、Web Application 開発の視点には配慮していない。特に、(表計算ソフトもどきの実行、樹型リストも作成できる模様)(何らかのコマンドの実行)などのようなタグを用いてhtml上でinteractive contentsを作る、ということにはまったく興味がない。この点について、最初にお断りしておく。

マルチメディア対応強化策

 HTML 5の最大の特徴は、マルチメディア対応の新しいタグ群である。マルチメディア・コンテンツは<figure>タグ(添付されたマルチメディアコンテンツと内容説明とのセットを示すタグ)で囲み、コンテンツは従来からある<img><embed><object>や新しいタグ<video><audio>で示し、細かい説明は<legend>タグ内で行う。ロード・エラーになったとき処理記述もできるようになっているが、開発者でもなければリロード用のリンクだけ残しておく記述ができれば十分だろう。

文章の「どのパート」なのかを明確にするタグ群

 <article><header><footer><section><aside><nav>といったタグ群が、そのページの中の「どのパート」なのかを明確にするタグとして誕生している。さらに、もとになった記事や他の文献や投稿されたコメントなどはネストされた<article>タグで示すようになる。この結果、<div>タグは、単なる一定段落(群)内のcssや言語指定をするための「意味のないタグ」に格下げされている(<span>が「意味がないタグ」なのは従来通り)どころか、むしろThe div elementの項 には、「それに頼って<div class="〜">以外のmarkupがされていない文章段落を気軽に作ることができてしまうが、アクセシビリティ面から見て実にけしからん」とまで書かれている。そのような問題を解決するために、これらのタグが提案されているのは実にいいことだ。これらが適用されると仮定すれば、例えばブログの個別記事ページなどは(もはやXHTML 1.1準拠のところも多いだろうが、あえてHTML 5を採用するなら)このようなくくりで表現されるようになるだろう。

<!-- ここから記事ページ <html>〜</head>と</html>、css(class,id)指定は省略 -->
<body>
<!-- ブログそのもののヘッダ, サイドメニューなど <aside>タグ多用? -->
<nav>
<!-- 前の記事、次の記事へのリンク -->
</nav>
<article> <!-- 一つの記事がここから始まることを示す -->
<!-- article タグはネストしてよく、
  ネストした内側のarticleタグは、それらが記事の「外側の」ものであることを示す -->
<header>
<h2>記事タイトル</h2> 
  <!-- <h1> はブログタイトルだろうから、わざと<h2>にしてある。 -->
<p> (記事の要旨)</p>
</header>
<section> <!-- ここから本文 -->
<article>ソースとなった書物や記事を示す</article>
<blockquote>(必要に応じて引用)</blockquote>
<p> (記事内容)</p>
</section>
<!-- 場合により「続きを読む」のリンク -->
<section>
<p> (記事内容の続き)</p>
</section>
<section>
<p>関連記事:</p>
<article>関連記事のありか</article>
</section>
<footer>
<!-- 投稿者、パーマリンク、カテゴリ、記事日時など -->
</footer>
<section>
<p>コメントを投稿する</p>
<!-- コメント投稿欄 -->
<p>この記事へのコメント</p>
<article>
<!-- つけられたコメント(×nセット) -->
</article>
</section>
<section>
<p>この記事へのトラックバックURL</p>
<!-- トラックバックURLなど -->
<p>この記事へのトラックバック内容</p>
<article>
<!-- つけられたトラックバックの内容(×nセット) -->
</article>
</section>
</article> <!-- 一つの記事がここで終わることを示す -->
<!-- ブログそのもののフッタ、サイドメニューなど <aside>タグ多用? -->
</body>

その他の興味深いタグ

  • 会話内容は<dialog>タグの中に<dt>(話した人)<dd>(話した内容)で示すことによって表現できる。こういうタグを待っていた人はかなり多いのではないか。
  • 動的に2D領域を表現するための<canvas>タグが追加されている。現行では(原則としてPNG形式による...[1/25追記]SVG(Scalable Vector Graphics)にも対応するようだ)2Dだけのサポートだが、将来的に何らかのAPI(OpenGL ES APIとか?)を用いて3Dに対応する準備がある、と書かれており、どのようにして実現されるのか楽しみだ。
  • フォーム関連では、Web Forms 2.0標準が全面採用される見込み。コンボボックスの実装や、<input>タグでの新たな属性の追加、フォーム内容送信後のページ内容の書き換えや<fieldset>タグでの新たなコントロールセットの追加などが見込まれる。
  • エンコード指定が簡単になる。

>

従来、

<meta httv-equiv="content-type" content="text/html; charset=Shift_JIS">

と書かなければいけなかったところ、


<meta charset="Shift_JIS">

とだけ書けばいいようになる。

表現上の問題点

 ここからは互換性の上での、あるいは日本語記述特有の問題点を述べていく。

  • フレーム関係のタグが、ユーザーナビゲーションおよびアクセシビリティ面で好ましくないという理由で削除されている。
  • アクセシビリティをうるさく言っているのに、accesskey属性は削除されている、という笑えない事実。
  • <a>タグのname属性(<a name="〜">〜</a>)はサポートされていない。すべてid属性に置き換える必要がある。
  • <font>タグはすべてstyle(CSS)指定に置き換えられるべきであり、削除される可能性がある、と警告されている(Interactiveにページを変更するWYSIWYGエディタ部分でのみ「例外的に」使用可能とされている)。<font>タグを便利に使っているhtml文書はいまだ多いものと思われるが、正しい文法に今後もこだわっていくなら、そろそろ使うのはやめた方がいいかも知れない。なお、同時にstyle(CSS)指定に置き換えられるべき、とされていた中では、<body>タグなどの色や背景指定(text,link,alink,vlink,background,bgcolor)属性、<center>タグ、align,valign属性といった中央・上下左右「寄せ」関連、width,border,cellpadding,cellspacing,hspace,vspace属性といった「幅・隙間設定」関連や<big><s><strike><u>タグなどは削除されているが、<b>や<i>タグはしぶとく生き残っている*1。なお、削除されたものをstyleパラメーターで代替するのもダメ なので、もはや「CSS指定は必須」 ということにならざるを得ない。
  • テーブルをページ・フォーマッティングの(=ページを綺麗に見せる)ために使うのもダメ、と明記されているが、完全な代替案がない(CSS3のブラウザへの実装を待たなければいけない)現状で、その説得力は不十分と言わざるを得ない。この標準が最終決定し発効となる予定の2010年9月までにどうにかなってくれればよいのだが。
  • 相変わらずルビ振り関連のタグ(<ruby><rb><rt><rp>など)が含まれていない。現状ではXHTML 1.1でしか実装されておらず、Internet Explorer以外では代替レンダリングしかできない状況であるが、特に日本語を表現する上では「必須」のタグであり、なんとかして採用してもらえるような働きかけが必要だろう。


 ……とりあえず、ざっと見た感じではこんなところ。「抜けがあるぞ〜」とか「解釈が間違ってるぞ〜」とかあればぜひコメントまたはトラックバックにて。

*1:「もっともらしい理由をつけて」なのですが、ぶっちゃけHTML 5の初期草案を読むと、<b><i>タグは「あまりにいろいろな理由で使っている人が多いからやむを得ず残した」というニュアンスがぷんぷん伝わってきます