HTML(5) コード仕様

HTML(5) コード規範

Web 開発者の多くは HTML コードの規範について十分な理解がありません。

2000年から2010年の間、多くの Web 開発者が HTML から XHTML へと移行しました。XHTML を使用することで、開発者は徐々に優れた HTML コーディングの習慣を身につけました。

HTML5 に関しては、以下に示すような良いコード規範を形成する必要があります。

正しい文書型を使用

文書型宣言は HTML 文書の最初の行に配置します：

<!DOCTYPE html>

他のタグと同様に小文字を使用する場合は、以下のように記述します：

<!doctype html>

小文字の要素名を使用

HTML5 の要素名は大文字と小文字を使用できますが、小文字の使用を推奨します：

  • 大文字と小文字が混在したスタイルは非常に見にくい。
  • 開発者は通常小文字を使用します（XHTML に似ているため）。
  • 小文字スタイルはよりクリアに見えます。
  • 小文字は書きやすい。

不推薦:

<SECTION>
  <p>これは段落です。</p>
</SECTION>

非常に悪い:

<Section>
  <p>これは段落です。</p>
</Section>

推薦:

<section>
  <p>これは段落です。</p>
</section>

すべての HTML 要素を閉じる

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

不推薦:

<section>
  <p>これは段落です。
  <p>これは段落です。
</section>

推薦:

<section>
  <p>これは段落です。</p>
  <p>これは段落です。</p>
</section>

空の HTML 要素を閉じる

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

以下のどちらでも書けます：

<meta charset="utf-8">
<meta charset="utf-8" />

小文字の属性名を使用

HTML5 の属性名は大文字と小文字を使用できますが、小文字の使用を推奨します：

  • 大文字と小文字が混在したスタイルは非常に見にくい。
  • 開発者は通常小文字を使用します（XHTML に似ているため）。
  • 小文字スタイルはよりクリアに見えます。
  • 小文字は書きやすい。

不推薦：

<div CLASS="menu">

推薦：

<div class="menu">

属性値

HTML5 属性値は引用符を使用しなくてもよいですが、引用符を使用することを推奨します：

  • 属性値に空白が含まれている場合は引用符を使用する必要があります。
  • 混合スタイルは推奨されず、統一したスタイルを推奨します。
  • 属性値の引用符は読みやすさを高めます。

以下の例では、属性値に引用符が使用されておらず、正しく機能しません：

<table class=table striped>

以下のように二重引用符を使用するのが正しいです：

<table class="table striped">

画像属性

画像には通常 alt 属性を使用します。画像が表示されない場合に、その代替テキストが表示されます：

<img src="https://www.japanitguide.com/storage/thumbnails/_signature/VPQRUFGQOTA08B8VLDMBEIO9C.webp" alt="HTML5">

画像のサイズを定義すると、読み込み時に指定されたスペースを確保でき、ちらつきを減少させます：

<img src="https://www.japanitguide.com/storage/thumbnails/_signature/VPQRUFGQOTA08B8VLDMBEIO9C.webp" alt="HTML5" style="width:128px;height:128px">

空白と等号

等号の前後に空白を使用できます：

<link rel = "stylesheet" href = "styles.css">

しかし、空白を少なくすることを推奨します：

<link rel="stylesheet" href="styles.css">

一行コードの長さを避ける

HTML エディタを使用して左右にコードをスクロールするのは不便です。1行のコードはできる限り 80 文字以内にするようにしましょう。

空行とインデント

無意味な空行を追加しないでください。各論理機能ブロックには空行を追加することで、読みやすくなります。インデントにはタブではなく、2つのスペースを使用します。

不必要な空行とインデント：

<body>

  <h1>IT教室</h1>

  <h2>HTML</h2>

  <p>
    IT教室、学ぶは技術だけでなく、夢も。
    IT教室、学ぶは技術だけでなく、夢も。
    IT教室、学ぶは技術だけでなく、夢も。
    IT教室、学ぶは技術だけでなく、夢も。
  </p>

</body>

推奨：

<body>

<h1>IT教室</h1>

<h2>HTML</h2>

<p>IT教室、学ぶは技術だけでなく、夢も。
  IT教室、学ぶは技術だけでなく、夢も。
  IT教室、学ぶは技術だけでなく、夢も。
  IT教室、学ぶは技術だけでなく、夢も。</p>

</body>

表の例:

<table>
<tbody>
<tr>
<th>名前</th>
<th>説明</th>
</tr>
<tr>
<td>A</td>
<td>Aの説明</td>
</tr>
<tr>
<td>B</td>
<td>Bの説明</td>
</tr>
</tbody>
</table>

リストの例:

  1. ロンドン
  2. パリ
  3. 東京

<html> と <body> を省略？

標準の HTML5 では、<html> と <body> タグは省略可能です。

以下の HTML5 文書は正しい例です:

<!DOCTYPE html>
<head>
  <title>ページタイトル</title>
</head>

<h1>これはタイトルです</h1>
<p>これは段落です。</p>

しかし、<html> と <body> タグは省略しないことを推奨します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>IT教室</title>
</head>
<body>
  <h1>これはタイトルです</h1>
  <p>これは段落です。</p>
</body>
</html>

HTML コメント

コメントは <!-- と --> の中に記載できます：

<!-- これはコメントです -->

長いコメントは数行に分けて書けます：

<!--
  これは長いコメントです。 これは長いコメントです。
  これは長いコメントです。 これは長いコメントです。
-->

スタイルシート

スタイルシートはシンプルな構文を使用します (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;
}

HTML に JavaScript を読み込む

外部の JavaScript ファイルを読み込む際にはシンプルな構文を使用します (type 属性は必須ではありません)：

<script src="myscript.js"></script>

JavaScript の使用

JavaScript は異なる HTML フォーマットで異なる結果を出力する可能性があります：

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML の JavaScript で同じ命名ルールを使用するようにしましょう。

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

大多数の Web サーバー (Apache, Unix) は大文字と小文字を区別します：london.jpg は London.jpg ではアクセスできません。

他の Web サーバー (Microsoft, IIS) は大文字小文字の区別はありません：london.jpg は London.jpg または london.jpg でアクセスできます。

統一されたスタイルを維持するために、小文字を使用することを推奨します。

ファイル拡張子

HTML ファイルの拡張子は .html（または .htm）です。CSS ファイルの拡張子は .css です。JavaScript ファイルの拡張子は .js です。

質問と回答（QA）

Q1. XHTML と HTML5 の主な違いは何ですか？

A1. XHTML は XML ベースであり、より厳密な構文ルールを持ちます。一方、HTML5 は自由度が高く、最新の Web 技術と互換性があります。

Q2. HTML 要素の閉じタグを省略するのはなぜ推奨されないのですか？

A2. 閉じタグを省略すると、予期しない動作を引き起こす可能性があります。特に、JavaScript が HTML 要素にアクセスしようとするとエラーが発生する可能性があります。

Q3. 小文字のファイル名を使用する利点は何ですか？

A3. 小文字のファイル名を使用すると、Web サーバー間の互換性が向上し、ファイル名の一貫性を保つことができます。