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

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

関連記事

[css] Flexboxの子要素

どうも、べ〜やんです。 今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。 横並び、親要素についてはこちら↓ [css] 横並び、flexboxの使い方 flexboxの種類 (子要 …

[CSS] CSSで吹き出し風デザイン・三角形

どうも、べ〜やんです。 今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介します。 三角形がぴょこって付いているアレです。 三角形 まずはCSSで三角形を作る方法をざっくり紹介します。 三角形 …

[CSS] CSSの単位vwやvh知ってますか?

どうも、べ〜やんです。 今回は、CSSで使用される単位のvw、vhを紹介します。 Viewport ビューポート vwやvhは、Viewport  Width、Viewport  heightの略で、 …

[CSS] 変化Transitionの使い方

どうも、べ〜やんです。 今回は、変化の詳細を指定するTransitionを紹介します。 CSSだけで設定できるので初心者の方にもおすすめですよ。 Transitionとは transitionとは:h …

[CSS] リストの最初や最後だけなどに便利な擬似要素

どうも、べ〜やんです。 今回は、リストで最初や最後だけなど任意の箇所だけ違うデザインにしたい時などに便利な擬似クラスを紹介します。 リスト一部だけ リストの最初や最後だけなど任意のリストだけデザインを …