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

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

「HTML コーディング規約」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(和訳完了 「HTML Coding Standards」(2016/8/29時点))
(ja.wordpress.org へ移動)
 
1行目: 1行目:
<p class="important">注意: この記事は「[https://make.wordpress.org/core/handbook/ Core Contributor Handbook]」の「[https://make.wordpress.org/core/handbook/best-practices/coding-standards/html/ HTML Coding Standards]」(2016年8月29日時点)の訳です。<br />最新版については[https://make.wordpress.org/core/handbook/best-practices/coding-standards/html/ 英語版]を参照してください。</p>
+
このページは https://ja.wordpress.org/team/handbook/coding-standards/wordpress-coding-standards/html/ へ移動しました。
 
+
== HTML ==
+
=== 検証<span id="Validation"></span> ===
+
 
+
HTML ページは「[http://validator.w3.org/ W3C Validator]」を使用してマークアップが整形式であることを検証してください。このツールだけで HTML が正しいコードであるとは言い切れませんが、自動化テストで見つかる程度の問題は取り除くことができます。なお目視によるコードレビューは依然必要ですので注意してください。他の検証ツールについては「[[:en:Validating_a_Website#HTML_-_Validation|HTML - Validation]]」を参照してください。
+
 
+
=== 終了を含む要素<span id="Self-closing_Elements"></span> ===
+
 
+
すべてのタグは正しく閉じる必要があります。テキストや他の要素を囲むタグであれば、終了タグを置くことは自明の作業でしょう。一方、自身が終了タグを含むタグの場合、スラッシュの前に1個のスペースを挿入してください。
+
 
+
<pre>
+
<br />
+
</pre>
+
 
+
スペースのない書き方は誤りです。
+
+
<pre>
+
<br/>
+
</pre>
+
 
+
W3C でも自身を閉じるスラッシュの前に単一のスペースを規定しています ([http://w3.org/TR/xhtml1/#C_2 原典])。
+
 
+
=== 属性とタグ<span id="Attributes_and_Tags"></span> ===
+
 
+
すべてのタグと属性は小文字で書いてください。また文字列の属性値も、コンピュータ内のみで処理される場合は小文字にしてください。ユーザーが目にする「title」属性のデータ等はその限りでなく、通常どおり先頭を大文字にするなど適切に記述してください。
+
 
+
コンピュータ用
+
 
+
<pre>
+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
</pre>
+
 
+
ユーザー用
+
 
+
<pre>
+
<a href="http://example.com/" title="Description Here">Example.com</a>
+
</pre>
+
 
+
=== クオート<span id="Quotes"></span> ===
+
 
+
W3C の XHTML 規約ではすべての属性には値が必要で、ダブルクオート、またはシングルクオートで囲む必要があります ([http://www.w3.org/TR/xhtml1/#h-4.4 source])。以下はクオート、および、属性と値のペアの正しい用例と誤った用例です。
+
 
+
正しい
+
<pre>
+
<input type="text" name="email" disabled="disabled" />
+
<input type='text' name='email' disabled='disabled' />
+
</pre>
+
 
+
間違い
+
<pre>
+
<input type=text name=email disabled>
+
</pre>
+
 
+
HTML ではすべての属性が値を持つとは限らず、また属性値をクオートで囲む必要もありません。ただし、これまでのすべての例が妥当な HTML である一方、クオートで属性を囲まなければセキュリティ上の脆弱性となります。常に属性はクオートで囲んでください。
+
 
+
=== インデント<span id="Indentation"></span> ===
+
 
+
PHP と同様、HTML のインデントでも常に論理的な構造を反映してください。本物のタブを使用し、スペースは使用しないでください。
+
 
+
PHP と HTML を一緒に書く場合、PHP ブロックは周囲の HTML コードと一致するようにインデントしてください。PHP ブロックの終了レベルは、開始レベルに一致する必要があります。
+
 
+
正しい
+
<pre>
+
&lt;?php if ( ! have_posts() ) : ?>
+
    &lt;div id="post-1" class="post">
+
        &lt;h1 class="entry-title">Not Found&lt;/h1>
+
        &lt;div class="entry-content">
+
            &lt;p>Apologies, but no results were found.&lt;/p>
+
            &lt;?php get_search_form(); ?>
+
        &lt;/div>
+
    &lt;/div>
+
&lt;?php endif; ?>
+
</pre>
+
 
+
間違い
+
<pre>
+
        &lt;?php if ( ! have_posts() ) : ?>
+
        &lt;div id="post-0" class="post error404 not-found">
+
            &lt;h1 class="entry-title">Not Found&lt;/h1>
+
            &lt;div class="entry-content">
+
            &lt;p>Apologies, but no results were found.&lt;/p>
+
&lt;?php get_search_form(); ?>
+
            &lt;/div>
+
        &lt;/div>
+
&lt;?php endif; ?>
+
</pre>
+
 
+
== Credits ==
+
 
+
* HTML コーディング規約は [http://developer.fellowshipone.com/patterns/code.php Fellowship Tech Code Standards] ([http://creativecommons.org/licenses/by-nc-sa/3.0/ CC license]) を基にしています。
+
 
+
最新英語版: [https://make.wordpress.org/core/handbook/ Core Contributor Handbook]  > [https://make.wordpress.org/core/handbook/best-practices/coding-standards/html/ HTML Coding Standards]
+
 
+
[[Category:WordPress の開発]]
+

2020年1月3日 (金) 19:18時点における最新版

このページは https://ja.wordpress.org/team/handbook/coding-standards/wordpress-coding-standards/html/ へ移動しました。