html

HTML スタイルガイド

このスキルでは、Google の HTML スタイルガイドの規約を適用し、クリーンでセマンティックかつ保守しやすい HTML コードを実現します。

基本原則

ドキュメント構造

HTML5 の doctype と UTF-8 エンコーディングを必ず使用します。

<!doctype html>
<meta charset="utf-8">
<title>Page Title</title>

セマンティック HTML

要素はそれぞれの目的に応じて使用します。

• 階層構造には見出し（h1～h6）
• 段落には p
• リンクとナビゲーションには a
• インタラクティブな操作には button
• クリック可能な要素に div を使用しない

<div onclick="goToRecommendations();">All recommendations</div>


<a href="recommendations/">All recommendations</a>

関心の分離

構造（HTML）、プレゼンテーション（CSS）、動作（JavaScript）を厳密に分離します。

• インラインスタイル（style 属性）は使用しない
• インラインイベントハンドラー（onclick など）は使用しない
• 必要最小限の CSS ファイルと JavaScript ファイルをリンクする

<h1 style="font-size: 1em;">HTML sucks</h1>
<center>Centered content</center>


<!doctype html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>

HTML スタイルルール

有効な HTML

• W3C HTML validator で検証した有効な HTML コードを使用する
• 開始タグと終了タグが正しく記述されていることを確認する
• 要素を正しく入れ子にする

<title>Test</title>
<article>This is only a test.


<!doctype html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

プロトコル

埋め込みリソースには必ず HTTPS を使用します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

マルチメディア

アクセシビリティのために代替コンテンツを用意します。

• 画像には意味のある alt テキストを使用する
• 動画や音声には文字起こしやキャプションを用意する
• 装飾のみを目的とする画像には alt="" を使用する

<img src="spreadsheet.png">


<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
<img src="decorative-border.png" alt="">

文字参照

（特殊な HTML 文字を除き）文字参照は使用しないでください。

• 例外：<、&、および不可視文字
• UTF-8 エンコーディングをそのまま使用する

The currency symbol for the Euro is “&eur;”.


The currency symbol for the Euro is "€".

省略可能なタグ

ファイルサイズを最適化するため、省略可能なタグの省略を検討します。

<!doctype html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>


<!doctype html>
<title>Saving money, saving bytes</title>
<p>Qed.

type 属性

CSS と JavaScript では、type 属性を省略します（HTML5 のデフォルトが適用されます）。

<link rel="stylesheet" href="styles.css" type="text/css">
<script src="script.js" type="text/javascript"></script>


<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

ID 属性

id 属性の使用を最小限にします。

• スタイル指定には class を優先する
• スクリプトには data-* を優先する
• 必要な場合は必ずハイフンを含める（例：userProfile ではなく user-profile）
• グローバルな window 名前空間の汚染を防ぐ

<div id="userProfile"></div>


<div aria-describedby="user-profile">
  <div id="user-profile"></div>
</div>

書式ルール

インデント

2 つのスペースでインデントします（タブは使用しません）。

<ul>
  <li>Fantastic
  <li>Great
</ul>

大文字・小文字

次の項目は小文字のみを使用します。

• 要素名
• 属性
• 属性値（テキスト／CDATA を除く）

<A HREF="/">Home</A>


<img src="google.png" alt="Google">

空白文字

行末の空白文字を削除します。

<p>What?_


<p>Yes please.

ブロック要素

各ブロック、リスト、テーブル要素は改行して記述します。

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>

<ul>
  <li>Moe
  <li>Larry
  <li>Curly
</ul>

<table>
  <thead>
    <tr>
      <th scope="col">Income
      <th scope="col">Taxes
  <tbody>
    <tr>
      <td>$ 5.00
      <td>$ 4.50
</table>

行の折り返し

読みやすさのため、長い行は折り返します（任意ですが推奨）。

<button
  mat-icon-button
  color="primary"
  class="menu-button"
  (click)="openMenu()"
>
  <mat-icon>menu</mat-icon>
</button>

引用符

属性値には二重引用符を使用します。

<a class='maia-button maia-button-secondary'>Sign in</a>


<a class="maia-button maia-button-secondary">Sign in</a>

コード品質のガイドライン

コメント

複雑な箇所を説明するためにコメントを使用します。

<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

対応項目

TODO: キーワードを使って TODO を示します。

{# TODO: Revisit centering. #}
<center>Test</center>

クイックリファレンス

ルール	規約
Doctype	<!doctype html>
エンコーディング	<meta charset="utf-8"> を使用した UTF-8
プロトコル	すべてのリソースに HTTPS
インデント	2 つのスペース
大文字・小文字	小文字のみ
引用符	二重引用符（"）
type 属性	CSS／JS では省略
セマンティック要素	用途に応じた要素を使用
アクセシビリティ	画像には必ず alt を指定
ID	使用を最小限にし、ハイフンを含める

追加リソース

• references/html-detailed.md - HTML のパターンと例外的なケースを網羅した詳細情報
• W3C HTML Validator
• Google HTML/CSS Style Guide

まとめ

次のような HTML を記述します。

• 有効：W3C の検証に合格する
• セマンティック：意図された用途に応じた要素を使用する
• アクセシブル：alt テキストと適切な構造を含める
• 分離されている：インラインスタイルやスクリプトを使用しない
• 一貫性がある：書式規約に従う
• 小文字：すべての要素名／属性名が小文字
• セキュア：すべてのリソースに HTTPS を使用する