このページの本文へ

ここが変わった!HTML5マークアップ入門 (2/6)

2011年08月01日 13時00分更新

文●浜 俊太朗/ライブドア

  • この記事をはてなブックマークに追加
本文印刷

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/

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています