WCAN 2009 Autumn　HTML5編

大分経っちゃいましたが、WCAN 2009 Autumnの私的メイン
「60分できる！実践 HTML5 & CSS3ウェブサイト」本日はHTML5編。

えーと、まずHTML5の歴史から。
ご存知のように今の主流はXHTMLなわけですが、
（先日本屋で”できるXHTML＋CSS！”みたいな本が平積み――多分新刊で出てました…）
XHTMLはとにかく細かい。
あまりに複雑なので、Webサイト全部の中で、わずか7％しかまともに書けてないようです。
我が身を振り返れば、IE6のためにXML宣言を削ってしまっているし。
というわけで、例え少々間違っていてもブラウザ側としては表示させなくちゃいけない。
その分ブラウザに負荷がかかってしまうのです。

それからIEといえば、IEにはHTMLパーサーしか使われていません。
IE以外の各ブラウザはHTMLパーサとXMLパーサを持っていますが、

<meta content="text/html">

と書くあれで、
IEのためにHTMLパーサで読んでね、と命令出してるわけです。
でもそんなんなら、最初からどのブラウザでも表示できるようにHTMLに統一しちゃおうぜ！
とブラウザ側からW3Cに働きかけた…という状況だそうです。

そんなわけで、現在W3CはHTML5の策定を進めているわけですが、いつ最終草案が出てくるのかは、現状謎。
なので、セミナーでは確定事項であり、メインの項目のみの説明でした。
というわけで、XHTMLからHTML5に変更になった部分をご紹介。

…の前に、HTML5はWeb Applications 1.0に、Web Forms 2.0を加えたものになっています。
すみません、この辺私も意味が分かりませんが（…）肝心なのは、DOM（Document Object Model)をベースにしているため、
マークアップの重要性がさらに増します。ということらしいです…。
JavaScriptを使ってオブジェクトを管理することで、ブラウザがアプリケーション化していくとのこと。
（iPhonがまさにそんな感じですよね）

*****緩くなった項目*****

閉じタグがないタグの扱い
<img /><br />系ですね。こちら、半角開けてスラッシュってのが必要なくなります。
あっても良いし、なくてもいい。
<img>タグのalt
altは現在必須ですが（ない場合も空にしておいたり…）、こちらもなきゃなくてもOK！です。
（この項目に関して下記の追記をご覧ください。あっちゃー）
<a>タグの位置
例えば
<h1><a>店舗名</a></h1>
というタグの場合、
<a><h1>店舗名</a></h1>
と順番をごちゃごちゃにしちゃっても大丈夫大丈夫。

<追記>
2.の<img>タグのaltの扱いですが、先生からダメ出しが入りました（笑）
altは空の場合や、キャプションなんかで、無理矢理入れるぐらいだったら、
無くても良い程度の意味だそうです。
原則はSEO的にもいる。
むしろ必要であるならば、これまでの画像タイトル程度の意味よりももっと詳しい説明を入れろ、
とのことであるらしい？
CSS HappyLife — HTML5のimg要素のalt属性の仕様は読んでおくべきだと思う。
blog.wonder-boys.net — HTML5ではalt属性が必須ではなくなるの？
画像がなくても、意味が通じるような文章を、とのこと。
確かに本来のaltはそんなような意味だったっけ…？

*****では、実際のサイト構成を見て行きます*****

DOCTYPE宣言
あれ何も見ずに書けますか？　私は書けません。やはりみんな書けないようで、簡略化されました。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

とうだうだ書いていたのが、

<!DOCTYPE html>

になりました。そんなの出来るのなら、早くそうしろよー！と思ったり。
charset
こちらも見ずに書けない系。

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

が

<meta charset=”utf-8″ />

に。（前述の通り末尾の半角スラッシュ無くても可）
<div>で作っていたブロック。

大抵こう作るんですよね。で、

こうなりました。
各セクションには、かならず見出しタグを含まなければいけません。（DOMをちゃんと使うために）
```
<section>
　　　<h1>見出し</h1>
　　　<p>
　　　　　テキストテキストテキスト
　　　</p>
</section>
```
全部こんな感じで見出しがつきます。
<h1>でなければいけないのかどうかは、私にはちょっと分からない。
<article>
<article>というタグが存在するのですが、これは文字通り「記事」です。
ブログやニュースサイトで使われるらしい。
```
<article>
<header>ヘッダー部分</header>
　　　<h1>見出し</h1>
　　　<p>
　　　　　テキストテキストテキスト
　　　</p>
　<footer>フッター部分</footer>
</article>
```
と、<article>内でまたheaderだのfooterだのを含んでいます。
<small>
免責条項、警告、法的制約、著作権表記などを説明する場所だそうです。
コピーライトしか思いつきません……。
今までaddressタグで無理矢理やってたのをこっちを使えってことでしょうか。
```
<footer>
　　　<small>コピーライト表示</small>
</footer>
```

作ったサイトのバリデーションチェックはこちらでどうぞ。
Validator.nu
HTML5はIEは８ですらサポートされてませんのでご注意。（あれ、全ブラウザで使えるようにうんぬんってのは…？）
しかたがないのでJavaScriptを読み込ませます。

<!--[if lte IE8]>
<script src="html5.js" type="text/javascript">
</script>
<!--[end if]>

もう一つ。注意事項。
HTML5においては、全てのタグがインライン要素です。
必要なとこにdisplay:block付けてください。

以上HTML5の説明でした～。次はCSS3だな…。

2009.10.22
Category：HTML5 , WEBメモ
Tags:HTML5

Deep Blue Sky ―Makiのトイカメラギャラリー―

WCAN 2009 Autumn HTML5編

WCAN 2009 Autumn　HTML5編