HTML

Validation

すべてのHTMLページは、マークアップが正しく形成されていることを確認するために、W3Cバリデーターに対して検証されるべきです。これは直接的に良いコードを示すものではありませんが、自動化によってテスト可能な問題を排除するのに役立ちます。手動コードレビューの代わりにはなりません。(他のバリデーターについては、CodexのHTML Validationを参照してください。)

Self-closing Elements

すべてのタグは適切に閉じられなければなりません。テキストや他の要素などのノードをラップできるタグの場合、終了は簡単な作業です。自己終了するタグの場合、スラッシュの前には正確に1つのスペースが必要です:

  1. <br />

コンパクトですが不正確な形式ではなく:

  1. <br/>

W3Cは、自己終了スラッシュの前に1つのスペースが必要であると規定しています(source)。

Attributes and Tags

すべてのタグと属性は小文字で書かれなければなりません。さらに、属性値は、そこに含まれるテキストの目的が機械によってのみ解釈される場合、小文字であるべきです。データが人間に読みやすい必要がある場合は、適切なタイトルの大文字小文字を守るべきです。

機械用:

  1. <meta http-equiv="content-type" content="text/html; charset=utf-8" />

人間用:

  1. <a href="http://example.com/" title="Description Here">Example.com</a>

Quotes

XHTMLに関するW3Cの仕様によれば、すべての属性には値が必要であり、二重引用符または単一引用符を使用しなければなりません(source)。以下は、引用符と属性/値ペアの適切および不適切な使用の例です。

正しい:

  1. <input type="text" name="email" disabled="disabled" />
  2. <input type='text' name='email' disabled='disabled' />

不正確:

  1. <input type=text name=email disabled>

HTMLでは、すべての属性が値を持つ必要はなく、属性値が常に引用符で囲まれる必要もありません。上記のすべての例は有効なHTMLですが、属性を引用しないことはセキュリティの脆弱性を引き起こす可能性があります。常に属性を引用してください。ブール属性の値を省略することは許可されています。値trueおよびfalseはブール属性では無効です(HTML5 source)。

正しい:

  1. <input type="text" name="email" disabled />

不正確:

  1. <input type="text" name="email" disabled="true" />

Indentation

PHPと同様に、HTMLのインデントは常に論理構造を反映するべきです。スペースではなくタブを使用してください。

PHPとHTMLを混ぜる場合、PHPブロックのインデントは周囲のHTMLコードに合わせるべきです。PHPブロックの終了は、開始ブロックと同じインデントレベルに合わせるべきです。

正しい:

  1. <?php if ( ! have_posts() ) : ?>
  2. <div id="post-1" class="post">
  3. <h1 class="entry-title">Not Found</h1>
  4. <div class="entry-content">
  5. <p>Apologies, but no results were found.</p>
  6. <?php get_search_form(); ?>
  7. </div>
  8. </div>
  9. <?php endif; ?>

不正確:

  1. <?php if ( ! have_posts() ) : ?>
  2. <div id="post-0" class="post error404 not-found">
  3. <h1 class="entry-title">Not Found</h1>
  4. <div class="entry-content">
  5. <p>Apologies, but no results were found.</p>
  6. <?php get_search_form(); ?>
  7. </div>
  8. </div>
  9. <?php endif; ?>

Credits