W3C Validでウェブ標準な作り方

(更新

HTMLやCSSの書き方には明確なルールが存在します。

現在、HTMLの仕様はWHATWGが策定しており、CSSの仕様はW3C(World Wide Web Consortium)という国際的な非営利団体が中心となって策定しています。

FirefoxやChrome、Safari、Edgeといった各ブラウザは、このWeb標準の仕様に対応する形で開発されているため、規格に準拠してサイトを作成すれば、どのブラウザで閲覧しても基本的には同じように表示されます。また、適切なHTMLとCSSで作成することは、JavaScriptの動作やアクセシビリティの面でもメリットがあります。

具体的な仕様や書き方については、当ホームページにはHTMLやCSSのページがあるので、そちらの方をご参照ください。また、上記の公式サイトなども参考にしながら、Web標準に準拠したホームページを作るようにしましょう。

HTMLやCSSの文法をチェックする方法

サイトが正しいHTMLやCSSで書かれているのかを検証することを、「バリデーション(validation)」、または「バリデート(validate)」と呼びます。

自分のサイトをチェックする際には、以下のサイトを利用すると便利です。

HTMLのチェック

W3C Nu HTML Checker
https://validator.w3.org/nu/(英語)
※HTML5はDTDを廃止してWHATWGの仕様書がルールとなったため、DTDに依存しない新しいバリデーター。(NuはNewの意味)

CSSのチェック

CSS Validation Service
https://jigsaw.w3.org/css-validator/

例えば、当サイトをチェックしてみますと2つのエラーが検出されており、DTDの箇所に空白を入れていなかった点がエラーとなりました。

現在のブラウザは強力な自動補正機能を持っているため、エラーがあってもたいていは正しく表示されます。しかし、それを放置するとJavaScriptの動作不良や意図しない表示崩れ、スクリーンリーダーの読み上げ不良などを引き起こす原因になります。

こうしたエラーを修正し、HTML文書の先頭に <!DOCTYPE html> を正しく記述するなど、できるだけウェブ標準に準拠した形で作成するのが望ましいとされています。

ただ、タグがひとつやふたつ抜けていたとしても、たいていは正しく表示されますし、検索エンジンのランキングに大きな影響が出てくるわけでもありません。Googleをはじめとする主要検索エンジンは、バリデーションのエラーがないこと自体を直接のランキング評価基準には採用していません。

ただ、直接的には関係ないものの、セマンティックHTMLやCore Web Vitals、構造化データ、保守性などに間接的に影響してくるため、実質的にはSEO対策としての意味はあります。

大手サイトをチェックしてもエラーが連発してますし、それほど細かく気にする必要はありませんが、ウェブ標準でないより、ウェブ標準であった方がよいのは確実ですので、時間のある時にでもチェックされてみるとよいでしょう。