サイトのマークアップをチェックするサービス「W3C Markup Validation Service」がなかなかすごい

B!
Screenshot 2013 06 04 23 01 18

先日会津で行われたCSS Nite in AIZU, Vol.1 with Microsoft「HTML5+CSS3 Web Camp 2013」というイベントに参加した時に
W3C Markup Validation Service
というサービスでマークアップの解析ができることを聞き、早速使ってみました。

W3C Markup Validation Serviceとは

Markup Validation ServiceはWorld Wide Web Consortium (W3C) によって作られた、HTML文書がHTMLやXHTML標準へ準拠しているかどうかを検証するためのサービスである。
via: W3C Markup Validation Service – Wikipedia

W3CとはWWWで利用される技術の標準化を目指している団体のことです。現在話題のHTML5にもこの団体が大きく関わっているとか。

要するに我々の書いているソースコードがW3Cの定めている標準のスタイルに合っているかをチェックしてくれるサービスというわけです。

The W3C Markup Validation Service

このページにアクセスし検証したいサイトのURLを打ち込めば、エラーや警告があるかどうかをチェックしてくれます。

そして、あまりのエラーの多さにヘコむ

Screenshot 2013 06 04 23 19 26

80 ??
(つд⊂)ｺﾞｼｺﾞｼ

80！？

80のエラー、そして4つの警告が出ました。

HTML5はまだ開発段階のため、1つの警告は必ず出るそうなのですが、あと3つの警告と80のエラー。凹む、これは凹む。

でも気を落とさずに。その下にはエラーや警告の理由について該当のソースコードの行数とともに解説が長々とあるのでページのソースコードを横において1つずつエラーをつぶしていきます。

エラーの例

基本的にエラーになっているのはHTMLやHTML5のマークアップの構文から外れているからなので、リファレンスとかを見ればだいたいわかります。

警告は「HTML4まではOKだけどHTML5からはあってもなくても同じ扱いだからできれば書かないで」みたいなやつ。
<script type="text/javascript">…</script>のtype="text/javascript"とか。

Screenshot 2013 06 04 23 36 45

例えば、これは1つ目のエラーですが、<li></li>が<nav></nav>の中にあります。


<nav>
  <li>りんご</li>
  <li>ばなな</li>
  <li>みかん</li>
  <li>ぶどう</li>
</nav>

こんな感じ。

ここでHTML5のリファレンスを見ると

4.3.5.9 The li element
The li element represents a list item.

Start tag: required End tag: optional
Categories:
None.
Contained By:
Inside ol elements.
Inside ul elements.
Inside menu elements.

via: The li element – HTML5 Reference

このようになっています。

「<li>〜</li>は<ul>〜</ul>、<ol>〜</ol>、<menu>〜</menu>のいずれかで囲みなさい」
ということですね。

<nav>を使いつつ、この決まりを守ると以下のようになります。


<nav>
  <ul>
    <li>りんご</li>
    <li>ばなな</li>
    <li>みかん</li>
    <li>ぶどう</li>
  <ul>
</nav>

エラーの大半はたいていこんなもんです。たまにクセモノもありますが、エラー文をコピペしてググればなんとかなるでしょう。

ひとつのミスが複数エラーの原因になっていることもあります。（ループしてるトコとか。）
1ヶ所直して10コエラーが消えたときはさすがにびっくりしました。

“囲み忘れ”に注意

特にエラーが多くて目立ったのが、「囲み忘れ」。
<div>や<p>を単独で放置している箇所がエラーのほとんどでした。

デザインが崩れる原因もこの「囲み忘れ」「閉じ忘れ」がほとんどだと思っているのでこれを機会に今後は気をつけていきたいところですね。

少し特殊なエラーや警告

これは少し特殊だなと思ったエラーや警告の例を紹介します。

WordPress特有の rel=”category tag” によるエラー

Screenshot 2013 06 05 1 17 11

