HTML5を採用するメリット
HTML5を採用することで、従来のXHTML 1.0やHTML 4.01と比べてさまざまなメリットが得られます。
工数が減るメリット
XHTML 1.0などに比べて記述がシンプルで分かりやすくなり、マークアップにかかる工数を削減できます。
さまざまな定型句がシンプルになった
DOCTYPEやhead要素の中に記述するお約束的な部分が、全体的にシンプルになりました。
・文書型宣言
HTML4.01などのHTMLは、SGMLベースであるためにDTD(Document Type Definition)を参照する必要があり、長い文書型宣言を記述しなければなりませんでした。一方、HTML5の文書型宣言は、ブラウザーを標準モードにする目的のみで使用されるため、非常にシンプルになっています。この文書型宣言を使用すると、たとえInternet Explorer 6(IE6)であっても標準モードになります。
XHTML1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5
<!DOCTYPE html>
・html要素
html要素もシンプルになっています。これなら手書きで記述するのも容易です。
XHTML1.0
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
HTML5
<html lang="ja">
・文字エンコーディングの指定
従来はMIMEタイプも合わせて指定していましたが、HTML5では文字エンコーディングの指定のみになりました。XHTML1.0などで使われていた形式も引き続き使用できます。
XHTML1.0
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
HTML5
<meta charset="UTF-8" />
・link要素によるCSSの読み込み
link要素でスタイルシートを読み込む場合(rel属性の値がstylesheetである場合)、対象のスタイルシートのMIMEタイプがtext/cssであれば(いわゆるCSSなら)、type属性を省略できるようになりました。
XHTML1.0
<link rel="stylesheet" href="sample.css" type="text/css" />
HTML5
<link rel="stylesheet" href="sample.css" />
・script要素
スクリプトがJavaScriptである場合、script要素のtype属性を省略できるようになりました。
XHTML1.0
<script type="text/javascript">
alert('test');
</script>
HTML5
<script>
alert('test');
</script>
書き方の許容範囲が広がった
ソースコードを記述する際のルールは、これまでのHTMLやXHTMLと比べて、緩やかなものになっています。
・空要素の終端スラッシュ
br要素やimg要素などの空要素には、XHTMLでは終端スラッシュが必要で、HTMLでは不要でした。HTML5では、あってもなくてもよいことになっています。
HTML4.01
<img src="/img/icon/foo.png" alt=""><br>
XHTML1.0
<img src="/img/icon/foo.png" alt="" /><br />
HTML5
<img src="/img/icon/foo.png" alt="" /><br />
<img src="/img/icon/foo.png" alt=""><br>
以下のように、1つのHTML内で2つの書き方が混在していても構いませんが、あえて混在させる意味はないので、どちらかに統一しましょう。
<img src="/img/icon/foo.png" alt=""><br />
ただし、記述ルールは緩くなりましたが、意味的には厳しくなっている面もあります。詳しくは今後の連載で詳しく解説していきます。
・タグの省略
HTML5では、要素によっては開始タグや終了タグを省略できます。省略できる条件は要素ごとに細かく決められており、ルールに従う必要があります。理解して利用すれば工数の削減になるかもしれませんが、ソースコードの可読性の観点から、通常のWeb制作においてはおすすめできません。
XHTML1.0
<dl>
<dt>title title</dt>
<dd>text text</dd>
</dl>
HTML5
<dl>
<dt>title title
<dd>text text
</dl>
参考:タグの省略を積極的に取り入れているページ
- livedoor IRC(Internet Relay Chat)
- http://labs.edge.jp/colabv6/ircnet/