Web 開発者は、HTML で使用するコーディング スタイルと構文についてよくわからないことがよくあります。
2000 年から 2010 年にかけて、多くの Web 開発者が HTML から XHTML に変換しました。
XHTML を使用すると、開発者は有効な「整形式」コードを記述する必要があります。
HTML5 は、コード検証に関してはもう少し寛容です。
HTML5 では、独自のベスト プラクティス、スタイル ガイド、およびコーディング規約を作成する必要があります。
スタイルを論理的に使用すると、HTML が他の人にとって理解しやすくなり、使いやすくなります。
将来的には、XML リーダーなどのプログラムで HTML を読み取る必要が生じる可能性があります。
整形式の「XHTML のような」構文を使用する方が賢明です。
注: スタイルは常にスマート、クリーン、クリーン、整った形を保ってください。
常にドキュメントの最初の行で doctype を宣言します。
<!DOCTYPE html>
常に小文字のタグを使用する場合は、以下を使用できます。
<!doctype html>
HTML5 では、要素名に大文字と小文字を混在させることができます。
小文字の要素名を使用することをお勧めします。
あまり良くありません:
<SECTION> <p>This is a paragraph.</p> </SECTION>
ひどい：
<Section> <p>This is a paragraph.</p> </SECTION>
悪くない：
<section> <p>This is a paragraph.</p> </section>
HTML5 では、すべての要素 (<p> 要素など) を閉じる必要はありません。
すべての HTML 要素を閉じることをお勧めします。
見た目が悪い:
<section> <p>This is a paragraph. <p>This is a paragraph. </section>
いいね：
<section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section>
HTML5 では、空の要素を閉じることはオプションです。
これを許可します:
<meta charset="utf-8">
これも許可します:
<meta charset="utf-8" />
XHTML および XML ではスラッシュ (/) が必要です。
XML ソフトウェアがページにアクセスすることが予想される場合は、これを習慣にしておくことをお勧めします。
HTML5 では、大文字と小文字を混合した属性名を使用できます。
属性名は小文字にすることをお勧めします。
見た目が悪い:
<div CLASS="menu">
良さそうです:
<div class="menu">
HTML5 では、引用符で囲まれていない属性値を許可します。
属性値を引用符で囲むことをお勧めします。
値にスペースが含まれているため、この属性値は無効です:
<table class=table striped>
これは機能します:
<table class="table striped">
画像には常に alt 属性を使用してください。 このプロパティは、画像を表示できない場合に重要です。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
画像の寸法を常に定義します。 これを行うと、ブラウザが画像を読み込む前にスペースを確保するため、ちらつきが軽減されます。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
等号の前後のスペースは有効です:
<link rel = "stylesheet" href = "styles.css">
しかし、空白を取り除いた方が読みやすくなります。 But space-less is easier to read, and groups entities better together:
<link rel="stylesheet" href="styles.css">
HTML エディタを使用する場合、HTML コードを読むために左右にスクロールするのは不便です。
80 文字を超えるコード行は避けてください。
理由もなく空行を追加しないでください。
読みやすくするために、大きなコード ブロックまたは論理ブロックを区切るために空行を追加します。
読みやすくするために、スペースを 2 つインデントしてください。 TAB は使用しないでください。
不必要な空行やインデントは使用しないでください。 短い項目と関連する項目の間に空行を使用したり、各要素をインデントしたりする必要はありません。
不要:
<body>
<h1>Famous Cities</1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
より良い：
<body> <h1>Famous Cities</1> <h2>Tokyo</h2> <p> Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family. </p> </body>
フォームの例:
<table>
<tr>
<th>Name</th>
<th>Description</th>
<tr>
<tr>
<td>A</td>
<td>Description of A</td>
<tr>
<tr>
<td>B</td>
<td>Description of B</td>
<tr>
</table>
リストの例:
<ol> <li>LondonA</li> <li>Paris</li> <li>Tokyo</li> </ol>
HTML5規格では、<html>タグと<body>タグは省略可能です。
次のコードは HTML5 として検証されます:
<!DOCTYPE html> <head> <title>Page Title</title> </head> <h1>This is a heading</h1> <p>This is a paragraph.</p>
<html> タグと <body> タグを省略することはお勧めしません。
<html> 要素はテキストのルート要素です。 ページの言語を指定するのに最適な場所です。
<!DOCTYPE html> <html lang="en-US">
宣言言語は、アクセシビリティ対応のアプリケーション (スクリーン リーダー) および検索エンジンにとって重要です。
<html> または <body> c を省略すると、DOM および XML ソフトウェアが破損する可能性があります。
<body> を省略すると、古いブラウザ (IE9) ではエラーが発生します。
HTML5 標準では、<head> タグも省略できます。
デフォルトでは、ブラウザは <body> より前のすべての要素をデフォルトの <head> 要素に追加します。
<head> タグを省略すると、HTML の複雑さを軽減できます。
<!DOCTYPE html> <html> <title>Page Title</title> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
注: Web 開発者にとって、タグを省略する習慣は馴染みがありません。 ルールの確立には時間がかかります。
<title> 要素は HTML5 では必須です。 可能な限り意味のある見出しを付けてください。
<title>HTML5 Syntax and Coding Style</title>
適切な解釈と正しい検索エンジンのインデックス付けを保証するには、言語と文字エンコーディングをドキュメントのできるだけ早い段階で定義する必要があります。
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>HTML5 Syntax and Coding Style</title> </head>
短いコメントは、<!-- の後にスペースを入れ、--> の前にスペースを入れて 1 行で記述する必要があります。
<!-- This is a comment -->
複数行にまたがる長いコメントは、<!-- と --> を使用して別々の行に記述する必要があります。
<!-- This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. -->
長いコメントはスペースを 2 つインデントすると読みやすくなります。
スタイルシートをリンクするには、単純な構文を使用してください (type 属性は必要ありません)。
<link rel="stylesheet" href="styles.css">
短いルールは、次のように 1 行に圧縮できます。
p.into {font-family:"Verdana"; font-size:16em;}
長いルールは複数の行に分割する必要があります:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
注: カンマまたはセミコロンの後にスペースを追加することは、すべての書き方の一般的なルールです。
外部スクリプトをロードするには、単純な構文を使用してください (type 属性は必要ありません):
<script src="myscript.js">
「乱雑な」HTML スタイルを使用すると、JavaScript エラーが発生する可能性があります。
これら 2 つの JavaScript ステートメントは異なる結果を生成します。
var obj = getElementById("Demo")
var obj = getElementById("demo")
可能であれば、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 を使用する必要があります。