HTML ガイドライン

以下のガイドラインで MDN のコードの例では HTML をどのように記述するのかを学習します。

この記事について

文書型宣言とメタデータ

注記: このセクションにあるガイドラインは完全な HTML 文書として見せなければならない時だけ適用してください。多くの場合、このようにする必要がありません; スニペット(HTML の断片)で通常は機能を説明するのに十分間に合います。EmbedLiveSample macro を使うと、スニペットを取り込みます; 表示される際に自動で完全な HTML 文書に挿入されます。

文書型宣言

HTML5 の文書型宣言を使わなくてはなりません。短く、覚えやすく、後方互換性があります:

<!DOCTYPE html>

文書の言語

<html> 要素に lang 属性を使って文書の言語を設定します:

<html lang="en-US">

これはアクセシビリティと検索エンジンにとって良いことで、コンテンツのローカライズに役立ち、最良の慣習を使うべきと気づかせます。

文書の文字セット

また文書の文字セットを以下のように定義しなければなりません:

<meta charset="utf-8">

UTF-8 を使用しないというとても明白な理由がない限りは使用するべきです; 文書でどんな言語が使われていても必要とする文字を余裕を持って扱えます。加えて、HTML の <head> ブロック (先頭の 1 キロバイトに含まれている場合) に常にできるだけ早く文字セットを特定するべきです、かなり 不快な Internet Explorer のセキュリティ脆弱性 から守ってくれるからです。

ビューポートメタタグ

最後に、HTML <head> にはビューポートメタタグを追加しなければなりません、例を挙げるとモバイル端末でより良く動作するきっかけとなります。文書に少なくとも以下の内容を含めておき、必要になったら後ほど変更することができます:

<meta name="viewport" content="width=device-width">

より詳しくは モバイルブラウザでのレイアウトを制御するために meta タグの viewport を使う をご覧ください。

一般的なマークアップコーディングスタイル

小文字を使う

すべての要素の名前と属性の名前/値に小文字を使ってください、綺麗に見えますし、マークアップをより早く書くことができようになります。

良い例:

<p class="nice">This looks nice and neat</p>

良くない例:

<P CLASS="WHOA-THERE">Why is my markup shouting?</P>

末尾のスラッシュ

空要素に XHTML スタイルの末尾のスラッシュを含めないでください、不要ですし実行速度を遅くします。注意しないと古いブラウザーを中断させます (思い返してみると、Netscape 4 から問題とはなっていませんが)。

こちらは良い例:

<input type="text">
<hr>

スラッシュは必要ありません:

<input type="text" />
<hr />

属性を引用符で囲む

すべての属性の値はダブルクォートで囲わなければなりません。HTML5 でクオートの省略が許されるようになってから省略が奨められていますが、取り入れるとマークアップが綺麗になり読みやすくなります。例えば、こちらは良い例です:

<img src="images/logo.jpg" alt="A circular globe icon" class="no-border">

続いてはこちら:

<img src=images/logo.jpg alt=A circular globe icon class=no-border>

問題を引き起こします — 上記の例では alt 属性が複数の属性として実行が中断するでしょう、"A circular globe icon" が 1 つの属性の値であると特定するクォートがないためです。

ダブルクォートを使う

HTML にはシングルクォートでなく、ダブルクォートを使います:

<p class="important">Yes</p>
<p class='important'>Nope</p>

真偽属性

真偽属性は完全な形で書かないでください; 設定するには属性の名前だけ書きます。例えば、このように書きます:

required

値を含めた長い形で書いていないのに、本当に理解がしやすく、うまく動作します。

required="required" 

サポートされるものの必須ではありません。

クラス名と ID 名

意味のあるクラス/ID 名を使い、複数の単語はハイフンで分割します。キャメルケース (camelCase) は使いません。

良い:

<p class="editorial-summary">Blah blah blah</p>

悪い:

<p class="bigRedBox">Blah blah blah</p>

実体参照

実体参照を不用意に使わない — リテラル文字を可能であれば使いましょう (角括弧や引用符のような記号は、まだエスケープが必要です) 。

単純に書ける例

<p>© 2018 Me</p>

以下のようにも書けます

<p>&copy; 2018 Me</p>

これは UTF-8 文字セットで記述する限りは問題ありません。

MDN での良い HTML の例

優良で、簡潔で、有意義な HTML のスニペットを HTML リファレンス の先頭で見つけることができます — 対話形式の例は一般的にこれらのガイドラインに従って書かれていますが、ガイドラインが新規に書かれる前に大部分のガイドラインは書かれているのでいくつかの箇所は異なっているのは認識しています。

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, dskmori, kenji-yamasaki
最終更新者: mdnwebdocs-bot,