HTML5

HTML の記述法

　HTMLの記述はそれほど難しくはありませんが、いくつか注意しておくべき点もあります。

HTML5 で記述するときの注意

　文書型宣言の簡略化や一部タグの属性を記述する必要がなくなっただけでなく、HTML5は HTMLの記述ルールが緩やかになっています。

基本的には XHTML1.0 形式と HTML4.01 形式のハイブリッド

　HTML5は、記述ルールの厳しい XHTML1.0形式でも、緩やかな HTML4.01形式でも、どちらで記述してもよいことになっています。また、両方の形式の記述法を混ぜてもかまいません。

　HTML5になったからと言って、記述法が変わるわけではありません。

一部のタグの終了タグを省略できる

　HTML4.01の書式と同じように、<p> タグや <li> タグの終了タグを省略できます。終了タグを省略できるかどうかはタグごとに決まっています。終了タグを省略するには、どのタグなら省略できるのかを覚えていないといけないため、必ずしも省力化につながりません。当サイトではあまり推奨できないため省略しておりません。

<div>
	<ul>
		<li>1つ目の項目
		<li>2つ目の項目
	</ul>
	<p>ココに改行が入ります。<br>
	改行後のフレーズです。
</div>

　この例では、li要素の終了タグがありません。li要素は、次に別の li要素が来るか、もしくは ul要素の最後であれば、その li要素の終了タグは省略しても良いことになっています。

　また、この例では、p要素の終了タグも省略されています。p要素は、親要素（a要素を除く）の中で最後に来るのであれば、その終了タグを削除しても良いことになっています。

　このように、いつでも終了タグを省略しても良いわけではありません。要素ごとに、どのような場合に終了タグを省略しても良いかが規定されていますので、注意してください。

タグや属性は大文字で書いてもよい

　XHTML1.0では、タグや属性を必ず小文字で記述することになっていましたが、HTML5では大文字小文字を区別しません。当サイトではタグも属性名も小文字で記述します。

空要素のスラッシュ（ / ）は不要

　HTML5では空要素と呼ばれる要素が規定されています。これに該当する要素は、以下の通りです。

• area 要素（イメージマップのハイパーリンク）
• base 要素（基準 URL ）
• br 要素（改行）
• col 要素（テーブルの列）
• command 要素（コマンド）
• embed 要素（プラグイン）
• hr 要素（テーマの変わり目）
• img 要素（イメージ）
• input 要素（フォームを構成する様々な入力部品を作成する）
• keygen （フォーム送信時にキーを発行する）
• link 要素（ドキュメントの関連性）
• meta 要素（ドキュメントのメタデータ）
• param 要素（プラグインの初期パラメータ）
• source 要素（メディア・ソース）

　XHTML1.0では、<img> など空要素の最後にスラッシュ（ / ）を記述しておく必要がありました。HTML5ではこのスラッシュは不要です。当サイトでは空要素のスラッシュを順次、省略しています。

　空要素は、自身にコンテンツを一切持たない要素を表します。br要素であれば、<br> または <br /> とマークアップしますが、<br></br>といったように、開始タグと終了タグを使ってマークアップすることはできません。空要素では、<br /> のように終端スラッシュを入れた場合、HTMLシリアライゼーションにおいては無視されます。

要素のマークアップのルール

　HTML5仕様では、HTMLシリアライゼーションでも、XML(XHTML)シリアライゼーションのような記述方法を認めています。これは、現在、広く普及した HTML1.0のマークアップを HTML5に移行しやすくするために配慮されたものです。

　皆さんは、HTMLシリアライゼーションとしてページを用意する場合は、どちらの記述方法を採用しても構いませんが、それぞれの記述方法を混在させるのはお勧めできません。例えば、ある段落では p要素の終了タグを入れているにもかかわらず、別の段落の p要素には終了タグを入れていないという記述方法です。HTMLコードのメンテナンスを考えると、どちらか一方の記述方法に統一することをお勧めします。

　では、どちらの記述方法を採用する方がよいのでしょうか。私は、XML(XHTML)シリアライゼーションのような記述方法を好んで使っています。これまで XHTML1.1を使ってきたため、こちらの方が慣れているというのもありますが、終了タグがないマークアップは非常に見づらいというのが大きな理由です。

