GLANZ. CREATIVE WORKS

HTML

セマンティック・アクセシビリティ、一貫性、メンテナンス性を重視したHTMLマークアップのガイドライン

ガイドラインの目的

HTML ガイドラインは、次の 3 つを主な目的として規定しています。

  • セマンティック・アクセシビリティ
    コンテキスト(文章などの前後の脈絡・文脈)によって最適なマークアップができること、普遍的でアクセシブルなマークアップができることを目指します。
  • 一貫性
    一貫したルールを設けることで、個人の好みや解釈による品質のバラツキを抑え、プロジェクト間でも混乱が少なくなることを目的としています。
  • メンテナンス性
    デザインの変更にも柔軟に対応できる汎用的な構造とし、コンポーネント単位で影響範囲を把握しやすく管理できることを重視しています。

基本ルール

  • HTML のみでマークアップする
    HTML ファイル内では、基本的に HTML のマークアップのみを記述します。
    スタイルや動的な処理は分離し、HTML の可読性と保守性を高めます。
Tailwind CSS などのユーティリティクラスを直接 HTML に記述する場合など、プロジェクトで認められた例外についてはこの限りではありません。
  • スタイリングは外部 CSS で行う
    デザインやレイアウトの指定は、外部 CSS ファイルで管理します。
    これにより、HTML と CSS の責務を明確に分離できます。
  • 動的処理は外部 JavaScript で行う
    インタラクションや動的な処理は、外部 JavaScript ファイルで実装します。
    HTML 内に直接スクリプトを書くことは避けてください。
  • 正しい HTML 記述とバリデーション
    HTML は可能な限り正しく記述し、W3C バリデーターなどで検証を行ってください。