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

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

関連記事

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

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

[超初心者] CSSの書き方

どうも、べ〜やんです。 今回はCSSに付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …

[CSS] CSSで文字に影をつける方法

どうも、べ〜やんです。 今回は、CSSで文字に影やアウトラインをつける方法を紹介します。 text-shadow text-shadowは文字に影をつけるプロパティです。 値は4つ使用します。 {te …

[超初心者] HTMLのタグ・要素

どうも、べ〜やんです。 今回は、HTMLのよく使うタグ・要素などをまとめました。 タグとは <html>、<head>、<footer>、<div>など …

[CSS] overflowの使い方

どうも、べ〜やんです。 今回はCSSのoverflowの使い方を紹介します。 テキストが長いけどスペースを大きく取りたくない場合などに便利です。 overflowとは overflowは要素からはみ出 …