urakey/HTML Coding Guideline.md

## HTML Coding Guideline.md

      
    Raw
  

              HTML Coding Guideline.md
            
          
    Google HTML/CSS Style Guide をベースに加筆修正を加えたものです。
ここで定められていないことで気になることが出た場合はについては HTML Best Practices に合わせるものとします。
HTMLのバリデーション

可能な限り適切な HTML を記述すること。
バリデーションツール: W3C HTML validator
<!-- Bad -->
<title>Test</title>
<article>This is only a test.

<!-- Good -->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <article>This is only a test.</article>
  </body>
</html>
HTMLのスタイルルール

ドキュメントタイプ

HTML5 を使用する。XHTMLは使用しない。
<!DOCTYPE html>
<html>
  ...
</html>
意味のある HTML を書く

見出しの為の h 要素、段落の為の p 要素、アンカーの為の a 要素など、文脈に合った適切な HTML タグを使用しマークアップすること。
<!-- Not recommended -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- Recommend -->
<a href="recommendations/">All recommendations</a>
マルチメディアの代替コンテンツ

マルチメディアの要素には、代替コンテンツを提供すること。
画像には alt 属性に意味のある代替テキストを、動画・オーディオコンテンツにはキャプションを記述します。
※意味を持たない画像については（装飾的な用途の場合など）代替テキストは記述せずに alt="" とします。
<!-- Not recommended -->
<img src="spreadsheet.png">

<!-- Recommend -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
実体参照

UTF-8 において、© &copy; — &mdash; ☺ &#x263a; などの実体参照を使用する必要はありません。
例外として HTML で特別な意味を持つ < & " ' には使用します。
<!-- Not recommend -->
<h1>The "&" character</h1>
<p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>

<!-- Recommend -->
<h1>The &quot;&amp;&quot; character</h1>
<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
タグの省略

省略できるタグはあるが、基本的には省略しないこと。
タグを省略することでファイルサイズの最適化などに良い影響をもたらす部分もありますが、省略しないことが認知されすぎているため、省略しないことをルールとします。
省略できるタグの参考: HTML5 specification
<!-- Not recommend -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

<!-- Recommend -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>
type 属性

CSS と JavaScript の type 属性は省略します。
HTML5 ではデフォルトで解釈されるため必要ありません。
<!-- Not recommend -->
<link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css">
<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>

<!-- Recommend -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
HTMLの書式ルール

全体的な書式

ブロック要素・リスト要素・テーブル要素は改行してから記述し、それらの子要素にはインデントを入れます。
※例外として、改行による空白が問題になる横並びリストなどの場合は、li 要素をすべて一行で書いてもよい。ただし、そうでなければならない旨をテンプレートエンジンのコメントとして記載しておくこと。
<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>

<ul>
  <li>Moe</li>
  <li>Larry</li>
  <li>Curly</li>
</ul>

<table>
  <thead>
    <tr>
      <th scope="col">Income</th>
      <th scope="col">Taxes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$ 5.00</td>
      <td>$ 4.50</td>
    </tr>
  </tbody>
</table>
HTML引用符

属性値の引用符は、ダブルクオーテーション " を使用します。
<!-- Not recommend -->
<a class='maia-button maia-button-secondary'>Sign in</a>

<!-- Recommend -->
<a class="maia-button maia-button-secondary">Sign in</a>