HTML Coding Guide
ひとまず書き殴った。
プロジェクトで HTML の「一貫性を保つ」ためのドキュメント。
このルールを守っていくのは難しい（しんどい）場合はドキュメント内容を見直そう。
このドキュメントでは以下の内容を含んでる。
- エンコードなどのメタルール
- インデントなどの書式ルール
- 基本とするドキュメントタイプなどのコーディングルール
メタルール
エンコード
UTF-8 を使用する。
<meta charset="utf-8">
コメント
<!-- start / { name } --> ・ <!-- end / { name } --> の start と end を対応させた形式で書く:
<!-- start / header --> <header> ... </header> <!-- end / header -->
他でコンポーネント化されているものなど、HTML だけではわかりにくいものにはコメントを書こう:
<!-- start / header --> {{include file="header.tpl"}} <!-- end / header --> <!-- start / estimate form --> <%= form_for(@estimate, :html => {:class => 'basic_form', :multipart => true}) do |f| %> ... <% end / %> <!-- end / estimate form -->
書式ルール
インデントや改行箇所
ブロック要素・リスト要素・テーブル要素は改行してから記述し、これらの子要素にはインデントを入れる:
<div class="module"> <p>paragraph</p> </div> <ul> <li>list item</li> <li>list item</li> </ul> <table> <tr> <th>table header</th> <td>table data</td> </tr> </table>
インライン要素では改行を行わない:
<!-- NG --> <p>てきすとてきすと <a href="">リンク</a> <br> てきすとてきすと</p> <!-- OK --> <p>てきすとてきすと<a href="">リンク</a>てきすとてきすと</p>
コーディングルール
ドキュメントタイプ
HTML5 でいこう:
<!DOCTYPE html>
link, script で外部ファイルを読み込む際の type 属性
CSS と JavaScript の type 属性は省略する。HTML5 ではデフォルトの言語として解釈されるため。
例:
<!-- NG --> <link rel="stylesheet" href="stylesheets/base/base.css" type="text/css"> <script src="javascripts/jquery.min.js" type="text/javascript"></script> <!-- OK --> <link rel="stylesheet" href="stylesheets/base/base.css"> <script src="javascripts/jquery.min.js"></script>
role 属性
それぞれに役割を定義する。
今後使う予定があるのはランドマークロールカテゴリーで、具体的には以下のものを使用する:
- role="banner"
- role="main"
- role="contentinfo"
- role="navigation"
- role="search"
- role="complementary"
- role="application"
main 要素を使うのであれば、この中の role="main" 属性は必ず指定する:
<main role="main"> ... </main>
セマンティクス
div や span を使う前に他に適した要素が本当に無いのか、以下のサイトなどで一度確認してみて:
インラインスタイル
要素に当てる style 属性は使ってはいけない。
理由はスタイルの適用箇所が CSS ファイルと HTML ファイルにあったらどちらにあるか分かり難くなるから.. とか、まぁいろいろ:
<!-- NG --> <p style="color: red">赤い文字</p>
HTML 要素によるスタイリング
スタイリング目的で要素を決めるのは絶対にやめよう。
<center> といった書式方向を決める要素や、<font> といった見た目を変更するだけの要素は使ってはならない。HTML5 では廃止予定になっていることが理由だけど、そもそも見た目を変更するためだけの要素は使わない方がいい。
また、<br> タグについては以下のように使ってはならない:
- 連続した
<br>は使わない - スタイルを整えるために
<br>を使用してはならない
マルチメディアの代替コンテンツ
画像が表示されない場合、音声で読み上げられる場合を考えて <img> には alt 属性を指定しておく。
alt に画像内の文章をすべて書けというわけではないが、「何の画像か？」というのが分かる程度には書こう。
写真やイラストだけの画像に alt をつける必要はないけどね。
例:
<!-- NG --> <img src="figure-tax-increase.png" alt=""> <!-- OK --> <img src="figure-tax-increase.png" alt="2015年10月に消費税率を10%に引き上げる政府の大増税計画の推移"> <img src="picture-mainview.png" alt="">
タグの省略をしない
li, dt, dd, p, tr, th, td, rt, rp, optgroup, option, thread, tfoot で終了タグの省略は行わない。
フォーム
input 要素、 textarea 要素の幅・高さの指定を cols 属性や rows 属性では行わない。それぞれにスタイルを振って width や hight の指定で行う:
<!-- NG --> <input type="text" colos="50" rows="10"> <textarea id="" name="" cols="30" rows="10"></textarea> <!-- OK --> <input type="text" class="input-kana"> <textarea id="" name="" class="textarea-note"></textarea>
基本的な構造
html 以下の head , body にもインデントを取る:
<!DOCTYPE html> <html lang="ja"> <head> <title> ... </title> </head> <body> <!-- start / header --> <header> ... </header> <!-- end / header --> <!-- start / main --> <main role="main"> ... </main> <!-- end / main --> <!-- start / footer --> <footer> ... </footer> <!-- end / footer --> <!-- start / analysis-code --> <div class="analysis-code"> ... </div> <!-- end / analysis-code --> </body> </html>
