Bootstrap HTMLコーディング規約

语法

  • タブ（tab）の代わりにスペース2つを使用する -- これはすべての環境で一貫した表示を保証する唯一の方法です。
  • ネストされた要素は1段階インデントする（つまりスペース2つ）。
  • 属性の定義には、すべて二重引用符を使用し、単一引用符は決して使用しない。
  • 自己終了（self-closing）要素の末尾にスラッシュを追加しない --HTML5 规范中で、これはオプションであると明確に説明されています。
  • 省略可能な終了タグ（closing tag）を省略しない（例：</li> 或 </body>）。

实例：

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png.html" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

HTML5 doctype

各HTMLページの最初の行に標準モード（standard mode）の宣言を追加し、すべてのブラウザで一貫した表示を確実にする。

实例：

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

语言属性

HTML5 の仕様に基づいて：

htmlルート要素にlang属性を指定して、ドキュメントに正しい言語を設定することを強く推奨する。これにより、音声合成ツールが使用すべき発音を決定し、翻訳ツールが翻訳時に従うべき規則を決定するのに役立つ。など。

ここにリストされています语言代码表。

<html lang="zh">
  <!-- ... -->
</html>

IE 互換モード

IE は特定の...を通じてサポートしており、<meta>タグによって、現在のページの描画に使用すべきIEバージョンを決定する。強い特別な要件がない限り、...に設定するのが最善である。edge mode、それにより IE に、サポートしている最新のモードを採用するよう通知します。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

字符编码

文字エンコーディングを明示的に宣言することで、ブラウザがページコンテンツのレンダリング方法を迅速かつ容易に判断できる。これにより、HTMLで文字実体（character entity）を使用することを回避でき、すべてがドキュメントのエンコーディング（通常はUTF-8）と一致する。

<head>
  <meta charset="UTF-8">
</head>

CSS と JavaScript ファイルの読み込み

HTML5仕様によれば、CSSファイルとJavaScriptファイルを読み込む際に、通常は指定する必要はないtype属性、なぜならtext/cssとtext/javascriptそれぞれがそれらのデフォルト値です。

HTML5 spec links

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css.html">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js.html"></script>

実用こそ王

HTMLの標準とセマンティクスに可能な限り従うが、実用性を犠牲にしてはならない。常に最小限のタグを使用し、複雑さを最小限に保つよう努める。

属性顺序

HTML属性は、コードの可読性を確保するために、以下に示す順序で並べる必要がある。

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

class は再利用性の高いコンポーネントを識別するために使用されるため、最初に配置すべきです。id は特定のコンポーネントを識別するために使用され、慎重に使用すべきです（例：ページ内のブックマーク）。そのため、2番目に配置します。

<a class="..." id="..." data-modal="toggle" href="../index.html">
  Example link
</a>

<input class="form-control" type="text">

<img src="....html" alt="...">

ブール（boolean）属性

ブール型属性は、宣言時に値を割り当てなくてもよい。XHTML仕様では値を割り当てる必要があるが、HTML5仕様では必要ない。

詳しくは、以下を参照してくださいWhatWG section on boolean attributes：

要素のブール型属性は、値があればtrue、値がなければfalseである。

如果一定値を割り当てる場合は、WhatWG仕様を参照してください：

属性が存在する場合、その値は空文字列または [...] 属性の規範名でなければならず、先頭と末尾に空白を追加してはならない。

簡単に言えば、値を代入する必要はありません。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

タグの数を減らす

HTMLコードを書く際は、余分な親要素を避けるようにする。多くの場合、これを実現するには反復とリファクタリングが必要になる。以下の例を参照してください。

<!-- Not so great -->
<span class="avatar">
  <img src="....html">
</span>

<!-- Better -->
<img class="avatar" src="....html">

JavaScript で生成されたタグ

JavaScriptによって生成されたタグは、コンテンツを検索や編集しにくくし、パフォーマンスも低下させる。避けられる場合は避けるようにする。

其他扩展