トップページ | HTML5編・目次

●HTML5のルール

更新日:
公開日:

 HTML5は2014年10月28日にW3Cから正式に勧告されました。さらに2016 年11月1日にHTML 5.1が勧告され、現在、HTML 5.2がドラフト(草案)段階にあります。現時点でのHTML5のおおむねのルールを記載します。

■文法

 HTML5は「HTML構文」と「XML構文」の2種類が定義されており、HTML(4.01)のように記述でき、XHTMLのようにも記述することができます。「XML構文」は「XHTML構文」とも言われ、XHTML5という表記もあります。基本的には、XML宣言とhtml要素に名前空間のあるものがXML構文のHTML5文書、ないものがHTML構文のHTML5文書ですが、紛らわしいので当サイトはXHTML構文のHTML5をXHTML5で統一します。両者の決定的な違いは配信するときのMIMEタイプの種類にあります。"text/html"のMIMEタイプがHTML5文書、"application/xhtml+xml"または、“application/xml”のMIMEタイプがXHTML5文書です。HTML5、XHTML5におけるMIMEタイプについては別項に解説します。

■拡張子

 HTML5文書の拡張子は、HTML5文書が「.html」の拡張子。「.htm」でも可ですが、現在のHTML文書の主流となっている「.html」の拡張子を推奨します。XHTML5文書が「.xhtml」(または.xht)の拡張子です。ただし、Internet Explorer(v6~v8)が拡張子「.xhtml」のファイルに対応していません。ファイルを開こうとしても「ファイルのダウンロード」のダイアログボックスが表示されてしまい、閲覧することができません。今のところXHTML5文書は、「.html」の拡張子でも作れるXHTML文書と異なり、「.html」の拡張子で文書を作成すると文法的にエラーとなってしまいます。HTMLファイルで作ることは可能なのですがXML宣言を貼り付けるとIEはほかのメジャーブラウザとは異なる解釈、異なる振る舞いをし、開いても表示されないなどの問題を抱えているため、実質、HTML構文で記述したHTML5文書作りが現実的になるように思いますが拡張子「.xhtml」のXHTML5文書に未対応のブラウザへの対応策はサーバサイドの設定になりますがあるにはあります。(別項にて解説)

■HTML5文書の基本中の基本形

[HTML構文例]
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
</head>
<body>
<p>XHTML5</p>
</body>
</html>

[XML構文例]
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>XHTML5</title>
</head>
<body>
<p>XHTML5</p>
</body>
</html>

■XML宣言

 XML構文の場合は、文頭に以下のXML宣言を記述します。HTML構文の場合は不要です。

 <?xml version="1.0" encoding="utf-8"?>

■文字コード

 HTML5文書における文字コード指定は、“UTF-8”(デフォルト)を指定します。そのほかの、例えば、“Shift_JIS”などの文字コードは非互換性のリスクがあるため、“UTF-8”以外の文字コードを指定するとエラーとなります。当初は、“UTF-16”も利用できたようですが、現在は“UTF-16”の文字コードを指定するとエラー扱いになります。この辺は融通が利かないというか、窮屈というか・・。ま、CMS(コンテンツ管理システム)なんかは“UTF-8”の文字コード指定が多いし、割り切ればいいとは思いますが…。なお、XML宣言とmeta要素の両方に文字コード指定があった場合はXML宣言の指定が優先されます。metaタグによる文字コード指定はXHTML文書、XHTML文書で使われていたhttp-equiv="Content-Type"による文字コード指定を短くしたものですがメタデータはHTTPヘッダとしてサーバよりブラウザなどのユーザー・エージェント(UA)へ送信させたいときに指定しますが必ずしもHTTPヘッダとしてサーバへ送信されるわけではなく、実際にはブラウザ側でチェックする場合が多いようです。

・XHTML5またはHTML文書で使われる文字コード指定

【HTML5】
<meta charset="utf-8">

【XHTML5】
<?xml version="1.0" encoding="utf-8"?>
<meta charset="utf-8" />

