Web 開発者が、HTML で使用するコーディングスタイルや構文についてよく分ってない場合があります。
2000～2010年に、多くの web 開発者は HTML から XHTML に切り換えました。
XHTML を使用することで、開発者は妥当性があり、且つ「整形式」のコードを書くことを余儀なくされました。
HTML5 は、コードの妥当性に関してはもう少しいいかげんです。
スタイルを使用すれば必然的に、他の人が HTML を簡単に理解し、使用できるようになります。
将来、XML リーダのようなプログラムが、あなたの HTML を読もうとするかもしれません。
整形式の「XHTML に閉じた」構文を使用することで、スマートにすることができます。
常に、スタイルをスマートで、整然として、クリーンで、整形式にしておいてください。
常に、文書の先頭行で文書タイプを宣言してください：
<!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 は、引用符なしの属性値を許容ます。
私達は、属性値を引用符で囲むことをお勧めます：
This will not work, because the value contains spaces:
<table class=table striped>
<table class=striped>
<table
class="striped">
画像には、常に "alt" 属性を追加します。この属性は、何らかの理由で画像を表示できない場合に重要です。 また、画像の幅と高さも常に定義します。ブラウザが、読み込む前に画像のスペースを予約できるので、ちらつきが軽減されます。
<img
src="html5.gif">
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">
<link
rel = "stylesheet" href = "styles.css">
<link rel="stylesheet" href="styles.css">
HTML エディタを使用するときに、HTML コードを読むため左右にスクロールするのは不便です。
80文字以上のコード行を避けるようにしてください。
理由もなく空白行を追加しないでください。
読みやすくするために、大きなコードブロックや論理的なコードブロックに分離するために空白行を追加します。
読みやすくするために、インデントとして2つのスペースを追加します。TAB は使用しないでください。
不要な空白行とインデントを使用しないでください。 すべての要素をインデントする必要はありません：
<body>
<h1>Famous Cities</h1>
<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</h1>
<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>London</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="ja">
言語を宣言することは、アクセシビリティ・アプリケーション（スクリーンリーダ）や検索エンジンには重要です。
<html> または <body> を省略すると、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>
Try it Yourself ❯
タグの省略は、web 開発者には馴染みがありません。ガイドラインとして確立するには時間が必要です 。
<title> 要素は、HTML5 では必須です。できるだけ意味のあるタイトルを付けてください：
<title>HTML5
Syntax and Coding Style</title>
適切な解釈と正しい検索エンジンのインデキシングを確保するためには、言語と文字エンコーディングを文書でのできるだけ 前の方で定義するべきです：
<!DOCTYPE html>
<html
lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5
Syntax and Coding Style</title>
</head>
HTML5 には、Web デザイナが <meta> タグを通してビューポートを制御できるようにするためのメソッドが導入されました。
ビューポートは、ユーザが見ることのできる Web ページの領域です。それはデバイスによって異なり、携帯電話はコンピュータ画面より小さくなります。
すべての Web ページに次の <meta> viewport 要素を含める必要があります：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> 要素は、ページの寸法とスケーリングを制御する方法についてブラウザに指示します。
width=device-width 部分は、ページの幅をデバイスの画面幅に合わせるように設定します（デバイスによって異なります）。
initial-scale=1.0 の部分は、ブラウザがページを最初に読み込んだときの初期ズームレベルを設定します。
viewport メタタグのないウェブページの例と、ビューポートメタタグのある web ページの例を次に示します：
チップ： 携帯電話やタブレットでこのページを閲覧している場合は、下の2つのリンクをクリックしてその違いを確認できます。
短いコメントは、次のように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">
短文規則（Short rules）は、次のように1行に圧縮して記述されます：
p.intro {font-family: Verdana; font-size: 16em;}
長文規則（Long rules）は、複数行にわたって記述する必要があります：
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
外部スクリプトをロードするための簡単な構文を使用します（type 属性は不要）：
<script src="myscript.js">
「汚い」（untidy）HTML スタイルを使用した結果、JavaScript のエラーが発生する可能性があります。
次の2つの JavaScript 文は、異った結果を産み出します：
一部の Web サーバ（Apache、Unix）では、ファイル名の大文字と小文字を区別します："london.jpg" には、"London.jpg" ではアクセスできません。
他の Web サーバ（Microsoft、IIS）では、大文字と小文字を区別しません："london.jpg" には、"London.jpg" や "london.jpg" という名前でアクセスできます。
大文字と小文字を混在して使用する場合は、極めて首尾一貫していなければなりません。
大文字と小文字を区別しないサーバから、区別するサーバに移行した場合、どんな小さなエラーでも Web を破壊してしまいます！
これらの問題を回避するには、常に小文字のファイル名を使用することです。
.htm 拡張子と .html 拡張子には違いはありません。どちらも、Web ブラウザや Web サーバによって HTML として扱われます。
違うのは文化です：
.htm は、システムが拡張子を 3 文字に制限していた初期の DOS システムの「匂い」がします。
.html は、この制限がない Unix オペレーティングシステムの 「匂い」がします。
URL がファイル名（例：http://www.w3schools.com/css/）を指定しない場合、サーバはデフォルトのファイル名を返します。 一般的なデフォルトのファイル名は、index.html、index.htm、default.html、default.htm です。
サーバがデフォルトのファイル名として "index.html" のみを使用するように設定されている場合、 ファイル名は "index.htm" ではなく "index.html" でなければなりません。
しかし、サーバは複数のデフォルトファイル名を持つ構成にすることもできます。通常は、必要に応じて多くの既定のファイル名を設定します。
とにかく、HTML ファイルの完全な拡張子は .html なので、使用しない理由はありません。