先日会津で行われた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を打ち込めば、エラーや警告があるかどうかをチェックしてくれます。
そして、あまりのエラーの多さにヘコむ
80 ??
(つд⊂)ｺﾞｼｺﾞｼ
80！？
80のエラー、そして4つの警告が出ました。
HTML5はまだ開発段階のため、1つの警告は必ず出るそうなのですが、あと3つの警告と80のエラー。凹む、これは凹む。
でも気を落とさずに。その下にはエラーや警告の理由について該当のソースコードの行数とともに解説が長々とあるのでページのソースコードを横において1つずつエラーをつぶしていきます。
エラーの例
基本的にエラーになっているのはHTMLやHTML5のマークアップの構文から外れているからなので、リファレンスとかを見ればだいたいわかります。
警告は「HTML4まではOKだけどHTML5からはあってもなくても同じ扱いだからできれば書かないで」みたいなやつ。
<script type="text/javascript">…</script>のtype="text/javascript"とか。
例えば、これは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” によるエラー
テーマデザインに欠かせない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:
- Visit plusone button
- Click Advanced options, then check the option HTML5 valid syntax
- 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
エラー潰し完了！
そして、すべてのエラーと、開発段階のために発生する警告を除くすべての警告を除去完了。
この状態になれば、現時点でW3Cが求めているHTML5のマークアップが完了したことになります。
まだ開発途中のため、今後仕様が変わってまた修正が入るかもしれませんが現状はこれでOKです。
ただ、CSSは
…気が向いたらまた。。。
こんなことを思った
エラー潰しをしていただけですが、HTML構文の良い勉強になりました。
チェックだけなら簡単なのでお試しあれ。
