HTML(5) コード規約

---

HTML コーディング規約

多くの Web 開発者は HTML のコード規約をほとんど知らない。

2000年から2010年にかけて、多くの Web 開発者が HTML から XHTML に移行した。

XHTML を使用することで、開発者は次第に良い HTML コーディング規約を身につけた。

一方、HTML5 に対しては、より良いコード規約を形成すべきであり、以下にいくつかの規約の提案を提供する。

---

正しいドキュメントタイプを使用する

ドキュメントタイプ宣言は HTML ドキュメントの最初の行に置く：

他のタグと同様に小文字を使用したい場合は、以下のコードを使用できる：

---

小文字の要素名を使用する

HTML5 の要素名は大文字と小文字を使用できる。

小文字を使用することを推奨する：

• 大文字と小文字を混在させるスタイルは非常に悪い。
• 開発者は通常、小文字を使用する（XHTML と同様）。
• 小文字のスタイルはよりすっきりして見える。
• 小文字は書きやすい。

---

すべての HTML 要素を閉じる

HTML5 では、すべての要素を閉じる必要はありませんが（例: <p> 要素）、すべての要素に終了タグを追加することをお勧めします。

非推奨:

推奨:

---

空の HTML 要素を閉じる

HTML5 では、空の HTML 要素も必ずしも閉じる必要はありません：

このように書くことができます：

このように書くこともできます：

XHTML と XML ではスラッシュ (/) が必須です。

XML ソフトウェアにあなたのページを使用させたい場合、このスタイルを使用するのが非常に良いです。

---

小文字の属性名を使用する

HTML5 の属性名は大文字と小文字を使用できます。

小文字の属性名を使用することを推奨します:

• 大文字と小文字を併用することは非常に悪い習慣です。
• 開発者は通常、小文字を使用します（XHTML と同様）。
• 小文字のスタイルはよりすっきりして見えます。
• 小文字は書きやすいです。

非推奨：

推奨：

---

属性値

HTML5 の属性値は引用符なしでも構いません。

属性値には引用符を使用することを推奨します:

• 属性値にスペースが含まれる場合は引用符が必要です。
• 混在スタイルは推奨されません。スタイルを統一することをお勧めします。
• 属性値に引用符を使用すると読みやすくなります。

次の例の属性値はスペースを含み、引用符を使用していないため、機能しません:

以下はダブルクォートを使用しており、正しいです：

---

画像属性

画像は通常altalt 属性を使用します。画像が表示できない場合は、その代替として表示されます。

画像の寸法を定義しておくと、読み込み時に指定されたスペースを確保でき、ちらつきを減らせます。

---

スペースと等号

等号の前後にスペースを使用できます。

ただし、スペースは少なく使用することを推奨します:

---

1行のコードを長くしすぎない

HTML エディタを使用する際、コードを左右にスクロールするのは不便です。

各行のコードはできるだけ 80 文字未満にしてください。

---

空行とインデント

理由もなく空行を追加しないでください。

論理的な機能ブロックごとに空行を追加すると、読みやすくなります。

インデントにはスペース2つを使用し、TAB の使用は推奨しません。

短いコードの間には、不必要な空行やインデントを使用しないでください。

---

<html> と <body> の省略?

標準 HTML5 では、<html> と <body> タグは省略できます。

以下の HTML5 ドキュメントは正しいです:

<html> と <body> タグの省略は推奨しません。

<html> 要素はドキュメントのルート要素であり、ページの言語を記述するために使用します：

言語を宣言するのは、スクリーンリーダーや検索エンジンのためです。

<html> または <body> を省略すると、DOM や XML ソフトウェアでクラッシュする可能性があります。

<body> を省略すると、旧バージョンのブラウザ（IE9）でエラーが発生します。

---

<head> の省略?

標準 HTML5 では、<head> タグは省略できます。

デフォルトでは、ブラウザは <body> の前のコンテンツをデフォルトの <head> 要素に追加します。

	現在、head タグの省略はまだ推奨されていません。

---

メタデータ

HTML5 では <title> 要素は必須であり、タイトル名はページのテーマを説明します:

タイトルと言語は、検索エンジンがページのテーマをすぐに理解できるようにします:

---

HTML コメント

コメントは<!--と-->の中に書くことができます:

長いコメントは<!--と-->の中で改行して書けます:

長いコメントの最初の文字はスペース2つでインデントすると、読みやすくなります。

---

スタイルシート

スタイルシートには簡潔な構文を使用します（type 属性は必須ではありません）:

短いルールは1行で書けます:

長いルールは複数行で書けます:

• 左中括弧はセレクタと同じ行に置きます。
• 左中括弧とセレクタの間にスペースを1つ入れます。
• インデントにはスペース2つを使用します。
• コロンとプロパティ値の間にスペースを1つ入れます。
• カンマや記号の後にはスペースを1つ使用します。
• 各プロパティと値の終わりにはセミコロンを使用します。
• 属性値にスペースが含まれる場合のみ引用符を使用します。
• 右中括弧は新しい行に置きます。
• 各行は最大80文字です。

	カンマとコロンの後にスペースを追加するのは一般的なルールです。

---

HTML で JavaScript を読み込む

簡潔な構文で外部スクリプトファイルを読み込みます（type属性は必須ではありません）：

---

JavaScript を使用して HTML 要素にアクセスする

不適切なHTML形式はJavaScriptの実行エラーを引き起こす可能性があります。

以下の2つのJavaScriptステートメントは異なる結果を出力します：

HTML内のJavaScriptでも可能な限り同じ命名規則を使用してください。

JavaScriptコード規約を参照。

---

小文字のファイル名を使用する

ほとんどのWebサーバー（Apache、Unix）は大文字と小文字を区別します： london.jpg は London.jpg ではアクセスできません。

他のWebサーバー（Microsoft、IIS）は大文字と小文字を区別しません： london.jpg は London.jpg または london.jpg でアクセスできます。

一貫したスタイルを保つ必要があります。小文字のファイル名に統一することをお勧めします。

---

ファイル拡張子

HTMLファイルの拡張子は次のものを使用できます.html（または.htm)。

CSSファイルの拡張子は.css 。

JavaScriptファイルの拡張子は.js 。

---

.htm と .html の違い

.htm と .html の拡張子ファイルは本質的に違いはありません。ブラウザとWebサーバーはどちらもそれらをHTMLファイルとして扱います。

違いは次の通りです：

.htm は初期のDOSシステムで使用されていました。そのシステムでは拡張子は3文字のみでした。

Unixシステムでは拡張子に特に制限はなく、通常は .html が使用されます。

技術的な違い

URLがファイル名を指定していない場合（例：http://www.example.com/css/）、サーバーはデフォルトのファイル名を返します。通常、デフォルトのファイル名は index.html、index.htm、default.html、default.htm です。

サーバーがデフォルトファイルとして "index.html" のみを設定している場合、ファイル名は "index.htm" ではなく "index.html" にする必要があります。

ただし、通常サーバーは複数のデフォルトファイルを設定できるため、必要に応じてデフォルトのファイル名を設定できます。

いずれにせよ、HTMLの完全な拡張子は ".html" です。

その他の拡張子