　次の HTMLコードは、HTMLシリアライゼーションでは認められています。

<table>
	<tr>
		<th>カラム１
		<th>カラム２
	<tr>
		<td>データ１
		<td>データ２
</table>

　table要素の終了タグ以外は、一切終了タグがありません。この例は、表のセル内の文字数が少ないため見やすくなっていますが、もしセル内の文字が増えてくると、どこまでがセルのデータの終わりなのかが、とてもわかりづらくなります。

　また、いつでも終了タグを省略しても良いわけではありません。どの状況なら終了タグを省略しても良いかが、要素によって大きく異なります。このすべてのパターンを覚えるのは現実的ではありません。マークアップのミスを防ぐためにも、終了タグの省略は避けた方がよさそうです。

　終了タグを省略すると、別の問題も発生します。マークアップの仕方やブラウザにもよりますが、スタイルシートで期待通りのスタイルが適用されないことがあります。

　当サイトでは、HTMLシリアライゼーションを前提に解説しながらも、旧来の XHTML1.1のマークアップの作法に従います。

コンテンツ属性のマークアップ

　コンテンツ属性のマークアップは 4つの方法が規定されています。コンテンツ属性の種類や、コンテンツ属性の値に応じて使い分ける必要があります。

空属性（ブール属性）の値を省略できる

たとえば、<input type="checkbox"> タグはチェックボックスを表示します。ページが表示されたときからこのチェックボックスにチェックを付けておきたいときは、<input type="checkbox" checked> と書きます。この checked属性は、<input> タグに追加されていれば初めからチェックが付き（checked属性が true、真になる）、追加されていなければチェックが付きません（checked属性が false、偽になる）。タグにその属性を含めるだけで真になる属性のことを「空属性（ブール属性）」と言います。

　XHTML1.0の場合、空属性（ブール属性）にも必ず属性値が必要でした。HTML5では、空属性（ブール属性）の属性値を省略できます。当サイトでは空属性（ブール属性）の値を省略していきます。

属性値をダブルクオートで囲む必要がない

　コンテンツ属性の値に、スペース、ダブルクオート（ " ）、シングルクオート（ ' ）、イコール記号（ = ）、小なり記号（ < ）、大なり記号（ > ）、バックスラッシュ（ ` ）が含まれていなければ、属性の値をダブルクオート（ " ）またはシングルクオート（ ' ）で囲む必要がなくなりました。当サイトでは基本的に属性値をダブルクオートで囲んでいます。

<input type=radio name=gender value=male>

また、属性の名前と値の間に入れるイコール記号の前後にスペースを入れても構いません。

<input type = radio name = gender value = male>

なお、終端スラッシュを入れる場合は、そのスラッシュの前にスペースを必ず入れなければいけません。

<input type=radio name=gender value=male />

シングルクォートを使う構文

　コンテンツ属性の値に、シングルクォーテーション（ ' ）が含まれていなければ、シングルクォーテーションを使って、その値をマークアップすることができます。

<input type='radio' name='gender' value='male'>

また、属性の名前と値の間に入れるイコール記号の前後にスペースを入れても構いません。

<input type = 'radio' name = 'gender' value = 'male'>

なお、終端スラッシュを入れる場合は、そのスラッシュの前にスペースを入れても構いませんが、入れなくても構いません。。

<input type='radio' name='gender' value='male' />

ダブルクォートを使う構文

　コンテンツ属性の値に、ダブルクォーテーション（ " ）が含まれていなければ、ダブルクォーテーションを使って、その値をマークアップすることができます。

<input type="radio" name="gender" value="male">

　当サイトで提示するマークアップは、この構文を採用しています。

　また、属性の名前と値の間に入れるイコール記号の前後にスペースを入れても構いません。

<input type = "radio" name = "gender" value = "male">

なお、終端スラッシュを入れる場合は、そのスラッシュの前にスペースを入れても構いませんが、入れなくても構いません。。

<input type="radio" name="gender" value="male" />