HTML Codeing Standards

HTML

Validation

All HTML pages should be verified against the W3C validator to ensure that the markup is well formed.

全てのHTMLページは、W3C validatorにて検証され、マークアップが正しく整形されていることを保障すべきです。

This in and of itself is not directly indicative of good code, but it helps to weed out problems that are able to be tested via automation.

それ自体はよいコードであることを直接保障するものではありませんが、自動テストにおいて問題を取り除く助けになります。

It is no substitute for manual code review.

これは手動でのコードレビューに変わるものではありません。

(For other validators, see HTML Validation in the Codex.)

他のバリデータについては、コーデックスの HTML Validationを見てください。

Self-closing Elements

All tags must be properly closed.

全てのタグは適切に閉じられていなければなりません。

For tags that can wrap nodes such as text or other elements, termination is a trivial enough task.

テキストや他の要素のようなノードをラップするために、タグを閉じる事は些細で十分な作業です。

For tags that are self-closing, the forward slash should have exactly one space preceding it:

空要素の場合、スラッシュの前にスペースを一つ空けます。

<br />

rather than the compact but incorrect:

これよりコンパクトですが、以下は正しくありません。

<br/>

The W3C specifies that a single space should precede the self-closing slash (source).

W3Cは、空要素のスラッシュの前にスペースを一つ書くことを定めています。

属性とタグ

All tags and attributes must be written in lowercase.

全てのタグと属性は小文字でかかれなければなりません。

Additionally, attribute values should be lowercase when the purpose of the text therein is only to be interpreted by machines.

加えて、機械によってのみ読まれる場合、属性の値も小文字を使うようにします。

For instances in which the data needs to be human readable, proper title capitalization should be followed.

そのデータを人が読めるようにする目的のにおいては、適切なタイトル属性を続けるべきである。

For machines:

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

For humans:

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

Quotes

According to the W3C specifications for XHTML, all attributes must have a value, and must use double- or single-quotes (source).

XHTMLに関するW3Cの使用によると、全ての属性は値を持たなければならず、二重または単一引用符を用いなければなりません。

The following are examples of proper and improper usage of quotes and attribute/value pairs.

以下は引用符と属性・値の、適切および不適切な使用例である。

Correct:

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

Incorrect:

<input type=text name=email disabled>

In HTML, attributes do not all have to have values, and attribute values do not always have to be quoted.

HTMLにおいて、属性は全てが値を持つ必要はなく、また属性の値も常に引用符で囲む必要はありません。

While all of the examples above are valid HTML, failing to quote attributes can lead to security vulnerabilities. Always quote attributes.

上記の全ては有効なHTMLですが、属性の引用に失敗すると、セキュリティの脆弱性を引き起こす可能性があります。常に引用符を用いましょう。

Indentation

As with PHP, HTML indentation should always reflect logical structure. Use tabs and not spaces.

PHP同様、HTMLのインデントは常に論理構造を反映する必要があります。スペースではなくタブを用いてください。

When mixing PHP and HTML together, indent PHP blocks to match the surrounding HTML code.

PHPとHTMLが混在する場合、PHPブロックのインデントは周辺のHTMLコードと一致させます。

Closing PHP blocks should match the same indentation level as the opening block.

PHPブロックを閉じる際は、ブロックを開いたときと同じレベルにしなければなりません。

Correct:

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

Incorrect:

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