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

• HTML コーディング規約は Fellowship Tech Code Standards (CC license) を基にしています。

原文 / 日本語訳

最終更新日: 2021年8月9日