HTML5 の構文チェック(Validation)に利用したサービスやツールなどのまとめ

わたしが当ブログのWordPressテーマを作成したときに、HTML5の構文チェック(Validation)をした、ツールやサービスを紹介します。

他にもいろんな無料サービスがあるとおもいますが、参考までにどうぞ。

HTML5の構文チェックサイト

W3Cによる定番Validator

World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム:略称W3C)は1994年10月に設立された団体で、World Wide Webで使用されているいろいろな技術の標準化を進める非営利団体です。今日のインターネット技術の基礎を築いた有名な団体の一つですね。

W3Cが提供しているHTMLの構文チェッカーがこちらです。

The W3C Markup Validation Service

The W3C Markup Validation Service

ひとまずHTMLでWebページを一つ作ったらこれでチェックしてみて、指摘される点を修正していけばいいでしょう。

WordPress だとPHPファイルを分割するので、足りない部分の指摘が出ることが多いです。たとえばheader.php やfooter.php を分割していてindex.php をチェックしたら、「ヘッダー部分がないよ」「フッター部分がないよ」と修正ポイントが表示されます。

エラー箇所を修正してから、ふたたびチェックし、エラーが消えていれば、問題ありません。

シンプルな構文チェッカー

Validator.nu (X)HTML5 Validator

Validator.nu (X)HTML5 Validator

こちらもよく使われているサイトです。W3Cよりシンプルで、見やすく、こちらのほうが使いやすいかもしれません。色付きで文字が大きく、エラー箇所が分かりやすいです。

いろんなサイトを見てみると「こちらのほうが使いやすい」という方が多いです。

構文以外のタグの使い方は文脈に合わせて決めていく

なお、両サイトとも、たとえば見出し要素について「ここはh3じゃなくてh4のほうがいいよ」とかは、教えてくれません。また、「<div>よりも<section>タグでを使わないの?」とか「そこは文脈上<aside>のほうがふさわしいよ」といったアドバイスをくれるものではないので、ご注意を。

あくまで構文の間違いを指摘するものであって、文脈に沿ったアドバイスはしてくれません。してくれるのは、「</div>が抜けているよ」とか「ここはidではなくclassを使うべきです」といった指摘が中心になります。

というのも、そういったタグの使い方は、各々のWebページの文脈に大きく依存するからです。同じサイトであっても、あるページでは広告が<article>内に入れるべきであっても、別のページでは<article>の外に設置するのがふさわしい場合があります。

こういうのは機械的に判別できるものではなく、サイト運営者の判断に任されています。

HTML5から導入された、<section>や<article>や<aside>といった新しいタグの使い方は、

HTML5(W3C Candidate Recommendation 2014-02-04)

HTML5 日本語訳(上記の日本語訳サイト)

あるいは、後述する本などを参考にするといいでしょう。

HTML5の構文チェックツール

ブックマークレット

HTML5 Validator Bookmarklet

HTML5 Validator Bookmarklet

こちらはツールバーにコピー&ペーストして設置しておけば、クリックひとつで構文チェックをしてくれるブックマークレットです。簡単に使えて便利です。

Google Chrome 拡張機能

アウトラインの表示

Chrome ウェブストア - HTML5 Outliner

Chrome ウェブストア – HTML5 Outliner

HTML5のアウトラインを見やすく表示してくれます。本の目次の章・節・項のように、見出しが適切に設定されているか、ツリー構造で表示してくれます。

これを使って大手サイトのアウトラインをチェックしてみるのもいいかもしれませんね。

HTML5のサイトかを判定する

Chrome ウェブストア - HTML5 markup detectorの表示

Chrome ウェブストア – HTML5 markup detector

これは表示されているWebページがHTML5で作られているかを表示するだけの、単純な拡張機能です。

当ブログのテーマはHTML5で作られているので緑マークが表示され、たとえば楽天のトップページはXTHML で作られているので赤い表示になっています。ちなみに、WordPress の管理画面もバージョン3.8.1まではXHTMLで作られていました。

HTML5関連書籍

次にHTML5を学習するのにおすすめの本を紹介していきます。読み物としての本や、いわゆる教科書的なもの、サイトを作りながら学んでいくもの、レファレンスに使える本、などが中心です。

いまのところ辞典は購入せず、最新の情報はネットのいろいろなサイトを利用しています。

自分が学習した本

