HTMLとCSSの文法チェックツール7選!よくある文法エラーも紹介

htmlとcssの文法をチェックできるバリデーションツール8つをおすすめ度をつけて紹介。初心者〜プロでもよくあるhtml/cssの構文ミスや、文法エラーとseoの評価の関連性についても解説します。w3cに基づいた正しい記述をしてユーザーが快適に閲覧できるwebページを目指しましょう。

htmlとcssの文法エラーとは?

htmlには「開始タグ」「閉じタグ」「入れ子」といった基本的なルールの他にも様々な記述のルールがあります。

記述のルールに沿わなかった場合、内容によっては一部のブラウザでうまく表示されないという不具合がでてしまいます。

今回はそんなhtmlの文法に沿っているかを確認するためのバリデーションツールを紹介します。

htmlでよくある文法ミス3つ

バリデーションツールで確認することもいいですが、まずはバリデーションに頼らずとも気をつけておきたい「よくある文法ミス」を紹介します。

閉じタグを忘れる

<div>
  <p>閉じタグはあるタグとないタグがあるから注意</p>
  <img src="img/sample.png" alt="イメージ" />

初心者のうちによくやってしまうミスです。

imgbrは終了タグがないタグなのでいいですが、入れ子の閉じタグは忘れやすいので注意が必要です。

入れ子のタグが別タグとクロスする

<div>
  <div>
    <p>閉じタグが特にクロスしやすい</p>
    <p>ミスの中でも見つけにくいもの</p>
    <p>インデントを入れて視認性をあげよう</p>
<div>
  </div>

入れ子が複雑になっていくことで陥りがちなミスです。特にdivは入れ子でよく使うタグなのでしっかりとインデントをつけ視認性をあげましょう。

インデントについてはこちらの記事を参考にしてください。

関連記事

【HTMLのテクニック】インデントを覚えてコードを綺麗に見せよう

pタグの中にdivタグを入れる

<p>
  <div>pタグの中にdivタグを入れるのはダメ</div>
</p>

<a href="http://html.com">
  <div>aタグの中にdivタグは入れてもOK</div>
</a>

どのタグの中に何のタグを入れていいのか?が一番ややこしいですね。

html5からルールが緩和され従来はダメだったaタグの中にdivタグを入れることがOKになっています。

pの中にdivは相変わらずダメです。

html5でのタグの入れ子ルールはこちらの記事で解説してます。

関連記事

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

cssでよくある文法ミス3つ

htmlと合わせて、cssでのよくある文法ミスも紹介します。

閉じかっこを忘れる

