そのHTML、本当に正しい？ 検索結果を鵜呑みにしないための調べ方

HTMLを書いていると、ちょっとしたことで迷います。

例えば、

<br>

って閉じタグは必要だったっけ？

<br></br>

と書くの？

それとも、

<br />

なの？

ほかにも、

「このタグの中にこのタグを入れていいんだっけ？」

「この属性って今も使える？」

「この書き方、昔どこかで見た気がするけど現在も正しい？」

など。

分からなければ検索すれば、大抵それらしい答えは出てきます。

ただ、Web技術を調べるときに少し面倒なのが、

古い情報も普通に検索結果に出てくることです。

HTMLは長い歴史を持っています。

HTML4、XHTML、HTML5と変化してきた中で、昔はよく使われていた書き方が現在では非推奨になっていたり、当時のブラウザ事情を前提にした説明が現在も残っていたりします。

つまり、

検索上位にある = 現在も正しい

とは限りません。

では、HTMLの文法や使い方で迷ったとき、どこを確認すればいいのでしょうか。

自分の場合、まず見るのは MDN Web Docs です。

とりあえずMDNを見る

Web開発をしていると、かなりの確率で出てくるのが、

MDN Web Docs

です。

公式はこちら。

MDN Web DocsThe MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.リンク先を開く

HTMLについて調べるなら、

HTML リファレンス - HTML | MDNこの HTML リファレンスは、 HTML のすべての要素と属性、およびすべての要素に適用されるグローバル属性について書かれています。リンク先を開く

があります。

ここには、

  • HTML要素

  • HTML属性

  • グローバル属性

  • 要素の意味

  • 使用例

  • 注意点

などが整理されています。

例えば、

<article>

はどういう要素なのか。

<input>

ではどんな属性が使えるのか。

<video>

はどう書くのか。

こういったことなら、まずMDNを見ればかなり解決します。

<br></br>は正しいのか？

さっきの例を実際に確認してみます。

HTMLのbr要素は改行を表す要素です。

MDNを見ると、

MDN：<br> 要素

HTML 改行要素 - HTML | MDNは HTML の要素で、文中に改行（キャリッジリターン）を生成します。詩や住所など、行の分割が重要な場合に有用です。リンク先を開く

として説明されています。

HTMLではbrは空要素（void element）です。

つまり、中身を持ちません。

そのため、

<br></br>

のような終了タグは使いません。

基本的には、

<br>

です。

では、

<br />

は何なのか。

XHTMLなどに触れたことがあると、こちらの書き方を見たことがあるかもしれません。

現在のHTMLでも<br />という表記自体は構文上許容されますが、HTMLの空要素に終了タグが必要になったわけではありません。

つまり、

<br>

で問題ありません。

こういう、

「見たことのある書き方が複数あるけど、結局どれが現在のHTMLなの？」

という疑問を調べるときにMDNはかなり便利です。

Google検索だけだと少し怖い

もちろん、個人ブログや技術記事が信用できないという話ではありません。

むしろ、

「こう使うと便利だった」

「ここでハマった」

「実際にはこう書く」

といった情報は、個人の記事の方が分かりやすいこともあります。

ただ、

HTMLの文法として正しいのか

を確認するのであれば、別の資料でも確認した方が安心です。

例えば検索結果に、

<center>

を使ったレイアウト方法が出てきたとします。

昔のHTMLではよく使われていましたが、現在ではcenter要素は廃止されています。

あるいは、

<font color="red">

のような書き方も、昔のHTMLでは普通に使われていました。

現在はCSSを使います。

Webの記事は一度公開されると、何年も検索結果に残ります。

だから自分の場合、

Googleなどで検索
        ↓
概要をつかむ
        ↓
MDNで現在の情報を確認

という使い方をすることが多いです。

最初から、

MDN br
MDN input
MDN article

のように検索してしまうこともあります。

ところでMDNって何？

ここで一つ疑問があります。

そもそもMDNって何なんだ？

HTMLについて調べても、

CSSについて調べても、

JavaScriptについて調べても、

かなり頻繁に出てきます。

あまりにもよく出てくるので、

「ここがHTMLの公式サイトなのか？」

と思っていました。

でも、正確には違います。

MDN Web Docsは、Web技術について開発者向けにまとめられたドキュメントです。

Mozillaが中心となって運営しています。

詳しくはこちら。

About MDNThe MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.リンク先を開く

HTMLだけではなく、

  • HTML

  • CSS

  • JavaScript

  • Web API

  • HTTP

  • SVG

など、Web開発で使う技術が幅広く解説されています。

重要なのは、

MDN自身がHTMLのルールを決めているわけではない

ということです。

イメージとしては、