HTML5 とCSS3 について、最初の1冊としておすすめできる、読みやすい教科書です。

まったくの初心者でも理解できるとおもいます。専門的になりすぎず、語り口もやわらかいので、独学でも読み進められるでしょう。HTMLやCSSを同時に学ぶことができるのも、この本の特徴です。

 

この本はサンプルサイトを作りながらHTML5とCSS3の使い方を学んでいく本です。わたしは5日間くらいかけてサンプルサイトを作りました。

一つ一つのコードを書く作業の前後に「それをする理由」と「その意味」が解説されているので、「いま自分が書いているコード」をしっかりと理解できます。分厚い本ですが、じっくりと学ばせてもらいました。

 

HTML5で書くときに、曖昧なまま何となく書いているタグなどを詳しく解説してくれます。項目の数を絞っているので、説明にページ数が多く割かれています。

「正しい例」と「間違った例」の両方を掲載して、どうダメなのかを実践的に理解できます。たとえば、<section>と<div>の違いについて知りたい場合や、<article>や<aside>の使い方がよくわからない方は、参考にされるといいでしょう。

ブログやビジネスサイトでの書き方のサンプルも載っていて、とてもわかりやすいです。HTML5から導入されたタグをじっさいに使うときに、とても参考になりました。

購入前は「カルタなんかいらんしなぁ・・・」と思って、書店で手に取ることもなかったですが、いまでは「これから初めてHTML5 でWebサイトを作る人には一番参考になる本」だとおすすめします。

サイトを作ってから読んだおすすめの本

HTML5で何が変わったのか、何ができるのかを、歴史的にも、技術的にも広く知ることができます。サイト作りだけでなく、アプリ作成についても書かれています。

 

作りながら理解したいのならエビスコムさんもおすすめ。これ一冊で基本的な作り方を身につけることができます。

 

これも標準的な知識と手順を身につけるのにいいですね。よく売れている本です。

 

こちらはさらにレスポンシブWebデザインに対応。Twitter Bootstrap やFoundation  の使い方についても紹介されています。また、overflow とclearfix の使い分けについてコラムで解説しているなど、かゆいところに手の届く1冊です。

 

HTML5とCSS3について、基本的な意味と使い方を学べます。けっこう細かく解説があるので1冊目として読むのはつらいかもしれません。2冊目にちょうどいいでしょう。見開き2ページで1テーマだから、レファレンス本としても使えます。

この本の内容を理解できたら、次はサイトを作りながら勉強していく段階になるはずです。

 

これは使い方のテクニックやサンプル集。よく使う方法がたくさん載っています。HTML5でサイトを作ったことがある人には「おぉっ!なるほど!」と納得できる方法が満載です。

 

関連記事

CSS で h タグをちょっとだけカスタマイズしてみました

見出しは超重要! 多くのブロガーさんや大手サイトでは「記事の書き方」を解説してくれています。それを読むと、見出しを効果的に使うことが、読みやすい記事を書く上での必須項目であるとわかります。 見出しの種類 見出しというのはHTMLで書くときの…

Google の「モバイル フレンドリー テスト(Mobile-Friendly Test)」に合格して検索結果に「スマホ対応」ラベルを表示させよう

Google Chrome の検索結果に「スマホ対応」のラベルが付くようになった このところ Google はモバイル向けのツールを多く提供してきています。またモバイル端末で Google 検索をすると、タイトルの下に灰色の文字で小さく「ス…

WordPress のテーマを自作してみる

レスポンシブWebデザインを勉強して自作のWordPressテーマを作っています。 1月に『作りながら学ぶHTML/CSSデザインの教科書』を読んで、なんとなくHTML5とCSS3の初歩を理解しました。次に『WordPress レッスンブッ…

自作 WordPress テーマのためのメモ

前回のところから、もうすこしおもしろいデザインにしたいと思って、いろんなサイトデザインを調べて見ることにしました。 とくに参考になったのが、 Themegraphy – WordPressテーマギャラリー Media Queri…

Google Developers の PageSpeed Insights で計測したら瞬間的にモバイル・PC共に99点になったので記念にキャプチャしておきました【追記あり】

ひさしぶりにプラグインや画像処理、jQueryなどの修正をしてみたら、瞬間的にPageSpeed Insightsで99点になりました。わたしはあまりこの数値にこだわりすぎないようにしているのですが、これだけの高得点はなかなか無いと思うので…