HTMLコーディング規約を独自にまとめてみた
準拠する規格
- XHTML1.1に準拠したHTMLを作成すること
- フレームセットの使用は禁止
- CSS2.0以上に準拠したスタイルシートを作成すること
表現と意味の分離
文章の意味付けはHTMLで行い、表現はCSSで行うこと
以下の表現的HTMLはCSSに置き換えること
- center→text-align:center
- font→font-size:1.5em,color:red
- hr→ブロック要素のborderプロパティを使う
- s→text-decoration:line-through
- strike→text-decoration:line-through
- tt→font-family: monospace
- u→text-decoration:underline
- b→文章の途中で意味的に強調したい場合はemまたはstrongタグを使用し、見出しのように目立たせたい場合はh1〜6タグを使用すること
- i→font-style:italic
タグの意味づけと利用方法
- タグ本来の意味に合った使用をすること
- tableタグをレイアウトに使用しないこと
- blockquoteタグを文章のインデントのために使用しないこと
- brタグをマージンに使用しないこと
- スペーサーGIF画像禁止
- からっぽアンカー禁止
使用可能タグ一覧(headタグ内で使用するタグは省略)
意味的なHTML
- a
- abbr
- acronym
- address
- blockquote(テキストのインデントに使用しないこと)
- caption
- cite
- code
- dl
- dt
- dd
- dfn
- em
- h1,h2,h3,h4,h5,h6
- kbd
- li
- label
- legend
- ol
- p
- q
- samp
- strong
- sub
- sup
- table(レイアウトに使用しないこと)
- tbody
- td
- tfoot
- th
- thead
- tr
- ul
- var
レイアウト
- div
- span
フォーム
- button
- field
- form
- input
- option
- reset
- select
- submit
- textarea
その他
- br(スペースを空けるためや、意味的にはdiv要素やp要素の方が適切である場合は使用しないこと)
- img
- pre
- script(ソースを直接書かないこと)
使用可能属性一覧
意味的な属性
- caption
- class
- data
- href
- hreflang
- id
- lang
- rel
- rev
- scope
- summary
- type
その他
- accesskey
- action
- alt
- Javascriptイベント各種(onclick..etc)
- name(input属性の時のみ可)
- src
- style
- tabindex
- title
- value
必須属性
各タグでの必須となる属性を示す
- imgタグにはsrc属性とalt属性を必ず指定すること
- blockquoteまたはqタグにはcite属性を必ず指定すること
- aタグにはhref属性を必ず指定すること
- inputタグにはtype属性を必ず指定すること
コーディングスタイル
メンテナンスしやすいコードにするために守ること
- インデントはスペース2文字とする
- 最低限、後から自分で読んで理解できるコードを書くこと
- 他の人が読んでもわかるコードを書くように心掛けること
2008年4月11日追記
コーディングスタイルについて素晴らしい金言を発見したので追加しておきます。
Foolish consistency is the hobgoblin of little minds.HTMLのコーディングスタイルについてはインデントだけ決めておけばいいかなと思ってます。
愚かな首尾一貫性は狭い心が化けた物である
◆アメリカの思想家Ralph Waldo Emerson (1803 - 1882) の名言
Foolish consistency is the hobgoblin of little minds. - 西尾泰和のはてなダイアリー
