HTML(5) スタイルガイドとコードコンビネーション

HTMLコードの約束

ウェブ開発者は、HTMLで使用するコードのスタイルや構文がどのようにするべきかよくわかりません。

2000年から2010年の間、多くのウェブ開発者がHTMLからXHTMLに移行しました。

XHTMLを使うと、開発者は「フォーマットが良い」有効なコードを書かなくてはなりません。

HTML5は、コードのバリデーション時に少し緩やかです。

HTML5を使って、あなた自身のをベストプラクティス、スタイルガイドとコードの約束。

スマートで将来の保証があります

スタイルの論理的な使用は、他の人があなたのHTMLをより簡単に理解し使用するのに役立ちます。

将来、XMLリーダーのようなプログラムは、あなたのHTMLを読む必要があるかもしれません。

フォーマットが良い「近似XHTMLの」文法を使用すると、よりスマートになります。

注釈：常にあなたのスタイルをスマートで整然と、純粋でフォーマットが良いままに保ってください。

正しいドキュメントのタイプを使用してください

常にドキュメントの先頭行でドキュメントのタイプを宣言してください：

<!DOCTYPE html>

常に小文字のタグを使用している場合は、次のように使用できます：

<!doctype html>

小文字の要素名を使用してください

HTML5では、要素名に大小文字の混合を使用することができます。

小文字の要素名を使用することをお勧めします：

  • 大小文字の混合名は良くありません
  • 開発者は小文字の名前を使用するのが習慣です（例えばXHTMLでは）
  • 小文字はより純粋に見えます
  • 小文字は書きやすい

あまり良くありません：

<SECTION> 
  <p>This is a paragraph.</p>
</SECTION>

とても悪いです：

<Section> 
  <p>This is a paragraph.</p>
</SECTION>

それほど悪くありません：

<section> 
  <p>This is a paragraph.</p>
</section>

すべてのHTML要素を閉じる

HTML5では、すべての要素（例えば<p>要素）を閉じる必要はありません。

すべてのHTML要素を閉じることをお勧めします：

看起来不好：

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

看起来不错：

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

关闭空的HTML元素

在HTML5中，关闭空元素是可选的。

允许这样：

<meta charset="utf-8">

也允许这样：

<meta charset="utf-8" />

斜杠（/）在XHTML和XML中是必需的。

如果您期望XML软件来访问您的页面，保持这个习惯是个好主意。

使用小写属性名

HTML5 允许大小写混合的属性名。

我们建议使用小写属性名：

  • 混合属性名并不好
  • 开发者习惯于使用小写属性名（比如在XHTML中）
  • 小写属性名看情况更纯净
  • 小写属性名更易书写

看起来不好：

<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个字符。

空行和缩进

请勿毫无理由地增加空行。

为了提高可読性，请增加空行来分隔大型或逻辑代码块。

为了提高可読性，请增加两个空格的缩进。请勿使用TAB。

不要使用不必要的空行和缩进。没有必要在短的和相关的项目之间使用空行，也没有必要缩进每个元素：

不必要：

<body>
  <h1>有名な都市</h1>
  <h2>Tokyo</h2>
  <p>
    東京は日本の首都であり、大東京圏の中心地でもあります、
    世界で最も人口が多い大都市圏でもあります。
    日本政府と皇居の所在地であり、
    日本天皇家族の住処でもあります。
  </p>
</body>

より良い：

<body>
<h1>有名な都市</h1>
<h2>Tokyo</h2>
<p>
東京は日本の首都であり、大東京圏の中心地でもあります、
世界で最も人口が多い大都市圏でもあります。
日本政府と皇居の所在地であり、
日本天皇家族の住処でもあります。
</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>

省略 <html> と <body>？

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> は、DOMおよびXMLソフトウェアがクラッシュする可能性があります。

省略 <body> は、古いブラウザ（IE9）でエラーが発生します。

省略 <head>？

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>

自分で試してみてください

注釈：ウェブ開発者にとって、タグを省略することは馴染みのないことです。ルールを築くには時間が必要です。

メタデータ

<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>

HTML コメント

短いコメントは、一行で書かれ、<!--の後ろにスペースを追加し、-->の前にスペースを追加してください：

<!-- This is a comment -->

長いコメントは、複数の行にわたって<!--と-->で独立した行に書かれる必要があります：

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

長いコメントは、2つのスペースのインデントがあると観察しやすくなります。

スタイルシート

シートをリンクする際にはシンプルな语法を使用してください（type属性は必須ではありません）：

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

短いルールは一行にまとめることができます、例えばこんな感じです：

p.into {font-family:"Verdana"; font-size:16em;}

長いルールは複数の行に分けてください：

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • 開括号とセレクタは同じ行に配置してください。
  • 開括号の前にスペースを1つ配置してください。
  • 2つのスペースのインデントを使用してください。
  • 各属性とその値の間にコロンとスペースを使用してください。
  • 各カンマまたはセミコロンの後ろにスペースを使用してください。
  • 各属性値ペア（最後のものも含め）の後ろにセミコロンを使用してください。
  • 値にスペースが含まれている場合にのみ、値を引用符で囲む必要があります。
  • 閉括号は新しい行に配置し、その前にスペースは使用しないでください。
  • 1行あたり80文字を超えないようにしてください。

注釈：カンマまたはセミコロンの後ろにスペースを追加することは、すべての書き込みスタイルの一般的なルールです。

HTMLでJavaScriptをロード

外部スクリプトをロードする際にはシンプルな構文を使用してください（type 属性は必須ではありません）：

<script src="myscript.js">

JavaScript で HTML 要素にアクセスする方法

「不整然な」HTML スタイルの結果は、JavaScript エラーが発生する可能性があります。

これらの 2 つの JavaScript ステートメントは異なる結果を生成します：

var obj = getElementById("Demo")
var obj = getElementById("demo")

自分で試してみてください

可能であれば、HTML で（JavaScript と同じ）のネーミングコンwenを使用してください。

JavaScript スタイルガイドにアクセスしてください。

小文字のファイル名を使用してください

大多数のウェブサーバー（Apache、Unix）はファイル名の大文字小文字を区別します：

london.jpg で London.jpg にアクセスすることはできません。

他のウェブサーバー（マイクロソフト、IIS）は大文字小文字を区別しません：

london.jpg または London.jpg で London.jpg にアクセスすることができます。

混成の大文字小文字を使用する場合、非常に一貫性を保たなければなりません。

大文字小文字を区別しないサーバーから大文字小文字を区別するサーバーに移行した場合、これらの小さなエラーがウェブサイトを破壊する可能性があります。

これらの問題を避けるために、常に小文字のファイル名を使用してください（可能であれば）。

ファイル拡張子

HTML ファイル名は拡張子を使用する必要があります .html（ではなく .htm）。

CSS ファイルは拡張子を使用する必要があります .css。

JavaScript ファイルは拡張子を使用する必要があります .js。