はるなぴログ

WEBサイト作成技術研究

はてなブログ初投稿記事をHTML文法チェッカーにかけてみた

はてなブログに初めて投稿した記事をHTML文法チェッカー(HTML Validator)にかけてみました。HTML文法チェッカーを使うとウェブページのHTMLが文法的に正しいかどうかをチェックして点数をつけてくれます。さて結果は如何?

Another HTML Lint5 Gatewayによる文法チェック

HTML文法チェッカーはAnother HTML Lint5 Gatewayを使用しました。

f:id:hal7pi:20180522203010p:plain

結果は…「がんばりましょう」

f:id:hal7pi:20180522203008p:plain

点数は…3点!えっと10点満点ではなくて100点満点ですよね!

でもですね。実はアメーバブログでも最初にやってみたんです。その時は-197点でした。スマホでは記号がみにくいかもしれませんので、もう一度。ええマイナス197点でした。以下がその画像です。

f:id:hal7pi:20180522203014p:plain

その差は200点!

まあそれだけブログシステムではいろいろとデータベース操作用の複雑な記述が入っているということですよね。はてなブログもアメブロもどちらも大変なんですね。

W3C Markup Validation Serviceによる文法チェック

さて、HTML Validatorがひとつだけでは不安なので今回はW3C Markup Validation Serviceでも文法チェックを実行してみましょう。

f:id:hal7pi:20180522203005p:plain

自分のブログサイトのURLを入力してボタンを押すだけなので簡単です。

こちらからは全部で23個のエラーと警告がでました。W3C Markup Validation Serviceでは点数はつきません。

少し中身をチェックしてみましょう。

f:id:hal7pi:20180522203002p:plain

1番目の文法エラーはと見ると…おや?これは単純なタイポというか何かのズレではないですか?タグの閉じ記号のスラッシュの後に余分なスペースが入っているのですね。

この文法エラーが原因でブラウザが表示を間違えるなんてことにはさすがにならないです。でも気持ち悪いですよね。

はてなに連絡してあげた方がいいのかな?開設したばかりのこのブログを見てくれているなんてことはなさそうですしね。

さて2番目の文法エラーは?おお、これは少しマズイですね。文字コード(UTF-8)の指定がかなり後に記述されてしまってます。サイトの生HTMLの冒頭を少し見ると

 <meta charset="utf-8"/>

の前にかなりたくさんの日本語が書かれています。

ま、これもブラウザが誤動作したりクラッシュするようなものでは全然ありません。ですがどうせなら文法チェッカーでエラーが出ない書き方をして欲しいと思います。

もしかして潔癖症かな?コメント寄せてもらえると嬉しいです!(って開設したばかりのブログでは無理な注文か…)

今回はAnother HTML Lint5 GatewayとW3C Markup Validation Serviceという2つのHTML文法チェッカーに自分のはてなブログ初投稿記事をチェックしてもらいました。

皆さんのブログ記事も一度HTMLの文法をチェックしてみてはいかがでしょうか?新しい発見があるかもしれません。