HTMLのコーディング規則ブートストラップ

文法

二つのスペースの代わりにタブ（タブ）で - これは、すべての環境で表示する一貫したアプローチを保証する唯一の方法です。
ネストされた要素は、一度（すなわち二つのスペース）インデントする必要があります。
プロパティの定義については、単一引用符を使用することはありません、すべてが二重引用符を使用していることを確認してください。
自己閉鎖（自動閉鎖）要素テールがスラッシュを追加しないでください- HTML5仕様は明らかに、これはオプションであると述べました。
オプションの終了タグ（終了タグ）を省略しないでください（たとえば、 </li>または</body> ）。

例：

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

HTML5のDOCTYPE

標準モード（標準モード）ステートメントを追加したHTMLページの最初の行ごとに、これを使用すると、各ブラウザで一貫性のあるディスプレイを持っていることを確認することができます。

例：

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

Languageプロパティ

HTML5仕様に従って：

強く文書の正しい言語を設定するように、htmlのルート要素をlang属性を指定することをお勧めします。これは、翻訳ツールがというようにルールとを遵守する必要があり、その翻訳を判断するのに役立ちます、自分の発音を決定するために使用されるべき音声合成ツールに役立ちます。

もっと上のlangから知識を属性この仕様を理解します。

ここに言語コードテーブルが。

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

IE互換モード

特定を通じてIEのサポート<meta> IEのレンダリングページの現在のバージョンを確認するためにタグを使用する必要があります。強い特別なニーズがある場合を除き、それ以外の場合は、それによってそれがサポートする最新のモデルを使用してIEを通知、エッジモードを設定することが最善です。

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

文字コード

明示的に文字エンコーディングを宣言することで、ブラウザが迅速に確保し、簡単にページコンテンツのレンダリングを決定することができます。この利点は、ドキュメント全体のエンコーディング（一般的にUTF-8エンコーディングを使用）と一致しているHTML内の文字エンティティマーク（文字エンティティ）の使用を避けることです。

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

CSSとJavaScriptファイルの導入

HTML5仕様によると、CSSおよびJavaScriptファイルの導入時には、一般的に指定する必要はありませんtypeなどの属性をtext/cssとtext/javascriptそのデフォルト値です。

HTML5仕様へのリンク

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

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

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

実用的には王であります

価格のための実用性を犠牲にしてHTML標準と意味ではなく、に従うようにしてください。最小限のラベルを持つと複雑さの最小値を維持することが可能任意の時間。

属性の順序

HTML属性は、コードの可読性を確保するために、下記の順に優先度の高い順にする必要があります。

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

クラスは非常に再利用可能なコンポーネントを識別するために使用され、したがって、上部にあるべきです。 idは、特定のコンポーネントを識別するために使用されている（例えば、ページ内のブックマークなど）慎重に使用する必要があり、それは第二位になりました。

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

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

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

ブール（ブール値）type属性

ブール属性は宣言の時点で譲渡することはできません。その割り当てのためのXHTMLの仕様が、HTML5仕様は必要ありません。

詳細については、を参照してくださいブールON WHATWG sectionTop属性：

何の値がfalseでない場合、値がtrueの場合、要素の属性ブール。

あなたは値を割り当てる必要がある場合は、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="...">
</span>

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

JavaScriptが生成されたラベル

タグは、コンテンツは、検索、編集、及び性能を低下させることが困難になるようにするJavaScriptによって生成されます。避けるようにしないようにしてください。

前：v2のチュートリアルブートストラップ

次へ：CSSのコーディング標準のブートストラップ

Bootstrap コース

Bootstrap CSS

Bootstrap レイアウトコンポーネント

Bootstrap ウィジェット

Bootstrap 他の