文書構造に関する HTML の決まり事。
UTF-8 を使う。
<meta charset="utf-8"><!-- start / { name } --> でコメント開始箇所、 <!-- end / { name } --> で終了箇所を書く。コメントを書く場合は必ず両方書こうね。
コメントの下はインデントをいれる必要はないよ。
<!-- 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 -->こんな感じ:
<!-- TODO: remove -->- インデントは半角スペース2つで行います
- シングルクォーテーション (
') ではなくダブルクォーテーション (") を使います
ブロック要素・リスト要素・テーブル要素は改行してから記述し、これらの子要素にはインデントを入れる。
<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>インライン要素や <br> タグでは改行を挟まない。
<!-- NG -->
<p>てきすとてきすと
<a href="">リンク</a>
<br>
てきすとてきすと</p>
<!-- OK -->
<p>てきすとてきすと<a href="">リンク</a>てきすとてきすと</p>HTML の要素、ID やクラス名は小文字のみで行おう。
コメントには大文字を使ってもいいよ。
<!-- NG -->
<div class="LAYOUT"> ... </div>
<DIV CLASS="module"> ... </DIV>
<!-- OK -->
<div class="layout"> ... </div>
<div class="module"> ... </div>
<!-- start / RSS Feed -->
<div class="rss-feed"> ... </div>
<!-- end / RSS Feed -->HTML5 でいこう。
<!DOCTYPE html>html 以下の head , body にもインデントを取ろう。
main 要素さん、こんにちは。
<!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 / scripts -->
<div class="scripts">
...
</div>
<!-- end / scripts -->
<!-- start / analysis-code -->
<div class="analysis-code">
...
</div>
<!-- end / analysis-code -->
</body>
</html>HTML ページではルート要素は <html> だよね。
このルート要素には言語コードを指定しておこう。
日本語の指定だとこうだ:
<html lang="ja">
...
</html>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>HTML5 のセマンティクスを補うために role 属性を使ってそれぞれに役割を明確にしよう。
特に main 要素を使う場合は、ユーザーエージェントが要件とされる role マッピングを実装するまで role="main" を指定しよう。
<main role="main">
...
</main>見出しは <h1> ~ <h6> 要素、段落なら <p> 要素、順序付きリストなら <ol> 要素、コンテンツの意味に適した要素を使うようにしよう。
また、 <dl> で使う <dt> と <dd> のように要素同士が関係を持っているものがあるけど、これらの関係性を見えにくくするような HTML を組んではいけないよ。（バリデーションをかけたらすぐにエラーが返ってくると思うけど）
<!-- NG -->
<dl>
<dt>Definition Term</dt>
<span class="separation"></span>
<dd>Definition Description</dd>
</dl>
<!-- OK -->
<dl>
<dt>Definition Term</dt>
<dd>Definition Description</dd>
</dl>div や span を使う前に他に適した要素が本当に無いのか、以下のサイトなどで一度確認してみて。HTML5 になってから意味付けをする要素も増えたしね。
要素に当てる style 属性は使ってはいけない。
理由はスタイルの適用箇所が CSS ファイルと HTML ファイルにあったらどちらにあるか分かり難くなるから.. とか、まぁいろいろね:
<!-- NG -->
<p style="color: red">赤い文字</p>スタイリング目的で要素を決めるのはもういい加減やめよう。
<center> といった書式方向を決める要素や、<font> といった見た目を変更するだけの要素は使ってはいけない。HTML5 では廃止予定になっていることが 1番の理由だけど、そもそも見た目を変更するために要素を選択するのは良くないからね。
それと <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>アウトラインを綺麗に保って機械（検索エンジン）にページを正しく解釈してもらおう。
そのためにはアウトライン形成に関係する section 要素や h1 ~ h6 要素などを理解して適切に使うことが必要だね。
また、こういった要素には見た目に関する強いプロパティ（ 余白や色 ）を割り当ててしまうと "見た目上の問題" からアウトラインが崩れてしまうことがあるので気をつけよう。
「完璧！」と思っても上手くできていないことがあるよね。大枠のアウトラインができた時とコーディングの最後は必ずツールを使ってアウトラインを確認しよう。
すべてが終わった時ではなくて、一部が完成したタイミング、もしくはあなたが書いているコードを常に監視して HTML コードの検証を行おう。コードが書き終わってから「Result: 27 Errors, 25 warning(s)」とか出るのが恐いからね。
Web での検証ツールは以下のものを使おう。
Error は基本的に 0 に、warnings は.. まぁできるだけ減そう。
Slim を使うよ。
面倒な山カッコ（ < , > ）を書かなくて済むからね。