HTML コーディング規約
HTML HTML
検証 検証
すべての HTML ページは「W3C Validator」を使用してマークアップが整形式であることを検証してください。このツールだけで HTML が正しいコードであるとは言い切れませんが、自動化テストで見つかる程度の問題は取り除くことができます。なお目視によるコードレビューは依然必要ですので注意してください。他の検証ツールについては「HTML – Validation」を参照してください。
終了を含む要素 終了を含む要素
すべてのタグは正しく閉じる必要があります。テキストや他の要素を囲むタグであれば、終了タグを置くことは自明の作業でしょう。一方、自身が終了タグを含むタグの場合、スラッシュの前に1個のスペースを挿入してください。
<br />
スペースのない書き方は誤りです。
<br/>
W3C でも自身を閉じるスラッシュの前に単一のスペースを規定しています (原典)。
属性とタグ 属性とタグ
すべてのタグと属性は小文字で書いてください。また文字列の属性値も、コンピューター内のみで処理される場合は小文字にしてください。ユーザーが目にするデータ等はその限りでなく、通常どおり先頭を大文字にするなど適切に記述してください。
コンピューター用
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
ユーザー用
<a href="http://example.com/" title="Description Here">Example.com</a>
クオート クオート
W3C の XHTML 規約ではすべての属性には値が必要で、ダブルクオート、またはシングルクオートで囲む必要があります (原典)。以下はクオート、および、属性と値のペアの正しい用例と誤った用例です。
正しい
<input type="text" name="email" disabled="disabled" /> <input type='text' name='email' disabled='disabled' />
間違い
<input type=text name=email disabled>
HTML ではすべての属性が値を持つとは限らず、また属性値をクオートで囲む必要もありません。上のすべての例は妥当な HTML ですが、クオートで属性を囲まなければセキュリティ上の脆弱性となります。常に属性はクオートで囲んでください。
インデント インデント
PHP と同様、HTML のインデントでも常に論理的な構造を反映してください。本物のタブを使用し、スペースは使用しないでください。
PHP と HTML を一緒に書く場合、PHP ブロックは周囲の HTML コードと一致するようにインデントしてください。PHP ブロックの終了レベルは、開始レベルに一致する必要があります。
正しい
<?php if ( ! have_posts() ) : ?>
<div id="post-1" class="post">
<h1 class="entry-title">Not Found</h1>
<div class="entry-content">
<p>Apologies, but no results were found.</p>
<?php get_search_form(); ?>
</div>
</div>
<?php endif; ?>
間違い
<?php if ( ! have_posts() ) : ?>
<div id="post-0" class="post error404 not-found">
<h1 class="entry-title">Not Found</h1>
<div class="entry-content">
<p>Apologies, but no results were found.</p>
<?php get_search_form(); ?>
</div>
</div>
<?php endif; ?>
Credits Credits
- HTML コーディング規約は Fellowship Tech Code Standards (CC license) を基にしています。