DOCTYPE宣言

HTML5 )

<!DOCTYPE html>

HTML5のDOCTYPE宣言の役割は、Webブラウザに対しての以下の2つで、必須項目。ドキュメントの先頭(1行目)に記述します。

  1. HTML5の標準仕様に従った記述を行っていることの宣言。(HTMLのバージョンの宣言。)
  2. Webブラウザのレンダリングを「標準モード」に切り替えます。(DOCTYPEスイッチ)

HTML5以前のバージョンのHTMLドキュメントでは、DTD(Document Type Definition)と関連付けて、HTMLドキュメントがどのバージョンのHTMLで書かれているか示す必要がありましたが、HTML5では、公式のDTDは存在しないので、HTML5のDOCTYPE宣言はDTD関連の記述をする必要がなくなりました。


HTML4.01 例)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

文字エンコーディング宣言。

ドキュメントの文字コードをcharset属性で指定し、文字エンコーディング宣言を表します。値となる文字コードはUTF-8を指定します。また、文字コードは、ほかのメタデータを記述する前に記述します。

なお、文字コードを指定しているhttp-equiv属性を持つmeta要素と、charset属性持つmeta要素の両方をドキュメントに記述することはできませんので従来の文字コードの指定形式は代替扱いとなりました。

HTML4.01 例)

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

HTML5 例)

<meta charset="UTF-8">

余談ですが、文字コードにUTF-8を指定し文字化けが起きる場合は、HTMLファイルがUTF-8で保存されていない可能性があります。エディタの保存時のオプションや、エディタ自体の保存時の設定などでUTF-8で保存されているかどうかを確認し、Shift-JISなどほかの文字コードが指定されている場合はエディタでUTF-8にセットし上書き保存して下さい。

※エディタの設定でUTF-8とUTF-8Nがある場合は、UTF-8Nを選択して下さい。


スタイルシート言語とスクリプト言語の指定。

http-equiv属性のキーワードのcontent-style-typeや、content-script-typeがWHATWG WikiのPragmaExtensionsより削除されました。従って、ドキュメントに使用されているスタイルシート言語や、スクリプト言語を指定するメタデータは指定できません。W3C マークアップ検証サービスではエラーとなるようです。

<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">

link要素に指定するキーワード(stylesheet)とセットで指定するMIMEタイプは、text/cssがデフォルトで適用されるため、type属性が省略できます。また、script要素のtype属性で指定するMIMEタイプも、text/javascriptがデフォルトで適用されるため、type属性が省略できます。

HTML4.01 スタイルシート 例)

<link rel="stylesheet" type="text/css" href="ファイル名.css">

HTML5 スタイルシート 例)

<link rel="stylesheet" href="ファイル名.css">

HTML4.01 JavaScript 例)

<script type="text/javascript" src="ファイル名.js"></script>

HTML5 JavaScript 例)

<script src="ファイル名.js"></script>

要素名、属性名の大文字と小文字。

HTML5ではルート要素のhtml要素を含め要素、属性名は大文字、小文字の区別をしません。


終了タグについて。

HTML5では空要素(終了タグが存在しない要素)の、area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbrなど。空要素は開始タグを>で閉じますが、広く普及しているXHML1.*からの移行を考え、 />で閉じることもできます。ただし、同じドキュメント内で混在して使うことは避けたほうが良いと思います。

例)

<br>
<br />

終了タグが省略できるタグ。

li, dt, dd, p, rt, rp, optgroup, option, colgroup, thead, tbody, tfoot, tr, td、thなど。ただし、例えばli要素の終了タグを省略する場合は直後にli要素が続く場合など省略するにはそれぞれの要素に条件があります。

属性値の引用符。

属性値は " (ダブルクォーテーション)または ' (シングルクォーテーション)で囲います。引用符はダブル、シングルのどちらを使っても良いのですが、ダブルクォーテーションの方が一般的(と筆者は思います)。また、同じドキュメント内で混在して使うことは避けたほうが良いと思います。

なお、属性値がa(A)~z(Z)、0~9の半角英数字、-(ハイフン).(ピリオド)_(アンダースコア);(コロン)で構成されている場合は属性値を囲う引用符は省略できますが、引用符を使用することが推奨されています。

例)

style="text-decoration: line-through;"


HTML5に追加される要素。

section要素article要素main要素aside要素header要素footer要素nav要素figure要素figcaption要素、template要素、video要素audio要素source要素track要素embed要素mark要素、progress要素、meter要素、time要素ruby要素rt要素rp要素bdi要素wbr要素、canvas要素、datalist要素、keygen要素、output要素。


HTML5に含まれない要素。


CSSで代替処理が可能な要素。

basefont要素、big要素、center要素、font要素、strike要素、tt要素。


ユーザビリティとアクセシビリティを損なう要素。

frame要素、frameset要素、noframes要素。


その他。

acronym要素、applet要素、isindex要素、dir要素。また、noscript要素はHTML構文のみ。XML構文では使用できません。


使用できない属性。

それぞれの要素のページをご覧下さい。


参考:HTML5 Differences from HTML4 W3C Working Draft 18 September 2014