Web技術の仕様
      ↓
     MDN
      ↓
開発者向けに整理・解説
      ↓
    自分たち

です。

じゃあHTMLの仕様そのものはどこ？

ここでもう一段掘ってみます。

MDNがHTMLの仕様を作っているわけではない。

では、

HTMLのルールそのものはどこに書いてあるのか？

現在のHTMLの中心的な仕様は、

WHATWG HTML Living Standard

です。

公式はこちら。

WHATWG HTML Standard

ここがHTMLについての一次資料になります。

例えば、

「br要素は仕様上どう定義されているのか」

まで厳密に確認したければ、HTML Standardを見ることになります。

だったら最初からHTML Standardを読めばいいのでは？

理屈としてはそうです。

一番元の情報なのだから、最初から仕様書を読めばいい。

ただ、実際に開いてみると分かります。

かなり重いです。

HTML Standardは、

「初心者でも5分で分かるHTML講座」

ではありません。

HTMLという技術を正確に定義するための仕様書です。

ブラウザ側がHTMLをどう解釈するかといった、普段Webページを書くときには必要のないところまで非常に細かく定義されています。

例えば単に、

「articleってどんなときに使うんだっけ？」

を確認したいだけなら、MDNの方が圧倒的に早い。

なので普段は、

使い方を知りたい
      ↓
     MDN

厳密な定義まで確認したい
      ↓
WHATWG HTML Standard

くらいで使い分ければよさそうです。

開発者向けのHTML Standardもある

WHATWGには、Web開発者向けに整理されたバージョンもあります。

HTML Standard, Edition for Web Developersリンク先を開く

通常のHTML Standardから、主にブラウザ実装者向けの情報を除いて、Web開発者が参照しやすくしたものです。

それでもMDNより仕様書寄りですが、

「MDNより一歩深く調べたいけど、全部入りの仕様書は重すぎる」

というときにはこちらも使えます。

書いたHTML自体をチェックしたい

もう一つあります。

仕様を読むのではなく、

「自分の書いたHTMLは正しいのか？」

を直接調べたい場合です。

そんなときはHTML Checkerが使えます。

W3Cが公開している、

Nu Html Checker

です。

Ready to check - Nu Html Checkerリンク先を開く

URLを指定したりHTMLを直接入力したりすると、HTMLの構造上の問題などをチェックできます。

例えば、

  • 不正な要素の配置

  • 使用できない属性

  • 閉じタグの問題

  • HTML構造上の問題

などを発見するのに便利です。

もちろん、

エラーが0件 = 良いWebサイト

という意味ではありません。

HTMLとして問題がなくても、

  • 読みにくい

  • アクセシビリティが悪い

  • 意味的に不適切なタグを使っている

  • CSS設計がひどい

ということは普通にあります。

HTML Checkerはあくまで、

HTMLの構文や仕様上の問題を調べる道具

です。

結局、HTMLで困ったらどこを見る？

ここまでを整理すると、かなりシンプルです。

困ったこと

見るところ

HTMLタグの使い方を知りたい

MDN

属性について確認したい

MDN

サンプルが見たい

MDN

現在推奨されている書き方を確認したい

MDN

HTMLの厳密な仕様を確認したい

WHATWG HTML Standard

仕様書を開発者向けの形で読みたい

WHATWG Developer's Edition

自分のHTMLを検査したい

W3C Nu Html Checker

自分の場合は、

まずMDN
   ↓
もっと厳密に知りたい
   ↓
WHATWG
   ↓
書いたHTMLがおかしい
   ↓
HTML Checker

くらいで考えています。

「一番信頼できるサイト」は一つではなかった

最初に知りたかったのは、

「HTMLについて一番信用できるサイトはどこ？」

でした。

でも、調べていくと少し違いました。

HTMLの仕様そのものを確認するならWHATWG。

普段HTMLを書くために使い方を確認するならMDN。

自分が書いたHTMLを検査するならHTML Checker。

つまり、

一番正確な資料と、一番使いやすい資料は同じではありません。

なので普段は、

まずMDNを見る。

怪しい、もっと詳しく知りたい、仕様上どうなっているのか確認したい。

そんなときに、

一次資料まで遡る。

これくらいが現実的な使い方だと思います。

ところでW3CとWHATWGって何なんだ？

ここまで調べていて、また知らない名前が増えました。

W3C

そして、

WHATWG

昔からWebについて調べていると、

「HTMLといえばW3C」

というイメージがあります。

なのに、現在のHTML Standardを見に行くとWHATWGが出てくる。

では、

W3CとWHATWGは何が違うのか？

そしてなぜ、HTMLの仕様を調べているのに複数の団体が出てくるのか。

次はこの辺を整理してみます。