弊社では常に高品質の制作物を提供するために、独自のガイドラインを設定しております。
以下にそのガイドラインの一部をご紹介いたします。
| 案件 | HTMLバージョン |
|---|---|
| 新規ページ作成・リニューアル | HTML5 |
| 既存ページ一部改修 | 既存ページのバージョンに従う |
特別な理由がない限りHTML5を積極的に使用する事。
新規サイトでのHTML4.01,XHTMLの使用は原則禁止とする。
W3Cの勧告に基づいたマークアップとする。
検証には「The W3C Markup Validation Service」を用いて、"Error"および"Warning"判定の無いページを作成する。
ただしパフォーマンスが低下する場合はその限りではない。
文章構造を理解し、要素本来の意味に従ったコーディングとする。
div要素やspan要素やあくまでレイアウトの補助として使用する。
特にdiv要素の内部にテキストを直接記述することはNGとする。（要素として文章的な意味を持たないため）
table要素を積極的に利用したレイアウトも、同様の理由でNGとする。（レイアウト目的ではないtable要素の使用はOK）
HTML5使用時はセクション関連のタグ（hedar,footer,nav,section,aside,article）を文脈に合わせて積極的に使用すること。
なおhタグを内包しない場合はdiv要素に置き換えること。
コードの可読性を配慮し、HTML構造に合わせて必ずインデントを施す。
インデントにはTAB（半角スペース 4つ分）を使用し、全角・半角スペースは使用しない。
h要素（h1～h6）は文書構造を考え、その段落の見出しとなるテキストをマークアップする。
またその際、全体の文書構造を考え、ページの主となる見出しにはh1を用いて、以後、h2,h3…を用いる。
原則h1要素はページに必ず１か所必要である。（SEO 対策含む）
またh1要素は1ページに1つとし、複数使用を禁止とする。
本文となるテキストに使用する。
見出し以外の全てのテキストに使用することも可能だが、後述するol要素、li 要素、table要素の方がより適切ではないか考慮すること。
箇条書きテキストにはul要素を使用する。
それ以外にもグローバルナビ、パンくずリストなど、文章構造として箇条書きだと思われる個所に積極的に使用する事。
なお箇条書きの順番に明確な意味を持つ場合に限りol要素を使用する。
表組データにのみ使用する。表の見出しにはth要素を、表のデータ部分にはtd要素を使用する。
また表組の本体には必ずtbody要素を定義すること。
<table> <td>住所</td> <td>立山町前沢</td> </table>
<table> <tbody> <th>住所</th> <td>立山町前沢</td> </tbody> </table>
alt属性の記述を必ず行う。alt属性には画像の代替となるテキストを指定する。
特に画像テキストの場合は、そのテキストをそのままalt属性に記載する。
装飾用の画像など、適切な代替テキストが存在しない場合は「alt=””」とする。
なお装飾用途の画像はimg要素は使用せず、極力スタイルシートにて背景として指定する。
原則開発者のメモとしてコメントタグは利用しない。
なお可読性を上げる目的で各タグの終端にクラス名、ID名を記載する方法（閉じタグ）があるが、適切にインデントがつけられている場合は記載しない。
仮にクラス名を変更した際に、その要素に対応する閉じタグを修正する作業が発生するなど、デメリットがあるためである。
電話番号に関してはtel:プロトコルを使用し、明示的にその番号を指定する。
意図しない電話番号の自動リンクを無効にするために、以下のメタタグを必ず用いること。
<meta name="format-detection" content="telephone=no">
パソコン専用サイトでも必ずviewportは設定を行うこと。
その際、コンテンツ幅+100として余白分を考慮して指定する。（以下、コンテンツ幅が980pxの場合）
<meta name="viewport" content="width=1080">
レスポンシブサイトおよびスマホ・タブレット専用サイトの場合は、以下の記述を基本とする。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
