Hatena::Groupweb

vantguarde

 | 

1.27

HTML5が話題になっているので試しに添削してみた

| 21:18

「HTML5が話題になっているので試しに書いてみた。」なんてあったので見てみることに。

そもそも書き方が正しいのかも分からずに書いてたので、こーじゃねーよ!っていう指摘があるとうれしいなーとか思ったりしております。

*

というわけで添削。

articlesection

試しに書いたやつでは、各エントリがsection、それらをまとめるセクションとしてarticleが使われてるんですが、この場合は各エントリをarticleとしたほうが良いです。

articleの定義では、その内容が独立可能であると説明されてます。なので、一般的なsectionよりも、articleの方が良いです。あとページ自身をくくるのは、article以外の物がよいかな。

time要素の時間情報

time要素で記事の投稿日付が書かれてるのは正しいのですが、コンピューターで解析可能な時刻を含めるともっと良いです。time要素には、そのためにdatetime属性が用意されています。

<time datetime="2008-01-24 19:56 -9">01月24日(&#26408;)19:56</time>

ただ、時刻のフォーマットに沿ってさえいれば、<time>09:46</time>とかも書けます。

permalink

microformats由来なのですが、permalinkにはrel="bookmark"をつけとくと良いかなと。

画像の代替テキスト

あんまりHTML5と関係ないのですが、この際ついでに。altの書き方があまり良くないです。

<figure>
<a href="..."><img src="..." alt="XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則(青の輪っか本)" ... /></a>
<legend>XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則(青の輪っか本)</legend>
</figure>

これ、代替テキストとlegendの値が被ってるんですよね。画像を表示しない設定だったり、音声ブラウザとかで特に煩わしいです。

ただ、この例だとimgにリンクが張ってあるのがちょっと面倒なところ。リンクを張ってなかったらaltが空でもいいと思うのですが、リンクがある場合はちょっと困りますね。現状はlegendとimgをaでくくったりできなさそうなので、legendにリンクを張ったりlegendの内容を変えるなどして工夫すべきかなと思います。

altを入れたばっかりに二重読み上げって結構多いので、自信のない人はaltはつけるだけじゃなくてあたりを読むと良いように思います。

smallの使いどころ

「※ 実際にはダウンロード出来ません」という文がsmallでくくられているのですが、どちらかというと注意とか重要性を持った文なので、strongと組み合わせて使うといいと思います。

menuの使いどころ

menuはWebアプリにおける「メニュー」を表すタグなので、Weblogとかの文書であればnavが適しています。

ライセンス条項

ライセンス条項がfooterにあるのですが、これにはrel="license"をつけるべきです。こっちもmicroformats由来ですね。

あと、こういうライセンスとかコピーライトの文にこそsmallが適してるのかなと。まあ、つけなくてもいいんでしょうけど。

ざっと見て気になったのはこれくらいでしょうか。

やっぱり翻訳はあった方がいいですねえ。読まないと分からないっていうのは英語圏以外にはかなりきつい。あとはRNG Compactみたいな、ある程度の内容モデルが分かるようなものがあればいいのかしら。

 | 
Contact: @vant / lepetitcroissant@gmail.com.