テーマデザインに欠かせないWordPressテンプレートタグの中に「the_category」など記事の含まれるカテゴリーをリンク付きで表示できるタグがあります。

テンプレートタグ/the category – WordPress Codex 日本語版

ただしこれらを使って作られるリンクは以下のような形式になっています。

<a href="カテゴリのURL" title="…" rel="category tag">カテゴリ名</a>

このrel="category tag"という部分がエラーの原因になっていました。

4.12.5.1 Link type “alternate”
4.12.5.2 Link type “author”
4.12.5.3 Link type “bookmark”
4.12.5.4 Link type “help”
4.12.5.5 Link type “icon”
4.12.5.6 Link type “license”
4.12.5.7 Link type “nofollow”
4.12.5.8 Link type “noreferrer”
4.12.5.9 Link type “prefetch”
4.12.5.10 Link type “search”
4.12.5.11 Link type “stylesheet”
4.12.5.12 Link type “tag”
4.12.5.13 Sequential link types
4.12.5.13.1 Link type “next”
4.12.5.13.2 Link type “prev”
4.12.5.14 Other link types
4.12 Links — HTML5

HTML5でrelの中に含めることができるのは上に挙げたものだけ。しかし、ここに含まれないcategoryが入っていたためエラーがおきたというわけですね。

WordPress公式のフォーラムに
/wp-includes/category-template.phpをいじれば解決できるよ！
的なことが書いてあったのでチェックしてみたら163行目に


    $rel = ( is_object( $wp_rewrite ) && $wp_rewrite->using_permalinks() ) ? 'rel="category tag"' : 'rel="category"';

という部分がありました。

ここを直せばOKですが、バージョンアップで書き換わる可能性があります。そこでfunction.phpにおまじないを書いておきます。


<?php
function replace_rel( $text ) {
  $text = str_replace('rel="category tag"', 'rel="tag"', $text);
  $text = str_replace('rel="category"', '', $text);
  return $text;
}
add_filter( 'the_category', 'replace_rel' );
?>

これでrel="category tag"の部分がrel="tag"に、rel="category"の部分が空白に、それぞれ自動で置き換わります。

このおまじないは以下のページで紹介されていました。relの解説も丁寧に書かれているので非常にオススメです。

参考: wordpressで、rel=”category tag”が、html5でvalidじゃないと怒られる件とその対処 | xxxx7

HTML5バージョンのGoogle+ボタン

これは警告だったので無視してもまぁ大丈夫だけど…一応ね。

Update on Jan 08, 2012: Google has added a new option named “HTML5 valid syntax” to fix this problem:

  1. Visit plusone button
  2. Click Advanced options, then check the option HTML5 valid syntax
  3. Copy the codes into your site.

via: Solution: Element name g:plusone cannot be represented as XML 1.0 – Google Chrome Fans

昨年8月をもって、Google+ボタンもHTML5マークアップバージョンへの置き換えが必要になっていました。
それにしても昨年の8月ってけっこう前けど今まで知らなかった。さて誰か記事書いてたかな…


<g:plusone size="tall"></g:plusone>

さて気を取り直して、通常このようになっているGoogle+ボタンを、


<div class="g-plusone" data-size="tall"></div>

このような記述に換えればOKです。

via: ＋1 Button – Google+ Platform — Google Developers

エラー潰し完了！

そして、すべてのエラーと、開発段階のために発生する警告を除くすべての警告を除去完了。

Screenshot 2013 06 05 1 23 27

この状態になれば、現時点でW3Cが求めているHTML5のマークアップが完了したことになります。

まだ開発途中のため、今後仕様が変わってまた修正が入るかもしれませんが現状はこれでOKです。

ただ、CSSは

Screenshot 2013 06 04 17 18 46

…気が向いたらまた。。。

こんなことを思った

エラー潰しをしていただけですが、HTML構文の良い勉強になりました。
チェックだけなら簡単なのでお試しあれ。

The W3C Markup Validation Service

Post Views: 764
Categories:
B!