• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

HTML コーディング規約

提供: WordPress Codex 日本語版
移動先: 案内検索

注意: この記事は「Core Contributor Handbook」の「HTML Coding Standards」(2016年8月29日時点)の訳です。
最新版については英語版を参照してください。

HTML

検証

HTML ページは「W3C Validator」を使用してマークアップが整形式であることを検証してください。このツールだけで HTML が正しいコードであるとは言い切れませんが、自動化テストで見つかる程度の問題は取り除くことができます。なお目視によるコードレビューは依然必要ですので注意してください。他の検証ツールについては「HTML - Validation」を参照してください。

終了を含む要素

すべてのタグは正しく閉じる必要があります。テキストや他の要素を囲むタグであれば、終了タグを置くことは自明の作業でしょう。一方、自身が終了タグを含むタグの場合、スラッシュの前に1個のスペースを挿入してください。

<br />

スペースのない書き方は誤りです。

<br/>

W3C でも自身を閉じるスラッシュの前に単一のスペースを規定しています (原典)。

属性とタグ

すべてのタグと属性は小文字で書いてください。また文字列の属性値も、コンピュータ内のみで処理される場合は小文字にしてください。ユーザーが目にする「title」属性のデータ等はその限りでなく、通常どおり先頭を大文字にするなど適切に記述してください。

コンピュータ用

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

ユーザー用

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

クオート

W3C の XHTML 規約ではすべての属性には値が必要で、ダブルクオート、またはシングルクオートで囲む必要があります (source)。以下はクオート、および、属性と値のペアの正しい用例と誤った用例です。

正しい

<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

最新英語版: Core Contributor Handbook > HTML Coding Standards