最新のWeb開発のチュートリアル

HTML(5)スタイルガイドとコーディング規則

❮前 次の章❯

HTMLのコーディング規則

Web開発者は、多くの場合、HTMLで使用するコーディングスタイルと構文について不確実です。

2000年から2010年の間に、多くのWeb開発者は、HTMLからXHTMLに変換します。

XHTMLでは、開発者が有効と書くことを余儀なくされた"well-formed"のコードを。

それは検証をコーディングするとなるとHTML5は、もう少しずさんです。

HTML5では、あなた自身のベストプラクティス、スタイルガイドとコーディング規則を作成する必要があります。

スマートかつ将来性あること

スタイルの必然的な使用は、それが簡単に他の人が理解し、あなたのHTMLを使用できるようになります。

将来的には、XMLの読者のようなプログラムは、あなたのHTMLを読むことをお勧めします。

整形使い方"close to XHTML"構文を、スマートすることができます。

必ず、スマート整頓、清潔、そして整形あなたのスタイルを保ちます。

正しい文書タイプを使用します

必ず、文書の最初の行としてドキュメントタイプを宣言します。

<!DOCTYPE html>

あなたは小文字のタグとの整合性が必要な場合は、使用することができます。

<!DOCTYPE html>

小文字要素名を使用します

HTML5は、要素名に大文字と小文字を混合できます。

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

  • 大文字と小文字の名前が混在すると悪いです
  • 開発者は小文字の名前を使用するために使用される(as in 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では、あなたはすべての要素を閉じる必要はありません(for example the <p> element) 。

我々は、すべての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>

閉じる空のHTML要素

HTML5では、空の要素を閉鎖するオプションです。

これは許可されています。

<meta charset="utf-8">

これは、許可されています。

<meta charset="utf-8" />

スラッシュ(/) XHTMLやXMLで必要とされます。

あなたがあなたのページにアクセスするためのXMLソフトウェアを期待するなら、それを維持するのは良い考えかもしれません。

名前属性の小文字を使用します

HTML5は、属性名では大文字と小文字を混合できます。

私たちは、小文字の属性名を使用することをお勧めします：

  • 大文字と小文字の名前が混在すると悪いです
  • 開発者は小文字の名前を使用するために使用される(as in 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">

より良い一緒しかし、スペースレスは、読みやすいとグループエンティティ：

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

省略<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">

言語を宣言すると、補助アプリケーションのために重要である(screen readers)や検索エンジン。

省略<html>または<body> DOMとXMLソフトウェアがクラッシュすることができます。

省略<body>古いブラウザでエラーが発生することができます(IE9)

省略<head> ？

HTML5の規格では、 <head>タグを省略することもできます。

デフォルトでは、ブラウザが前にすべての要素を追加します<body>デフォルトに、 <head>要素。

あなたは省略することで、HTMLの複雑さを軽減することができます<head>タグを：

例

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>
»それを自分で試してみてください

タグを省略すると、Web開発者になじみのないです。 これは、ガイドラインとして確立されるには時間が必要です。

メタデータ

<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のコメント

短いコメントは、後のスペースで、1行に記述する必要があります<!-- and a space before --> ：

<!-- This is a comment -->

長いコメントは、多くの行にまたがる、と記述する必要があります<!-- and -->別々の行に：

<!--
  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つのスペースでインデントされている場合は長いコメントは、観察することが容易です。

スタイルシート

スタイルシートをリンクするための簡単な構文を使用します(the type attribute is not necessary) ：

<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;
}
  • セレクタと同じ行に開口ブラケットを配置します。
  • オープニングブラケットの前にスペースを使用してください。
  • インデントの2つのスペースを使用します。
  • コロンと各プロパティとその値の間にスペースを使用してください。
  • 各カンマやセミコロンの後にスペースを使用します。
  • 最後を含めて、各プロパティと値のペアの後にセミコロンを使用してください。
  • 値にスペースが含まれている場合のみ、値の前後に引用符を使用します。
  • 先頭のスペースなしで、新しい行に閉じ括弧を置きます。
  • 80文字を超える行を避けてください。

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

HTMLにJavaScriptをロード

外部スクリプトをロードするための単純な構文を使用します(the type attribute is not necessary) ：

<script src="myscript.js">

JavaScriptでHTMLの要素へのアクセス

使用した結果"untidy" HTMLスタイルは、JavaScriptエラーが発生する場合があります。

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

例

var obj = getElementById("Demo")

var obj = getElementById("demo")
»それを自分で試してみてください

可能であれば、同じ命名規則を使用する(as JavaScript) HTMLに。

JavaScriptのスタイルガイドをご覧ください 。

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

ほとんどのWebサーバ(Apache, Unix)ファイル名についての大文字と小文字が区別されます：

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

他のWebサーバー(Microsoft, IIS)大文字と小文字を区別しません。

london.jpgはLondon.jpg又はlondon.jpgとしてアクセスすることができます。

あなたは大文字と小文字が混在して使用する場合は、非常に一貫性があります。

あなたは大文字と小文字を区別し、サーバーに、大文字と小文字を区別しませんから移動した場合は、小さくてもエラーがあなたのウェブを中断します。

これらの問題を回避するために、常に小文字のファイル名を使用する(if possible) 。

ファイル拡張子

HTMLファイルは.html拡張子が必要です(or .htm ) 。

CSSファイルが.cssの拡張子を持つ必要があります。

JavaScriptのファイルが.jsの拡張子を持つ必要があります。

.htmと.htmlの間の違い

.htmファイルおよび.htmlの拡張子の間に違いはありません。 どちらも、任意のWebブラウザやWebサーバによってHTMLとして扱われます。

違いは文化です。

.htm "smells"システムは3つの文字に拡張を制限され、早期DOSシステム。

.html "smells"この制限はありませんでしたUNIXオペレーティングシステムの。

技術的な相違

URLは、ファイル名を指定しない場合(like http://www.w3ii.com/css/) 、サーバーは、デフォルトのファイル名を返します。 共通のデフォルトのファイル名は、index.htmlのindex.htmを、default.htmlの、およびDefault.htmのです。

サーバーのみで構成されている場合は"index.html"デフォルトのファイル名として、ファイルに名前を付ける必要があり"index.html"ではなく、 "index.htm."

ただし、サーバーは、複数のデフォルトのファイル名で構成することができ、必要に応じて、通常、あなたは、多くのデフォルトのファイル名を設定することができます。

とにかく、HTMLファイルの完全な拡張子は.htmlのであり、それを使用すべきではない理由はありません。

❮前 次の章❯