*このページは web-dou.com のアーカイブです。(2025年 サイト統合)

HTML5の文法ルール

TOP > HTML > HTML5 >  HTML5の文法ルール
X B! FB LINE

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

ファイルの拡張子

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

DOCTYPE宣言

HTML文章の一番先頭に記述するDOCTYPEは、HTML4.01では以下のように記述しました。
1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
　 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5では、たったこれだけになります！
1
<!DOCTYPE html>
使用するツールによっては、上記のDOCTYPE宣言をうまく扱えない可能性もあるため、 "about:legacy-compat" を付けておくと尚良いでしょう。
1
<!DOCTYPE HTML SYSTEM "about:legacy-compat">

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

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

HTML4.01では以下のようにして文字エンコードを指定していました。
1
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5では、以下のようにして指定します。
1
<meta charset="UTF-8">

タグの記述のルール

終了タグを書かないタグ

br、img、input、meta、area、base、col、command、embed、hr、keygen、link、param、source、track、wbr
例えばこれらのタグはHTML4.01でも以下のようには書きません
1
2
<img> ～ </img>
<br> ～ </br>
HTML5では、以下のいずれかのように記述します。
1
<br> <br/> <br />

記述を省略できるタグ

これらのタグは完全に記述を省略することもできます。
html、head、body、colgroup、tbody

Boolean値を取る属性値

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

属性の引用符

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

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

HTML5のサンプルソース

HTML5での簡単なサンプルソースです。 文法のチェックや文章構造の確認はこちらで紹介するツールを使用してみて下さい。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>タイトル</title>
<link rel="stylesheet"  href="/app/web-dou/css/style.css"/>
<script src="/app/web-dou/js/sample.js"></script>
<style>
h1 { color: blue; }
</style>
</head>
<body>
<!-- コンテンツ部分 -->
<h1>タイトル!</h1>
あいうえお
</body>
</html>