HTML5ドキュメントの例)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">

<link rel="stylesheet" href="example.css">
<script src="example.js"></script>

<title></title>
</head>
<body>

</body>
</html>

DOCTYPE宣言

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

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

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

HTML5 )

<!DOCTYPE html>

html要素と言語指定

ルート要素であるhtml要素の開始タグをDOCTYPE宣言のすぐあとに記述し、開始タグにlang属性でドキュメントの言語を指定します。

例)

<html lang="ja">

head要素

title要素、meta要素、link要素などページの基本的な情報を記述します。

例)

<head></head>

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

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

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

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">

title要素

ページのタイトルを記述します。

例)

<title></title>


body要素

ブラウザで表示する内容を記述します。

例)

<body></body>