f9732b27adf15f3735480666ba346a9e_l

HTMLの文法をチェックしてくれるサービス・ツール5選


HTML を習得して 自分でコードを書けるようになると、どうしても文法でミスが起きてしまうものです。
そんな時に役に立つのは HTML の文法をチェックしてくれるサービス。
自力で探すのは限界がある場合がありますからね。
これらを活用して、自分の HTML にどんどん磨きをかけていきましょう。

Another HTML-lint gateway

Another HTML-lint gateway
Another HTML-lint gateway

この Another HTML-lint gateway というツール、Google などで検索を行うとトップに出てくるので、
ご存じの方も多いかもしれません。

HTML のチェックを行いたいページの URI (URL) を入力するだけで完了です。

文法が間違っている部分の行番号と、どれだけの間違いかを示す度数、それに関する詳しい解説を見ることが出来ます。
2015年7月5日現在、HTML5 に非対応なのが惜しいところでしょうか。

 

Another HTML-lint 5

Another HTML-lint

Another HTML-lint

こちらの Another HTML-lint もご存じの方が多いと思います。
先述の Another HTML-lint gateway は、現在主流の HTML 5 に対応していませんが、こちらは HTML 5 に対応しています。

使い方は Another HTML-lint gateway とほぼ同じで、URI を入力すると
文法が間違っている部分の行番号と、どれだけの間違いかを示す度数、それに関する詳しい解説を見ることが出来ます。

 

The W3C Markup Validation Service

https://validator.w3.org/
The W3C Markup Validation Service

W3C は World Wide Web Consortium の略称で、HTML や CSS、 SVG などの標準化を行なっている団体です。
その団体が提供している HTML のチェックツール、使わない選択はありませんね。
英語のサービスですので、少々敷居が高いと感じる方もいらっしゃるかもしれませんが、
すべて簡単なものなので十分活用できるはずです。

 

The W3C CSS Validation Service

スクリーンショット 2015-07-06 0.02.30
The W3C CSS Validation Service

HTML の文法チェックとは少し離れますが、 Web サイト作成時に HTML と共に必須となるのは CSS です。
この The W3C CSS Validation Service は、その名の通り CSS のチェックを行なってくれます。
また、このサービスは W3C が提供していますが、日本語に対応しているので使うのも簡単です。

 

W3C Link Checker

W3C Link Checker
W3C Link Checker

最後に紹介するこちらも HTML の文法とは少し離れますが絶対に必要なサービス。
Web サイトを作成するときには必ずと言っていいほどハイパーリンクを設置すると思います。
ですが、1字でも URI が間違っているとリンク切れとなってしまうほか、
SEO にも何らかの影響を与えることとなってしまいます。
そのような問題をなくすために、Web サイト公開後 すぐにこのツールでチェックを行いましょう。

 

まとめ

チェックリスト

HTML は学習することが簡単で、多少の文法が間違っていたとしてもブラウザ側で処理を行なってくれることが多く、自分の文法の間違いに気づかないことが多々あります。
こまめに以上に挙げたツールを使用して、自分の「HTML 力」がどれだけのものなのか、チェックするのもいいですね。

日本語でも正しい文法で話されればわかりやすい というのと同じように、
HTML も正しい文法で記述すればブラウザもすぐに読み込んでくれることでしょう。

この記事があなたのスキルアップに貢献できることを祈っています。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Hello world! mlooking です!読み方は エムルッキング 。いろいろな情報を伝えられたらいいかなと思っています。

Next Article【隅々までこだわりたい人向け】数字のフリーフォントまとめ