読者です 読者をやめる 読者になる 読者になる

A Day In The Life

とあるプログラマの備忘録

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.

愚かな首尾一貫性は狭い心が化けた物である

◆アメリカの思想家Ralph Waldo Emerson (1803 - 1882) の名言

Foolish consistency is the hobgoblin of little minds. - 西尾泰和のはてなダイアリー
HTMLのコーディングスタイルについてはインデントだけ決めておけばいいかなと思ってます。