path: root/files/ja/mdn/guidelines/code_guidelines/html/index.html

---
title: HTML ガイドライン
slug: MDN/Guidelines/Code_guidelines/HTML
tags:
  - Code
  - Guide
  - Guidelines
  - HTML
  - MDN Meta
translation_of: MDN/Guidelines/Code_guidelines/HTML
---
<div>{{MDNSidebar}}{{IncludeSubnav("/ja/docs/MDN")}}</div>

<p class="summary">以下のガイドラインでは、MDN のコードの例で HTML をどのように記述するのかを学習します。</p>

<h2 id="In_this_article" name="In_this_article">この記事について</h2>

<ul>
 <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Doctype_and_metadata">文書型宣言とメタデータ</a>

  <ul>
   <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Doctype">Doctype</a></li>
   <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Document_language">文書の言語</a></li>
   <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Document_characterset">文書の文字セット</a></li>
   <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Viewport_meta_tag">ビューポートメタタグ</a></li>
  </ul>
 </li>
 <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#General_markup_coding_style">一般的なマークアップコーディングスタイル</a>
  <ul>
   <li><a href="https://developer.mozilla.org/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Use_lowercase">小文字を使う</a></li>
   <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Trailing_slashes">末尾のスラッシュ</a></li>
   <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Quoting_attributes">属性の引用</a></li>
   <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Use_double_quotes">ダブルクォートを使う</a></li>
   <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Boolean_attributes">真偽属性</a></li>
   <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Class_and_ID_names">クラス と ID の名前</a></li>
   <li><a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML#Entity_references">実体参照</a></li>
  </ul>
 </li>
</ul>

<h2 id="Doctype_and_metadata" name="Doctype_and_metadata">Doctype とメタデータ</h2>

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

<h3 id="Doctype" name="Doctype">Doctype</h3>

<p>HTML5 の Doctype を使わなくてはなりません。短く、覚えやすく、後方互換性があります:</p>

<pre class="brush: html example-good notranslate">&lt;!DOCTYPE html&gt;</pre>

<h3 id="Document_language" name="Document_language">文書の言語</h3>

<p>{{htmlelement("html")}} 要素に {{htmlattrxref('lang')}} 属性を使って文書の言語を設定します:</p>

<pre class="brush: html example-good notranslate">&lt;html lang="ja"&gt;</pre>

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

<h3 id="Document_characterset" name="Document_characterset">文書の文字セット</h3>

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

<pre class="brush: html example-good notranslate">&lt;meta charset="utf-8"&gt;</pre>

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

<h3 id="Viewport_meta_tag" name="Viewport_meta_tag">ビューポートメタタグ</h3>

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

<pre class="brush: html example-good notranslate">&lt;meta name="viewport" content="width=device-width"&gt;</pre>

<p>より詳しくは <a href="/ja/docs/Mobile/Viewport_meta_tag">モバイルブラウザーでのレイアウトを制御するために meta タグの viewport を使う</a> をご覧ください。</p>

<h2 id="General_markup_coding_style" name="General_markup_coding_style">一般的なマークアップコーディングスタイル</h2>

<h3 id="Use_lowercase" name="Use_lowercase">小文字を使う</h3>

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

<p>良い例:</p>

<pre class="brush: html example-good notranslate">&lt;p class="nice"&gt;This looks nice and neat&lt;/p&gt;</pre>

<p>良くない例:</p>

<pre class="brush: html example-bad notranslate">&lt;P CLASS="WHOA-THERE"&gt;Why is my markup shouting?&lt;/P&gt;</pre>

<h3 id="Trailing_slashes" name="Trailing_slashes">末尾のスラッシュ</h3>

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

<p>こちらは良い例:</p>

<pre class="brush: html example-good notranslate">&lt;input type="text"&gt;
&lt;hr&gt;</pre>

<p>スラッシュは必要ありません:</p>

<pre class="brush: html example-bad notranslate">&lt;input type="text" /&gt;
&lt;hr /&gt;</pre>

<h3 id="Quoting_attributes" name="Quoting_attributes">属性を引用符で囲む</h3>

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

<pre class="brush: html example-good notranslate">&lt;img src="images/logo.jpg" alt="A circular globe icon" class="no-border"&gt;</pre>

<p>次の例と比べてください。</p>

<pre class="brush: html example-bad notranslate">&lt;img src=images/logo.jpg alt=A circular globe icon class=no-border&gt;</pre>

<p>こちらは問題も引き起こします — 上記の例では <code>alt</code> 属性の部分が複数の属性と解釈されて実行が中断するでしょう、"A circular globe icon" が 1 つの属性の値であると特定するクォートがないためです。</p>

<h3 id="Use_double_quotes" name="Use_double_quotes">ダブルクォートを使う</h3>

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

<pre class="brush: html example-good notranslate">&lt;p class="important"&gt;Yes&lt;/p&gt;</pre>

<pre class="brush: html example-bad notranslate">&lt;p class='important'&gt;Nope&lt;/p&gt;</pre>

<h3 id="Boolean_attributes" name="Boolean_attributes">真偽属性</h3>

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

<pre class="brush: html example-good notranslate">required</pre>

<p>これだけで完全に理解され、うまく動作します。値を含めて書く長い形式、</p>

<pre class="brush: html example-bad notranslate">required="required" </pre>

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

<h3 id="Class_and_ID_names" name="Class_and_ID_names">クラス名と ID 名</h3>

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

<p>良い:</p>

<pre class="brush: html example-good notranslate">&lt;p class="editorial-summary"&gt;Blah blah blah&lt;/p&gt;</pre>

<p>悪い:</p>

<pre class="brush: html example-bad notranslate">&lt;p class="bigRedBox"&gt;Blah blah blah&lt;/p&gt;</pre>

<h3 id="Entity_references" name="Entity_references">実体参照</h3>

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

<p>単純に書ける例</p>

<pre class="brush: html example-good notranslate">&lt;p&gt;© 2018 Me&lt;/p&gt;</pre>

<p>以下のようにも書けますが、</p>

<pre class="brush: html example-bad notranslate">&lt;p&gt;&amp;copy; 2018 Me&lt;/p&gt;</pre>

<p>UTF-8 文字セットで記述する限りは問題ありません。</p>

<h2 id="Good_HTML_examples_on_MDN" name="Good_HTML_examples_on_MDN">MDN での良い HTML の例</h2>

<p>優良で、簡潔で、有意義な HTML のスニペットを <a href="/ja/docs/Web/HTML/Reference">HTML リファレンス</a> の先頭で見つけることができます — 対話形式の例は一般的にこれらのガイドラインに従って書かれていますが、ガイドラインが新規に書かれる前に大部分が書かれているので、いくつかの箇所は異なっているのに気をつけてください。</p>