HTML5入門 10のお作法

2011.11.07crossnodeHTML5


2011年5月に最終草案が公開され、2014年までの完成を目指しているという正式勧告の発表を待つのみとなったHTML5。
実際にHTML5で書かれたサイトも増えてきましたが、CSS3やJSを組み合わせて斬新なユーザー体験を提供しているサイトの数々を見ていて、敷居が高そうに感じている人も少なからずいるかもしれません。
そんな躊躇している人も一度ソースを見てみると基本的な書式は今までと変わらないことを知ってきっと安堵することでしょう。そして、マークアップ言語としてより洗練されソースがシンプルになっているのが分かるはずです。
もちろん派手なアニメーションやインタラクションのないページにも使えますし、ポイントとなる変更点さえ把握してしまえばもうHTML5は怖くないはずです。

というわけで、HTML5に関する基礎知識として、今回は基本的な記述方法に絞って10のポイントを挙げてみました。

01 : XHTML方式もOK

<br>
<br />

上記のように空要素の終わりに「/」を入れる書き方も使用可能です。
HTML5ではXML方式の記述も標準で解釈できるようになったのでHTML方式でもXHTML方式でもOKなのです。
したがって、XHTMLで記述された既存サイトをHTML5化する場合は大いに助かります。

02 : DOCTYPE宣言

<!DOCTYPE html>

この記述を見かけたらそのページはHTML5で書かれています。あの長いDTD参照とはおさらばです。
ちなみにXML構文の記述は任意で書いても良いのですが、デフォルトでXMLもきちんと解釈してくれる仕様なので実質不要なのです。

03 : htmlタグ

<html lang="ja">

言語指定もいたってシンプル。XHTML方式の記述が混在する場合でもxml用の言語指定は不要です。
ちなみに日本語の指定「ja」は「Japanese」の略であり、国名表記「jp」とは別物ですのでお間違えなく。

04 : 文字コード指定

<meta charset="utf-8">

たったこれだけでOKになりました。
http-equiv属性やcontent属性の指定は不要になりました。

05 : 外部CSS読み込み

<link rel="stylesheet" href="〜">

これまた短くなりました。
ちなみにlinkタグのcharset属性は使用不可になったので書かないように気をつけましょう。

06 : CSS直接記述

<style>  
p { color: #000000; }
</style>

headタグ内に上記のように記述すればOK。
デフォルトでCSSとして解釈してくれるので、スタイル設定にCSSを指定する記述は不要になりました。

07 : JS記述

<script>  
alert('Hello!');
</script>

style同様シンプルになりました。
デフォルトでJSとして解釈してくれるので、スクリプトにJSを指定する記述は不要になりました。

08 : aタグとareaタグのtarget属性

<a href="〜" target="_blank">〜</a>

上記のような記述はHTML4.01 Strict, XHTML1.0 Strict, XHTML1.1では使えませんでしたがHTML5なら使えます。
これでリンク先のページを開くウインドウ状態の指定が簡単にできます。

09 : 装飾系属性の廃止

主なものでは下記の属性が廃止されました。
caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, trタグの align 属性。
bodyタグの alink, link, text, vlink 属性。
bodyタグの background 属性。
table, tr, td, th, bodyタグの bgcolor 属性。
hrタグの size 属性。
hr, table, td, th, col, colgroup, preタグの width 属性。

他にも多数廃止になっているので下記ページでひと通り見ておくと良いと思います。
HTML5 における HTML4 からの変更点 – 不在の属性

10 : 意味が変更されたタグ

特にb, i, small, strongタグは少しややこしいかもしれないので把握しておきましょう。

bタグ:文章内のポイントとなるキーワードや製品名、記事の引用文など単に注目させたい箇所を表します。strongタグのように重要度を表すものではありません。
iタグ:専門用語やカテゴリーなど、bタグで強調する必要はないが他のテキストと性質が異なる単語や記述を表します。
smallタグ:補足的な注釈を表します。
strongタグ:文章内の重要な箇所を表します。bタグのようにキーワードを目立たせるためのものではありません。

上記のいずれも文字の大きさや太さ等を指定するものではありません。見た目の装飾はCSSで指定するのでありHTMLはあくまで文書としての構造や意味合いを考慮してマークアップすることを心がけましょう。

他にも色々変更されているタグがあるので下記ページでひと通り見ておくと良いと思います。
HTML5 における HTML4 からの変更点 – 変更された要素

▼参考サイト

W3C HTML5最終草案(原文)

HTML5におけるHTML4からの変更点(HTML5最終草案日本語訳)


ページトップへ