[HTML5] HTML5の書式について学ぶ
ここではHTML5の基本的な書式について説明します。
広 告
目次
前提条件
- なし
動作確認端末
- なし
1. DOCTYPE宣言
HTMLファイル（拡張子が.htmlのファイル）を作成するためには、まず先頭行にDOCTYPE（ドックタイプ）宣言を記述する必要があります。DOCTYPE宣言では、「このファイルがHTMLであること」「どのHTMLバージョンで作成されているか」を宣言します。
HTML5のDOCTYPE宣言は以下のように記述します。
HTM5のDOCTYPE宣言
<!DOCTYPE html>
Note : 以前のHTML4.01やXHTML1.0では以下のように記述していました。HTML5の場合は、だいぶシンプルな記述になったことが見て取れます。
HTML4.01 Transitionalの場合
<!DOCTYPE html public "-//W3C//DTD HTML4.01 Transitional//EN">
XHTML1.0 Strictの場合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
以前のDOCTYPE宣言には、ファイル内であらかじめ使用するタグや属性を定義するためにDTD（Document Type Definition）を記述する必要がありましたが、HTML5ではそれがなくなりました。
2. タグと要素の形式
タグとは<記号と>記号で囲った要素名を指します。タグには開始タグと要素名の前に/（スラッシュ）が入った終了タグがあります。
開始タグ
<要素名>
終了タグ
</要素名>
要素
<要素名>要素の内容</要素名>
以下に、HTMLの実例を示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<body>
<p>本文</p>
</html>
<html>が開始タグ、</html>が終了タグで、<html>と</html>でマークアップされたテキストの他の要素がhtmlの要素になります。
要素は必ず親となる要素の入れ子になっている必要があります。
正しい例
<p><span>正しく入れ子になっています。</span></p>
誤った例（開始タグと終了タグが前後している）
<p><span>誤った例です</p></span>
3. 属性
属性とは、要素の持つ付加的な情報をタグの中に記述されたものです。属性を記述することで、要素に対してより細かな指定が可能になります。
<要素名 属性名="属性値">要素の内容</要素名>
属性の中にはグローバル属性と呼ばれるものがあります。グローバル属性とは、HTMLのどの要素に対して共通して使用できる属性のことです。グローバル属性には、以下のようなものがあります。
| 属性名 | 内容 |
| accesskey | キーボード、ショートカットキーの設定 |
| class | スタイルシートのクラスを指定 |
| contenteditable | 編集不可／不可を指定 |
| contextmenu | menu要素のid値を指定してコンテキストメニューを表示 |
| dir | テキストの方向を指定 |
| draggable | ドラッグの有効／無効を指定 |
| hidden | 関連性の有り／無しを指定 |
| id | 要素を識別する固有のid（識別子）を指定 |
| lang | 言語を指定 |
| spellcheck | スペルチェックの有効性 |
| style | スタイルシートを指定 |
| tabindex | タブ、インテックスを指定 |
| title | タイトルを指定 |
| data | 独自データを指定 |
属性の中には、checkedのような真偽値（チェックあり／なしのような２つの状態を持つ値）を指定する属性では、いくつかの記述方法があります。
以下の例は、すべてチェックありの状態を示しています。
<input type="checkbox" checked> <input type="checkbox" checked=""> <input type="checkbox" checked="checked">
check属性を定義した時点でチェックありとなります。そのため、例えば以下のように記述した場合でもチェックありと解釈されるため、注意が必要です。
<input type="checkbox" checked="false">
4. 文字実体参照
<や>などの要素を構成する文字は、そのままHTMLファイル内に記述してしまうと要素として判断されてしまい、正常に表示されません。そのため、そのような文字を記述する場合には、文字実体参照と呼ばれるキーワードを使用します。
| 文字 | 文字実体参照 |
| （半角スペース） | |
| < | < |
| > | > |
| & | & |
| “ | " |