W3C Markup Validatorでバリデーションしてみた。

2015.01.17 (Sat)

こんにちは。
ポートフォリオサイトを W3C Markup Validator でバリデーションしてみました！

大きく分けて3つのタイプのエラーが出ました。
以下はその内容と解説です。

いるかわかりませんが、同じエラーで悩む人のためにも！

Bad value 80px for attribute width on element img: Expected a digit but saw p instead.

<img src="…" alt="" width="80px" height="80px" />

これはしばらく真剣に悩みました。笑

久々にHTMLで画像サイズを指定した為 (前回の指摘)、CSSの感覚でpxを書いてしまっていました。アホでした。

CSS覚えたての頃はむしろCSSにpxを書き忘れるとかしていたのになー、と思い出すとちょっと懐かしいです。

Self-closing syntax (/>) used on a non-void HTML element. Ignoring the slash and treating as a start tag.

<a href="http://chisa-m.com" />HOME</a>

これは見た瞬間にわかりますね。。笑
いや、だったら前のエラーも見た瞬間にわかれよおいってレベルですけど……。

エラー文によるとSelf-closing syntaxというらしいですが、
/> このスラッシュのことです。これのせい。

ただこれはリストメニューのサンプルをまるまるコピペした上で編集したものだったので、コピー元の間違いでした。でも全然気づかなかった。。
こういう見落としも気づけていいですね。

一応初級者さん向けに解説すると、

<a href="http://chisa-m.com" />HOME</a>

/> このスラッシュ。
これは、meta要素やimg要素等の閉じタグがない要素 (void elementというらしい) につけるものなのです。

閉じタグは先程の例で説明すると、</a> これのことですね。
一方img要素は、

<img src="~~" alt="" width="150" height="150" />

とかで、閉じタグがありません。その閉じタグの代わりに、最後にスラッシュを入れて /> としてあげるのです。

でもW3C的には、HTML5では別に入れなくてもいいみたいです (仕様書の6参照)。これは知りませんでした。

なぜか「HTML5ではこのSelf-closingを入れるのは間違い」と主張している人もいるようですが、
まあない方が文字数も減るでしょうし (といっても大して変わらないと思いますが) どっちかというとその方がいいかもしれません。

私はXHTML時代に「スラッシュ入れないとダメ」と聞いていた名残と、
なんかもう閉じないとちょっとモヤモヤするっていうのもあって入れていました。
でもこれからは入れないようにしようかな。

Stray start tag script.

はじめん？と思いましたが、ソースコードみたら一発でわかりました。なんとbodyとhtml要素の閉じタグが2回も記述してありました。。笑

つまり、

<script src="~~.js"></script>
</body>
</html>

としたかったところが、

<script src="~~.js"></script>
</body>
</html>
</body>
</html>

となっていたのです。。笑

ケアレスミスの原因ですが、、やはりこれもコピーです。笑

先にPHPを入れない状態でコーディングし、あとからPHPを当てはめていくのですが、いろいろと切り貼りしていたら
WordPressのフッターの footer.php と呼び出し側の index.php とで、
自分で既に別ファイルに記述していたことを忘れて重複させてしまったもよう。

W3C Markup Validator はケアレスミスチェックに最適でした。笑
エラーも全て無事解消できました、やったー。 (結果)

この間コーディングを指摘してもらって、いろいろ話したことがきっかけで、
自分ももう少し正しい文法を意識しようと思えました。

最近マークアップで疑問に思ったら、
W3Cの仕様書を見る！というのを心がけています。

英訳は大変ですが、少しずつくせがついてきました。
そうすると、誤った情報を見分けられたりしますし (意外と多いものです)、
日本語で上位HITする情報は結構古いなぁと感じたりします。

少し、以前よりも気付けることが増えた喜び。。

ちょっと成長を感じています。
やっぱり、人との出会いって素晴らしいことです。

Comments