HTML5の文法ルール

HTML5の文法ルールとHTML4.01と比較しながら解説

ファイルの拡張子

　HTML5で記述したファイルの拡張子やコンテントタイプはHTML4.01から変わりありません。拡張子は「.html」や「.htm」を、コンテントタイプは「text/html」です。

DOCTYPE宣言

HTML文章の一番先頭に記述するDOCTYPEは、HTML4.01では以下のように記述しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
　 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5では、たったこれだけになります！

<!DOCTYPE html>

使用するツールによっては、上記のDOCTYPE宣言をうまく扱えない可能性もあるため、 "about:legacy-compat" を付けておくと尚良いでしょう。

<!DOCTYPE HTML SYSTEM "about:legacy-compat">

＊大文字・小文字は区別されず、ダブルクオート・シングルクオートどちらでもOKです。

文字エンコーディングの指定

HTML4.01では以下のようにして文字エンコードを指定していました。

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5では、以下のようにして指定します。

<meta charset="UTF-8">

タグの記述のルール

終了タグを書かないタグ

br、img、input、meta、area、base、col、command、embed、hr、keygen、link、param、source、track、wbr

例えばこれらのタグはHTML4.01でも以下のようには書きません

<img> ～ </img>
<br> ～ </br>

HTML5では、以下のいずれかのように記述します。

<br> <br/> <br />

記述を省略できるタグ

これらのタグは完全に記述を省略することもできます。

html、head、body、colgroup、tbody

Boolean値を取る属性値

値をfalse(偽)にしたい属性は、指定そのものを省略します。
値をtrue(真)にしたい属性は、属性値を省略(例 checked="")するか、属性値の値を属性の名前にします。(例 checked="checked")

<input type="checkbox" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">

属性の引用符

HTML5での属性値のを指定には「'」「"」で囲むだけでなく、クォーテーションを省略する事もできます。

<input type="text">
<input type='text'>
<input type=text>

＊属性値に「=」などを含む場合は「"」などで囲んで下さい。

HTML5のサンプルソース

HTML5での簡単なサンプルソースです。文法のチェックや文章構造の確認はこちらで紹介するツールを使用してみて下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>タイトル</title>
<link rel="stylesheet"  href="/css/style.css"/>
<script src="/js/sample.js"></script>
<style>
h1 { color: blue; }
</style>
</head>
<body>
<!-- コンテンツ部分 -->
<h1>タイトル!</h1>
あいうえお
</body>
</html>