HTMLとCSSのコーディング規約をちゃんと勉強してみる(その２)

HTMLとCSSのコーディング規約をちゃんと勉強してみる(その２)

2016年3月21日

前回の続きです。

ドキュメント　タイプ
HTML5は全てのHTMLドキュメントで好ましい書式です。

<!DOCTYPE html>

text/htmlを使用することをオススメしています。
application/xhtml+xmlのようなXHTMLは使用しないで下さい。
しかし、空の要素に<br>を使うことはやめましょう。

HTMLの有効性

有効なHTMLを書きましょう。
W3C HTML validatorをテストで使用しましょう。

<!-- 悪い例 -->
<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>

意味論

目的にあったHTMLを使用しましょう。
それはアクセシビリティや再利用、効率のためにとても重要です。

<!-- 悪い例 -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- 良い例  -->
<a href="recommendations/">All recommendations</a>

代替メディア

マルチメディアには代替のコンテンツを提供しましょう。
可能な限り、画像にはalt属性をつけたり、動画には要約をつけましょう。
altをつけることによって、目の見えないユーザーに画像の意味を伝える事ができたり、
動画の内容がわからないユーザーにその意味を伝える事ができます。

<!-- 悪い例 -->
<img src="spreadsheet.png">

<!-- 良い例  -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

関係性の分離

マークアップ、スタイル、スクリプトを分離しましょう。
厳格にマークアップ、スタイル、スクリプトの三つの構成を保持しましょう。
これらはメンテナンス性のためにとても重要です。

<!-- 悪い例 -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
  <u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
  my website without doing everything all over again!</center>

<!-- 良い例  -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
<p>It’s awesome!

実体参照

実体参照は使わないようにしましょう。

<!-- 悪い例 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.

<!-- 良い例  -->
The currency symbol for the Euro is “€”.

オプションタグ

タグの省略をしましょう。
省略できるタグはHTML5 specificationに定義されています。

<!-- 悪い例 -->
<!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.

タイプ属性

スタイルシートやスクリプトのタイプ属性を省略しましょう。

<!-- 悪い例 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css">

<!-- 良い例  -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">

<!-- 悪い例 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>

<!-- 良い例  -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

error-reporting.com