Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

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 属性

CSSJavaScripttype 属性は省略する。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>

セマンティクス

divspan を使う前に他に適した要素が本当に無いのか、以下のサイトなどで一度確認してみて:

インラインスタイル

要素に当てる 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 属性では行わない。それぞれにスタイルを振って widthhight の指定で行う:

<!-- 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>