HTMLファイルの問題を確認/修正する

前段の基礎やリファレンスを参考にして書いたHTMLファイルの問題を確認し、修正する方法を軽く説明する。

基本的にブラウザがアレげなHTMLでも何とか表示してくれるようになっているので、あまり構える必要は無い。

よくやってしまうのは、閉じタグを忘れてしまうとか、コピペで間違えてもう一度開始タグを書いてしまうとかだ。

さて、ではこの間違えたHTMLファイルをダウンロードしてブラウザで開いてみてくれ。途中から最後まで太字になってしまっているはずだ。これを治してみよう。

主要なブラウザでは初期からデバッグのための優秀なツールが備わっている。右クリックからだいたい検証とか調査とか付いているメニューを選択すると、デバッグツールでその要素を表示できる。

Safariについては、先に右記を実施しておく必要がある: 環境設定→詳細→メニューバーに"開発"メニューを表示

「の例」のところで右クリックして、検証とか調査って感じのメニューを選択してみよう。

するとこんな感じで表示される。b要素の中に更にb要素が入れ後になっていて、何かおかしい事に気づいたと思う。

気づいたら、このHTMLファイルの「太字」の後ろにある<b></b>に治そう。これでいい感じに表示されるようになったはずだ。

とりあえずザックリいい感じになっているかどうかを確かめたい時には、The W3C Markup Validation Service(英語)っていう公式のチェックサービスがあるので利用すると良い。このチェックツールで出た問題は、仮に表示上では問題が無かったとしても、基本的に修正したほうが良いものなので、内容を理解してHTMLファイルに適用すると良い。