HTMLコーディングガイドライン

標準仕様

HTML Living Standard に準拠したマークアップを行うこと。(HTML5は2021年1月28日に廃止)
バリデーターは HTML Conformance Checkers を用いて行い、Error(エラー)項目は要修正。

参考 :
HTML5とHTML Living Standardの違いについて
HTML Living Standard 要素一覧

DOCTYPE宣言

html5の宣言は下記を使用。

<!DOCTYPE html>

言語指定

対象ページの言語に併せて<html>タグにlang属性を設定。
多言語サイトの場合はlinkタグのhreflang属性も併せて設定。

<html lang="ja">

文字コード

特に指定がない限り、 UTF-8を使用。

<meta charset="UTF-8">

viewportの設定

特に指定がない限り、下記を使用する。

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS / JavaScript の読み込み

  • CSS / JavaScript を読み込む場合は基本的に Minify 化したファイルを使用する。
  • CDNはプロジェクトに併せて適宜使用する。
  • CSS / JavaScript をインラインで出力させる場合は基本的にシステムによって自動出力するように設定し、headerファイルやfooterファイルに直接記入をしない。
    プロジェクトの都合上、インラインでの記入が必要な場合は極力HTML部分と切り分けて記入をすること。
  • リソースファイルのURLを記載する際にプロトコル( https:// )の省略は不可。
  • リソースファイルはCDNでも必ずSSL化されたURLを採用すること。

ID と class について

CSSによるスタイリングは基本的にclass指定によって行ってください。
JavaScriptによるタグ指定は基本的にID指定によって行ってください。

スタイリングに用いるclass名のルールはBEMを採用してください。

BEM記法について

参考 : https://qiita.com/takahirocook/items/01fd723b934e3b38cbbc

https://zenn.dev/nagan/articles/dac6fa662f4dab

elementは必ず一つずつ使用すること。複数のelement を使用するのはNGです。

○ : about__box , about__felx-item about-service__heading
✕ : about__flex__item

取り扱いに注意が必要なタグについて

<strong><b><mark><i><em>

  • テキストの意味合いを強調したい場合は<strong>タグを使用し、それ以外は基本使用しない。
  • デザイン上、太字や斜体にしたい場合はCSSによる装飾を行うこと。

<small>

  • 「免責事項」 や 「コピーライト表記」など、一般的に小さく表記されるテキストに使用する。
  • 文字を小さくする目的での使用は不可。フォントサイズの調整はCSSで行うこと。

<blockquote> <q>

  • <blockquote>タグは複数文を引用、<q>タグは文章未満のテキストを引用する際に使用するという違いがあるが、基本的に<blockquote>タグの使用で問題ない。
  • 引用をする際は引用文とそうでない文章との違いがはっきりわかるような装飾を必ず行うこと。

<ol><ul>

  • 箇条書きの順番に意味がある場合は<ol>、意味がない場合は<ul>と使い分けること。

<a>

内部リンク

基本的に絶対パス( https:// から始まるURL ) or ルート相対パス( ドメイン直下の / から始まるパス ) を用いて記述すること。
相対パスはリンク切れを引き起こしやすいため非推奨。

別タブで開く

target=”_blank” / target=”_new” のいずれかを使用する場合、内部リンク外部リンクに関わらず必ず rel=”noopener” を併せて記述すること。