CODING

HTML文法チェックサービスMarkup Validation Service

投稿日:

どうも、べ〜やんです。

今回は、HTMLの文法にミスがないかを自動で判別してくれるサービスMarkup Validation Serviceを紹介します。

HTMLを独学で勉強していて自分の知識がどれくらい正確なのかを確認したり、表示が崩れるが理由がわからない場合など簡単にチェックできるのでオススメです。




よくあるミス

まずは、HTMLでよくあるミスを紹介します。

スペルミス

HTMLに限らずプログラミング言語は、英語で書かれていてたった一文字でもスペルミスがあるだけでエラーになってしまいます。

タグの閉じ忘れ

タグには閉じタグが必要なものと必要のないものがあります。当然閉じタグが必要なのに忘れてしまうとエラーになってしまいます。

<div>
  <p>タグの閉じ忘れが無いように注意しよう</p>
  <img src="">
  <a href=""></a>
</div>

入れ子ミス

まだ慣れていない内は後から入れ子を追加する必要がでてきたりすることも多いですし、デザインの変更で入れ子を増やしたり減らしたりする場合に入れ子ミスが起きることが多いです。

<div>
  <div>
    <p>入れ子ミスに注意しよう</p>
    <img src="">
    <a href=""></a>
  </div>
<div>
</div>
  <p>入れ子ミスに注意しよう</p>
</div>



文法は誰が決めてる?

HTMLの文法は、W3C(World Wide Web Consortium)という団体が定めています。

W3Cの公式ページにHTML5のルールが記載されています。

公式W3C

W3Cの公式ページは英語で書かれていますし、量もとても多いので公式ページで細かいルールを確認するのは大変かもしれません。




文法チェックサービス

HTMLの文法にエラーが無いかを簡単に自動でチェックしてくれるサービスはいくつかありますが、今回はHTMLの文法を定めているW3CのサービスMarkup Validation Serviceを紹介します。

Markup Validation Service

タブからチェックする方法を選ぶことができます。

  • URLでチェックする
  • ファイルでチェックする
  • テキストでチェックする
(URLでチェックする方法を選択しています。)

URLを入力して、Checkボタンを押すだけです。

(ファイルでチェックする方法を選択しています。)

ファイルを選択して、Checkボタンを押すだけです。

(テキストでチェックする方法を選択しています。)

HTMLをコピー&ペーストで貼り付けて、Checkボタンを押すだけです。

チェック結果

緑色でメッセージが表示された場合はエラーが無いということです。

(エラーなし)

ピンクのメッセージのErrorがでた部分がエラーです。

エラーの内容も表示されるので修正しましょう。

(エラーあり)

黄色のWarningは警告で、「エラーでは無いが推奨はされない書き方ですよ」という意味です。

警告部分は必ずしも修正が必要というわけではありません。

(非推奨)

CSS文法チェック

W3CにはCSSの文法チェックサービスもあります。

CSS Validation Service




文法エラーとSEO

文法エラーはSEOに影響しないようです。

文法を定めているのはW3CでSEOを定めているのはGoogleですが、Googleのサイトでも文法は完璧ではないようですし、表示に影響が無い範囲まで修正できていればOKかと思います。




おわりに

今回はHTMLの文法を定めているW3Cの文法チェックサービスMarkup Validation Serviceを紹介しましたが、他にも便利な文法チェックサービスはあるのでまた別の機会に紹介したいと思います。




-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

BEMを意識しよう

どうも、べ〜やんです。 今回は、代表的なCSSの設定規則のBEMの基礎を紹介します。 HTML、CSSに慣れてきた方やクラス名で迷ってしまう方、チームでプロジェクトを進めたい方におすすめです。 BEM …

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

[CSS] visibilityで非表示にする方法

どうも、べ〜やんです。 今回は、要素を不可視にするvisibilityプロパティを紹介します。 visibilityとは visibilityとは要素を不可視にできるプロパティです。 使用される値は三 …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …