厳格仕様のHTML

今までずっと使い続けてきたHTMLですが、最後にHTMLの本来の使い方はどのようなものであったのかを考えてみましょう。

目次

論理マークアップと物理マークアップ

HTMLを書くときの考え方に、論理マークアップと物理マークアップと呼ばれる二つの潮流があるので、軽く触れておきたいと思います。

論理マークアップというのは、「HTMLで文章の役割を示そう」という考え方です。具体的にいうと、見出しを<h1>〜</h1>で囲んだり、段落を<p>〜</p>で囲んだり、強調する部分を<em>〜</em>で囲んだりすることです。

物理マークアップというのは、「HTMLで見た目を制御しよう」という考え方です。このコーナーでは紹介しませんでしたが、font要素やb要素などを使うと、文字の色や大きさを変えたり太字にすることができます。

では、皆さんが学んできたHTMLはどちらのほうでしょうか？もちろん論理マークアップですね。見出しや段落をタグで「ここが見出しですよ」「段落ですよ」とコンピュータに教えてあげるのがHTMLの役割でした。(参考：HTMLは文章の役割を示す)

文字の色やデザインを変えるにはどうしたかというと、これはCSSを使うんでした。CSSを使えばデザインを一括指定できるので、あとからデザインを変更するのがとても楽になる、というお話をしました。(参考：CSSのメリット・デメリット)

今は論理マークアップのほうが断然はやっています。HTMLで文章の役割を示し、CSSで見た目を制御するほうが、HTMLの本来の目的にかなっているし、デザインを変更するのが楽だからです。みなさんも流行に乗って論理マークアップでいきましょう。

非推奨要素・属性

要素や属性の中には非推奨、つまり「使っても文法違反にはなりませんが使わないほうがいいですよ」とされているものがあります。その代表格がfont要素です。この要素は文字の色や大きさ・フォントを変えるための要素なのですが、なぜこれが非推奨なんでしょうか。理由は、HTMLで見た目を制御しようとするのはHTML本来の使い方ではないからです。文字のデザインなど見た目に関することはCSSに任せようというわけです。

ほかに、a要素のtarget属性が非推奨とされています。<a href="URL" target="_blank">〜</a>とやると、リンクを新しいウィンドウで開かせることができます。でも、「リンクを新しいウィンドウで開くかどうかは見る人が決めればいい。勝手に新しいウィンドウがどんどん開いていったら迷惑でしょ。」という理由で、使わないほうがベターなのです。

このように、非推奨要素・属性は何か理由があって「使わないほうがいいですよ」とされているのです。使わずに済むんなら使わないでおきましょう。(もちろん非推奨要素を使っても文法的には正しいHTMLです。)

ついでに言っておくと、このサイトでは非推奨の要素を紹介していません。このサイトで初めてHTMLを学んだ方はあまり気にしなくても大丈夫です。

独自仕様の要素・属性

Internet ExplorerやNetscapeなどのブラウザが独自に拡張した要素があります。その一つにmarquee要素というのがあり、これで文字を囲むと、対応しているブラウザでは文字が左右に動く(！)らしいです。これはうっとうしいですね。こういった独自仕様の要素はHTMLの仕様書にはどこにも書かれておらず、使えば文法違反です。正しいHTMLをめざすなら、使ってはいけません。

いろいろなHTML

このコーナーで扱ったHTMLは、正式名称をHTML 4.01 Transitionalといいます。HTML文書のはじめに必ず<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">と書いてきましたが、これは「HTML 4.01 Transitionalを使いますよ」という宣言をしていたんです。これ以外にもいろいろなHTMLがあるので、それぞれの「宣言」とセットでまとめておきます。

HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
フレームページをつくるときに使用します。フレームを使うとフレーム内のページをブックマークできなかったりと、いろいろ不便になります。ですから、特別なこだわりがなければフレームは避けたほうがいいです。フレームページの見本を用意したので参考にどうぞ。
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
本コーナーで扱ってきたHTMLです。font要素など見た目を制御するための要素の多くが「非推奨」という形で残されています。
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
非推奨の要素・属性を廃止し、よりスマートになったHTMLです。body要素直下にテキストをかけないなどの制限があります。

HTML 4.01 Framesetはフレームページをつくるとき以外は使いません。普通のページをつくるときはHTML 4.01 TransitionalかHTML 4.01 Strictを使うのですが、この違いについてもう少し詳しくお話します。

一番の大きな違いは、Transitionalでは非推奨要素・属性を使うことができたが、Strictではそれらは廃止されているので使うと文法違反になることです。非推奨要素を使いたいならTransitionalを使わないといけません。

もう一つは、body要素直下にテキストやインライン要素を置けなくなったことです。body要素の中にいきなり何のタグにも囲まれていないテキストがあっては、それが段落なのか見出しなのかわからないからだめなわけです。こっちのルールはちょっと面倒かもしれません。

Strictのほうがルールが厳格ですが、覚える要素・属性が少なくなるのでルールさえ守れば難しくはないと思います。自信のある人はStrictで書いてみるのもいいでしょう。

文法チェックをする

自分の書いたHTMLやCSSが文法的に正しいかどうか、ちょっと心配ですよね。ウェブ上には文法をチェックしてくれるありがたいサイトがあるので、紹介しておきたいと思います。

まず、HTMLの文法チェックです。最初はW3CのW3C Markup Validation Serviceを使ってみてください。This page is not Valid(このページは有効じゃないよ)と表示されたらどこかで文法違反を犯しているので、修正してください。正しいHTMLなら、ページに[Valid HTML 4.01 Transitional]こんなアイコンを貼ることができます。

Another HTML-lintというHTML文法チェッカもあります。こちらも文法チェックをしてくれるのですが、文法的に正しくても望ましくない箇所があると警告が出ます。たとえば、<br>を何個も連続して使うと、<br>が多数連続していますと警告されます。<br>は何個連続させても文法的には誤りではないので、W3C Markup Validation Serviceでチェックしてもエラーは出ません。ですが、強制改行であるbr要素を連発するのはあまりよいことではないので、Another HTML-lintは警告を出してきます。

Another HTML-lintは得点形式でHTMLを評価します。満点が百点でエラーがあるとどんどん減点されます。エラーが多すぎるとマイナスになります。

CSSのチェックにはW3C CSS Validatorを使ってください。「警告」と「エラー」の2種類のメッセージが出ますが、「エラー」が出たときは文法違反をしているので必ず直すようにしましょう。エラーも警告も出なかったら、[Valid CSS!]こんなアイコンを貼ることができます。

まとめ

Information

現在の位置