(参考:従来の「HTML 4.01」文書で使 われたmetaタグによる文字コード指定は以下のようなものでした。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
これをみると、HTML5では実にシンプルになりましたね)

 HTML構文の場合、XML宣言は不要なのでmetaタグによる文字コードを指定するわけですが、HTML5では必須ではありません。結果としてHTML構文で作成した文書に文字コードの指定が存在しないことになりますが(HTML5文書がUTF-8”の文字コードで保存されていれば)文法的にはエラーとならず、ブラウザに組み込まれたHTMLパーサ(構文解析を行うためのプログラム)またはXMLパーサの定義により、デフォルトの"UTF-8"の文字コードの文書と解釈します。ただし、これもブラウザによりけりで、Google ChromeはHTML文書中にエンコード指定がない場合には、既定のエンコードである“Shift_JIS”の文字コードでページが表示されます。結果として、Google Chromeのブラウザを利用したユーザーに対しては、文字化けが起ります。そういったブラウザもあることを念頭に入れておきましょう。なお、XML宣言、metaタグ両方に文字コードを指定した場合は、もちろん、同じ文字コードを指定しなければなりません。

■DOCTYPE宣言

 HTML5にはHTML4.01やXHTML1.0、XHTML1.1で定義されているようなDTD(文書型定義)はありませんがDOCTYPE宣言を記載します。DOCTYPE宣言は以下のようにHTML構文、XML構文共にシンプルなものになっています。文字列“DOCTYPE”は半角大文字で記述しければなりません。文字列 “html”は半角小文字で記述しなければなりません。HTML5ではHTML構文、XML構文共に必須の宣言ですので記載忘れしないようにしましょう。なお、ブラウザの表示モードはどのブラウザも標準モードとなります。言い方を変えればどのブラウザも標準モードにするため、このDOCTYPE宣言を使います。

<! DOCTYPE html>

 XML構文の場合、このDOCTYPE宣言は必須ではないということなのですがDOCTYPE宣言を記載しなければ、XHTML 1.0 Transitionalの文書と解釈されてしまいますので注意しましょう。

■名前空間

 XML構文は以下のように、html要素に“xmlns=http://www.w3.org/1999/xhtml”の名前空間宣言を配置します。

<html xmlns="http://www.w3.org/1999/xhtml">

■言語コード

 html要素に“lang”属性を指定してその文書の言語コードを指定できます。

[HTML構文]
 <html lang="ja">

[XML構文]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

 XHTML文書で指定できたxml:lang属性(xml:lang="ja")はXHTML5文書でも指定することができます。言語コードの指定は必須ではありません。ただ、ブラウザやロボット検索エンジン、翻訳サービスといった情報を収集する相手にこちらの文書の情報を正確に伝えておくことは長い目でみれば有益であると考えることもできると思いますので本稿は文字コード指定を推奨します。

■大文字、小文字の区別

・要素名
 HTML5では要素名の表記において、大文字、小文字が区別され、要素名は例外を除き、小文字表記にします。

・属性名
 属性名も同様で、属性名の表記において、大文字、小文字が区別され、属性名は例外を除き、小文字表記にしなければなりません。

・属性値
 属性値については、属性値の中のすべての ASCII 文字を小文字で表記しなければならないという属性値もあることから小文字に統一されることをおすすめします。なお、ASCII ではない文字に対しては適用されない属性値やHTML 以外の要素に与えられた属性の値には大文字と小文字を混合させることができるなどの例外属性値もあります。また、属性値については属性値の中に改行や複数の連続する空白文字を含まない、値をシングルクォーテーションまたはダブルクォーテーションの引用符でくくるのはHTML4.01とXHTMLのときと同じです。

■空要素について

 次にあげる要素は空要素になりますが、XML構文のXHTML5文書においては、XHTML文書と同様に、末に半角スペースとスラッシュが入ります。例えば、br要素なら、<br />となります。このようにXHTML5文書の空要素においては半角スペースとスラッシュが最後に入っていないとエラーとなりますが、HTML構文のHTML5文書の場合は既存のXHTML文書の再利用を可能にするため、互換性を持たせるため、半角スペースとスラッシュ入りの空要素の使用が認めれれています。

・area 要素
・base 要素
・br 要素
・col 要素
・embed 要素
・hr 要素
・img 要素
・input 要素
・keygen 要素
・link 要素
・meta 要素
・param 要素
・source 要素
・track 要素
・wbr 要素

■そのほか

<

 ここに記載されている以外のHTML5のルールは別項に記載してあります。また、当サイト内にはHTMLのことはHTMLのコーナーに、XHTMLのことはXHTMLのコーナーに、CSSのことはCSSのコーナーにそれぞれ書式やルールについての記載がありますので併せてご参照ください。

サイト・目次 | HTML5編・目次

Copyright (C) 2011 http://www.xml.vc/ All Rights Reserved.