.class-name{
  color : #fff;
  font-weight : bold;

cssでも意外と見落としがちな閉じかっこ忘れ。これを忘れるとそれ以降のcssが適用されなくなるので注意です。

セミコロンとコロンを間違える

.class-name{
  color : #fff;
  font-weight : bold: /*ここをコロンにしちゃう*/
}

スタイル適用の終わりにつける「;(セミコロン)」を「:(コロン)」と間違えてしまうパターン。
キーボードの位置が隣なのでタイピング苦手な人は要注意。

id/classを数字・記号から始める

.01-column{
  background : red;
  float : left;
}

idclassは必ず半角英字から始めなければいけません。記号や数字からだとスタイルが反映されません。

バージョンによって文法が微妙に違う

現在ではhtmlといえばhtml5を指しますが、同じマークアップ言語(サイトを作るための言語)でもhtml4xhtmlといった種類があります。

cssについても同様で、現在はcss3というバージョンですが、その前身としてcss1css2といったものが存在します。

htmlもcssも新しいバージョンになるほどできることが増え、より効率的に記述できるようになりましたが、バージョンごとに記述のルールが異なるためそれぞれのバージョンに合わせて改定されたルールに準拠する必要があります。

htmlとcssの文法はw3cで確認できる

じゃあhtmlとcssの文法はどこで定められているかというとWorld Wide Web Consortium(ワールドワイドウェブコンソーシアム)という非営利団体によって定められています。通常は略してw3cと呼びます。

このw3cの公式サイトにhtml5に関するルールが記載されています。

https://www.w3.org/TR/2011/WD-html5-20110405/

ただ、全部英語ですので英語が不得意な人は頑張って翻訳するより、他の方が書いている日本語の記事を探したほうが早く情報に辿りつけることが多いです。どうしても有益な情報が見つからないという場合はこちらで確認しましょう。

htmlとcss両方チェックできるバリデーションツール

まずはhtmlcssの両方をチェックできるツールを紹介します。

Dirty Markup

 dirty-markup

本記事で紹介するバリデーションツールの中でデザインがもっともモダンで使いやすいツールです。

このツールのすごいところが、ただ文法チェックをしてくれるだけでなく、汚いコードをみやすく整形して表示してくれるところにあります。ソースコードを貼り付けた時点でエラーは検知され「clean」を押すとコードの整形が行われ改行やインデントが自動挿入されます。

htmlcssjavascriptの3つの言語の文法をこのサイト一つでチェックできるのが嬉しいところです。

サイトはこちらから

htmlの文法をチェックできるバリデーションツール4つ

html5の文法をチェックできるバリデーションツールを4つ紹介します。それぞれおすすめ順に紹介していくので使いやすいものをぜひ使ってみてください。

HTMLエラーチェッカー

 htmlエラーチェッカー

こちらはwebサービスではなく、Google chromeのアドオン(拡張機能)です。拡張機能を追加したら調査したいページをchormeで開いて右上のアイコンをクリックするだけでチェックができます。

閉じタグの忘れや入れ子のクロスなどなこのツールを使ってエラー箇所を探し出したほうが圧倒的に早いです。

入れておいて損はないツールでしょう。

インストールはこちら

Another HTML Lint

 Another-HTML-Lint

html5をチェックできるツールのなかではもっともお手軽なツールです。URLを入力してチェックを入れるとhtmlの文法に点数をつけてくれます。サイト下部の「HTMLのヴァージョン」という箇所があるのでhtml5を選択してチェックをしましょう。

  1. エラーの重症度(0〜9で数字が大きいほど致命的)
  2. エラーの行数
  3. エラーの詳細と解決策
  4. なぜエラーなのかの解説

と一つのエラー文に対して色々な情報を提供してくれるのでhtml5でのチェックでは重宝するツールです。

サイトはこちらから

W3C Markup Validation Service

 markup-validation- service

w3cが提供している文法チェックツールです。仕様を決めているw3cが運営してるだけあって制度は高いです。

URLを入力して「check」をクリックするだけで確認できますし、htmlをそのまま貼り付けて確認することもできます。

動作が結構重たいのとエラー文が英語なのがネックです。

optionで「Show Source」を選択することでエラー文のソースコードを表示することができます。

サイトはこちらから

Validator.nu (X)HTML5 Validator

 HTML5-Validator

inputと書かれた枠内の「Address」の箇所に調査したいURLを入力して「Validate」をクリックします。エラーがでている箇所の行数の表示、エラー文のハイライトをしてくれるので確認しやすいですね。

  • Show Image Report:チェックで画像を表示します
  • Show Source:チェックでソースコードを表示します

サイトはこちらから

HTML5 Outliner

 html5-outliner

こちらは文法チェックとは少しことなりますが、関連性があるのでご紹介します。

webページの見出しの階層がどうなっているか確認できるツールです。表示結果と自分の思い描いていた見出しの階層が違う場合は検索ロボットにもページの構成がうまく伝わらないので修正しましょう。

サイトはこちらから

cssの文法をチェックできるサービス

cssの文法をチェックできるサービスです。

W3C CSS Validation Service

 css-validator

w3cが提供しているツールです。

  1. 入力したwebページのhtmlに仕様されているcss
  2. アップロードしたcssファイル
  3. 貼り付けたcssソースコード

の検証が可能です。

エラー文の行数とコメントを日本語でわかりやすく解説してくれます。またcssのバージョンごとの検証結果も表示してくれます。

サイトはこちらから

文法エラーはseoの評価に響かない

さてhtmlの文法エラーがあるとどんな悪影響があるのかという疑問の一つにseoの評価があります。

これについてGoogleのMatt cutts(マットカッツ)氏は次のように言及しています。

 

“僕たちは、(W3C標準に)準拠しているからといって、ウェブページの順位を上げるようなことは何もしてない。ウェブにある大多数のページは、準拠してないからね”

というのも実はGoogleのwebサイトも仕様に沿っていない文法エラーはたくさんあるのです。なぜGoogleのwebサイトがw3cの仕様に準拠していない部分があるかというと

  1. スピードを早くするため:1日に何億というページを処理しなければならないので反応を軽くするため
  2. 互換性を保つため:Googleは様々なブラウザ、端末の環境で平等に使用できるようにしなければいけないため

と2つの大きな理由を優先しているため文法エラーがあるというわけです。

まとめ:文法エラーチェックをどこまでする必要があるか

まとめです。文法エラーはチェックツールを通すとかなり細かいものまでズラーっとでてくるため、すべてをチェックして修正していてはキリがないと言えるのも本音です。

実際htmlが正しい文法で書かれているwebサイトは世界中でも5%未満であると言われています。

そのため文法エラーをどこまで修正するかの判断は

  • 表示に影響がないか
  • 互換性に問題が発生しないか

である程度と大丈夫だと思います。この2点に引っかかるような文法エラーは取り除きそれ以外は優先的に修正する必要はないでしょう。

w3cの仕様はあくまで仕様であり、検索順位に関わるルールの権利を握っているのはGoogleなのでGoogleの意向に従ったほうが利口といえますね。

この記事を書いた人

web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。

この記事を読んだ人におすすめ

  • HTMLのリンク作成|リンクタグの使い方と【a href】の意味を優しく解説

  • 【最新版】機能と速さで選ぶならコレ!おすすめブラウザ11選を比較

  • リンクタグのCSSまとめ!リンクの色の変更やオシャレな装飾方法を紹介

  • 【完全ガイド版】Sublime Textの使い方と設定方法 - MacとWindow...

  • HTMLの文字の強調・装飾|strong / em / b / i タグを理解しよう

  • 【基本のき】ホームページの仕組みをイラスト付きでまるっと解説!

  • 【完全ガイド版】Google Chromeのダウンロード方法と使い方

  • 【HTML入門】パンくずリストとは?最適な作り方とSEOとの関係性

記事をもっと見る +

目次を開く