鳶嶋工房 / Web / Diary / HTML5の学習結果をまとめる

リニューアルです

　えー、お久しぶりの更新です。
　前回が2004年ですから、危うく10年ぶりです。

　以前はJavaScriptだけのコーナーでしたが、今回から心機一転、HTML+CSS+JavaScriptという、クライアントサイドWebページ技術全般に変わりました。
　まー、別にしちゃったら更新頻度的に酷い事になると思ったのと、もはやこの3者は分けて語れんなという事で。

　今回からより積極的にページ自体を実験場にするので、ほとんど毎回異なった構成とかレイアウトのページになって、統一感グダグダになる事請け合いです。

HTML5の概要

　さて、9年前はまだAjaxも流行ってなくて、ブラウザごとの独自実装も酷くてNN4も無視できないシェアが残っている上にIE6が猛威を振るってまして、「DHTMLだめじゃんてゆーかFlashすげー!(楽)」って感じでした。
　MTことMovable Typeが2001年に登場して、2004年というと日本でもblogが流行って、それとともにXHTMLとCSSも急速に広まっていた頃です。

　そして時は流れて2013年。
「文書構造はHTML」「装飾はCSS」「JavaScriptは実用になる」てな認識が浸透してきたけど、どーもHTMLそのものが認識とズレてるぞ、ということが判明。
　XHTML2の策定も行われていたけど、方向性に迷いが出て空中分解。
　ちょっと実際に技術がどう使用されているかを見ずに策定していたのが良くなかったと気付き、「一番の仕様は、現実に使われているHTML(実装)だ」という起点にたって、新たに策定されたのがHTML5、という流れ…らしい。

　その辺は、例えば太字を示してた<b>タグを新たに「キーワード」という装飾ではない意味として再定義したことなんかが分かりやすい例。
　みんながどのような意味で、<b>を使っているかを調べて、「だいたいキーワード的な意味で使ってるな」と発見し、「そんじゃ意味はキーワードだと定義しちゃえ」とゆー。
　みんなが定義通り使ってないなら、みんなの使い方を定義にしちゃえって、…あれですな「現実的(おとなの)対応」というヤツです。
　<b>の他に、<i><em><strong><small><hr>が再定義されている。

　で、2013-02-22現在も仕様は策定中ではあるけれど、HTML5 Candidate Recommendation(勧告候補)が出てる状態で、W3C的には「HTML5はほとんど確定したから、次の5.1について考えよーぜ」ってフェーズに突入している。
　ちなみに、主な情報の入手先はHTML5.JP - 次世代HTML標準 HTML5情報サイトだ。

　あとHTML5と言った時にHTML以外の技術も含めて言う事が多いけど、このページでは純粋にHTMLについて語る。

新たに追加されたタグ

　ここで注目はセクショニング・コンテンツと言われる<section><nav><article><aside>あたり。
　今までは、そもそも文書構造を定義するためのHTMLなのに、構造を指定するタグがなさ過ぎた。これらが増えてかなりスッキリした。
　<nav>とか<section>に関しては<div class="nav">や<div class="section">という形で使っていたので、それを置き換えれば大体よさそう。

　それから<time>は<span class="date">みたいな形で書いてたので、それを置き換えれば良し、と。

　あとは…個人的にはあんまり興味ない。自在にグラフィックの描画が可能な事で話題の<canvas>とか、個人的にはDashboardで使ってるんで、既に新鮮味ないというか。
　Flashの方が圧倒的に楽やん、と言うか。
　まだブラウザの実装が微妙なものが多いので、使いたくても使えないというか。

削除されたタグ

　削除されたというか、もともとなかったブラウザの独自実装も列挙してるけど、よーするにこの辺のはHTML5には入りませんよー、というタグ。
　私の場合、既にほとんど使ってないか、一度も使った事がないものばかりだ。
　気をつけるのは<rb>だけだね。Firefoxはまだルビ関連を実装してない。頑張れ日本人開発者!(私は応援するだけにしとく)

シンプルになった記述

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

　上記はXHTML1.1での当サイトの記述。
　今回からHTML5にして、以下のようになった。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />

　シンプルになりましたね。
　<!DOCTYPE html>もいらないんじゃないの?とか思うけど、IEなんかがこの記述でレンダリングモードを切り分けているので、その実装に合わせたみたい。
　HTML5の仕様は、他部分も現在の主要なブラウザで変なレンダリングにならない程度に削った、という感じ。
　HTML5の仕様的には減らそうとすれば、もっと減らせるけど、うちはこのくらい残してます。
　他でも<script>や<style>なんかは、JavaScriptとCSSを書くなら、細かな属性は書かなくて良くなってる。

　IEのせいで<script src="……" />、<script src="……" ></script>と書かないわけにも行かないのが、モニョモニョする。
　だいたい/>の前に半角スペース入れないといけないのも、なんだかなぁ。
　このあたり、HTML5の仕様じゃなくてIE対策なんだけど。

　HTML5は空タグの後ろは/>でも>でも良い。私はXHTMLに慣れているので、/>にしておく。
　これは、現在の大抵のブラウザの実装として、どっちでも良きように解釈しているので、仕様の方が歩み寄った形。

　なお、XHTML5というXMLでHTML5を書く仕様もある。
　HTML5では、まずHTTPヘッダが"application/xhtml+xml"か"application/xml"じゃないとXHTML文書じゃないと定義してある。
　ユルく仕様が決められる傾向のHTML5にしては、えらく厳密だが、そもそもXML文書はそういう運用をすべきなので、良い選択かと思う。
　今や拡張子を.xhtmlにしておけば多くのサーバで、上記HTTPヘッダを出力してくれると思うし。
　ただ現状では多くのブラウザで、xhtml文書としてレンダリングしてくんないのが難点。
　うちの場合は今まで.htmlで書いてた文書をHTML5で書き直すのに、拡張子も変えるのはやだなぁ、ということでXHTML風味に書いたHTMLというところに落ち着いた。