基本的な書き方
HTML5ではコンテンツを開始タグと終了タグでマークアップすることにより、コンテンツが内容を明確にします。
マークアップした部分は下のサンプルのような構造に、全体を「要素」と呼びます。タグの大文字と小文字は区別されることがありません。
※小文字で記述することが一般的です。
入れ子(ネスト)について
複数のHTMLタグでマークアップする場合、開始タグと終了タグの１セット、他のタグの中に完全に入った状態(入れ子)にしないといけません。
下のサンプルは、良い例と悪い例です。
良い例
<body>
<h1>
ちからこぶ
</h1>
</body>悪い例
<body>
<h1>
ちからこぶ
</body>
</h1>段階構造(ツリー構造)について
入れ子の形で記述すると断層構造が作られます。
このとき、上位階層の要素を「親要素」、下位階層の要素を「子要素」と呼びます。たとえば、下のサンプルでは「<body>」でマークアップした部分は<p>の親要素、<p>でマークアップした部分は<body>の子要素となります。
空要素の記述
エンコードの種類をした<meta>のように、コンテンツのマークアップを行わず、単独で機能する要素もあります。
これらは、「空要素(Void要素)」と呼ばれ、終了タグをもたないことが特徴です。
そのため、下のサンプルのように開始タグのみを記述します。
※XHTMLとの互換性を保つため、空要素の開始タグには末尾に「/」を入れて記述することもできます。
<meta>と<meta />の記述を混在させることも認められています。
属性の記述
開始タグには要素ごとに用意された属性を記述し、さまざまな設定を指定することができます。
属性は右のように半角スペースで区切り「属性名=”値”」というルールで記述します。
値は「”(ダブルクォーテーション)」または「'(シングルクォーテーション)」で囲むか、クォーテーションで囲まずに記述します。
また、「ブーリアン属性」と呼ばれる属性の場合、下のサンプルのように値を省略して属性名のみを記述します。もしくは、属性名と同じ値または空の値を指定する形で記述します。
開始タグと終了タグの省略
要素の中には、開始タグや終了タグを省略して記述することが認められてものがあります。
たとえば、<p>は終了タグの</p>を省略することができます。
ただし、マークアップした範囲は自動で判別されることになるので、基本的には省略せずに記述することをおすすめします。
| 開始タグと終了タグの両方を省略できるもの | <html>、<head>、<body> など |
|---|---|
| 終了タグを省略できるもの | <p>、<li>、<tr>、<th>、<td> など |