ブログが続かないわけ

この日記のはてなブックマーク数
Webエンジニアが思うこと by junichiro on Facebook

XHTMLでやりがちな8個の間違い

このエントリーを含むはてなブックマーク hateb
最近、XHTMLのValidationに恋してます。

Validationチェックをするのに便利なのは、やっぱり本家のW3CのMarkup Validation Service。単一のページをチェックするにはこれが一番いい。
Markup Validation Service

サイト全体をまとめてチェックする場合はこちらが便利(手前味噌でごめんなさい)。
Site Validator

ただ、これらのサービスは詳細のエラーを見てもどこが間違いかわからないことがある。慣れないと難しい。まず、英語だと言うのも問題かもしれないが、微妙に問題点とエラーメッセージの内容がずれていることも多いからだ。プログラマであればエラーメッセージとエラー内容がずれているなんてことは慣れっこかもしれないが、これらのツールを使うのは非エンジニアであることも多い。HTMLのコーダーとかディレクターとか。

Site Validator のログを見て気がついた、よくある間違いというのをあげてみようと思う。これがあれば、非エンジニアの方もエラーの「あたり」をつけやすくなると思う。エラーメッセージに表示される行数は正しいことが多いので、その行を見ながら、下記のリストのなかで該当しそうなところを直せばいいというわけだ。

1. &ampと書くべきところを&と書いてしまう。
2. 要素名(要はタグ名)や属性名に大文字が混在している。
3. img, br, inputなどのタグの閉じ忘れ。
4. imgタグへのalt属性の入れ忘れ。
5. id属性の重複。
6. DOCTYPE宣言のミス。
7. checked="checked", やselected="selected"としていない。
8. 使えない箇所でのタグの使用。


どういうときにやりがちなのかも含めて、ひとつずつ簡単に説明しよう。

1. &ampと書くべきところを&と書いてしまう。
普段は気をつけている人も、次のような時にはうっかりしちゃうんじゃない?
<a href="http://www.google.com/search?q=futsal&ie=UTF-8&oe=UTF-8">futsal</a>
正しくはこうだよ。
<a href="http://www.google.com/search?q=futsal&amp;ie=UTF-8&amp;oe=UTF-8">futsal</a>

2. 要素名(要はタグ名)や属性名に大文字が混在している。
これもだいたいは小文字で書かれているんだけどね。よく大文字になってしまうのはこの辺り。

2008/04/25 追記
属性名ではなく属性値についても、列挙型(つまり、使える値があらかじめ定義されているもの)の場合は小文字で書く必要があります。下記のgetやpostが代表例です。説明が不足しており申し訳ございませんでした。

<form action="/example" method="POST">
<form action="/test" method="GET">
<input type="button" onClick="javascript:history.back();" />

それぞれ、正しくは下記の通り。
<form action="/example" method="post">
<form action="/test" method="get">
<input type="button" onclick="javascript:history.back();" />

3. img, br, inputなどのタグの閉じ忘れ。
これはだいぶ減ってきているみたいだけど、うっかりしちゃうよね。
<img src="sample.jpg" alt="">
<br>
<input type="button">

これらは正しくは下記の通り。
<img src="sample.jpg" alt="" />
<br />
<input type="button" />

4. imgタグへのalt属性の入れ忘れ。
最近はSEO対策ということでalt属性にしっかりと値を入れることも多くなってきているみたいだけど、どうでもいい画像(spacerとか)はalt属性をつけ忘れがちだよね。
というわけでこれはだめ。
<img src="images/spacer.gif" />

正しくは
<img src="images/spacer.gif" alt="" />
としなければならない。(altに何も入れないのはOK)

5. id属性の重複。
CSSのセレクターとして使いたいためか、複数の箇所でidに同じ値をいれてしまうことがあるようだ。idとはそもそもそれを一意に決めるためにあるものだから、これが重複してしまうのはまずい。構造をよく考えて、CSS的に必要であればclass属性などを付与すべき。

6. DOCTYPE宣言のミス。
これはあまりないんだけど、はまると気がつきにくい。部分的にはまったく同じHTMLなのに、一方はValidationが通って、もう一方がダメなんてときは、これを疑うと良い。DOCTYPE宣言によって使える要素(タグ)も属性も異なるため、同じHTMLでも片方だけがエラーになったりするのだ。特に、TransitionalとStrictの違いには注意した方が良い。

本エントリの最後にStrictで使えない要素と属性の一覧をつけたので、参考にどうぞ。

7. checked="checked", やselected="selected"としていない。
ここはHTMLコーダーじゃなくて、プログラマがテンプレートに埋め込むことも多いかもしれないね。それでもやってしまいがち。
次のやつは全部間違いだよ。
<input type="radio" name="sex" value="女性" checked />
<input type="checkbox" name="hobby" value="囲碁" checked />
<select name="sports">
<option value="サッカー">サッカー</option>
<option value="フットサル" selected>フットサル</option>
</select>

正しくはこう。
<input type="radio" name="sex" value="女性" checked="checked" />
<input type="checkbox" name="hobby" value="囲碁" checked="checked" />
<select name="sports">
<option value="サッカー">サッカー</option>
<option value="フットサル" selected="selected">フットサル</option>
</select>

8. 使えない箇所でのタグの使用。
例えば、<tr>や<td>,<th>は<table>タグの中でしか使えないし、<li>は<ol>または<ul>の中でしか使えない。このように使える箇所が限られているタグも多いので、それによるエラーが出てしまうケースがあるようだ。

このあたりを気にすれば、ほとんどのエラーが解消できると思うよ!

【付録】TransitionalまたはFramesetで使えて、Strictでは使えない要素と属性の一覧
■要素
applet
basefont
center
dir
font
frame
frameset
iframe
isindex
menu
noframes
s
strike
u

■属性
(全要素)lang
(a要素)name, target
(area要素)target
(body要素)background, bgcolor, text, link, vlink, alink
(br要素)clear
(caption要素)align
(div要素)align
(form要素)name, target
(h1-h6要素)align
(hr要素)align, noshade, size, width
(img要素)align, border, hspace, vspace, name
(input要素)align
(legent要素)align
(li要素)type, value
(link要素)target
(map要素)name
(object要素)align, border, hspace, vspace
(ol要素)compact, start, type
(p要素)align
(pre要素)width
(script要素)language
(table要素)align, bgcolor
(td要素)bgcolor, height, nowrap, width
(th要素)bgcolor, height, nowrap, width
(tr要素)bgcolor
(ul要素)compact, type

参考資料


この記事のトラックバックURL
http://en.yummy.stripper.jp/trackback/888061
トラックバック
internetexplorer エラー
エラーが出てCD.DVDが読みこめませんエラーが出てCD.DVDが読みこめませんI-O DATAの後付けDVDドライブを買いました。それで付属のCDは一通りよみこみました。その後にDVDのコピーがしたいので、コンビニなどに売っているDVDコピーの雑誌についているCDを入れたのですが
| internet explorer | 2008/04/25 5:55 AM |
コメント
属性名はともかく属性値のPOST、GETはどうでもいいのでは?
| gnety | 2008/04/24 11:41 PM |
属性名ではなく属性値についても、列挙型(つまり、使える値があらかじめ定義されているもの)の場合は小文字で書く必要があります。下記のgetやpostが代表例です。説明が不足しており申し訳ございませんでした。

本文にも追記しておきました。
| junichiro | 2008/04/25 9:52 AM |
う〜ん。。。
ブログってのも難しいものですね。
けっこうはまってますけど!
| 植毛野郎 | 2008/04/25 10:03 AM |
href属性のURIにいわゆる全角文字は書けないので、「囲碁」はパーセントでエスケープする必要があるかと思います。
| 石川 | 2008/04/25 4:21 PM |
コメントありがとうございます!

システム的に機能するかどうかは別にして、「XHTMLの文法としてURIに全角文字を書けない」という認識はありませんでした。

お手数ですが、出典を教えて頂ければと思います。
| junichiro | 2008/04/25 5:22 PM |
URIで使える文字はXHTMLとは関係なくRFC3986で定められています。

http://tools.ietf.org/html/rfc3986#appendix-A
pchar = unreserved / pct-encoded / sub-delims / ":" / "@"
unreserved = ALPHA / DIGIT / "-" / "." / "_" / "~"
pct-encoded = "%" HEXDIG HEXDIG
sub-delims = "!" / "$" / "&" / "'" / "(" / ")"
/ "*" / "+" / "," / ";" / "="
となっているので、半角英数字と一部の記号以外の文字をURIにすることができません。XHTML 1.0のDTDには

http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-strict.dtd_URI
<!ENTITY % URI "CDATA">
<!-- a Uniform Resource Identifier, see [RFC2396] -->

とあるので、URIに使える文字はRFCで定められているものに限ると考えてよいと思います(番号が違うのはURIを定義したRFCが改訂されたためです)。

それから、「TransitionalまたはFramesetで使えて、Strictでは使えない要素と属性の一覧」にlang属性(全要素)とname属性(a要素、map要素)が挙げられているのですが、これらはXHTML 1.0 Strictでも使うことができます(XHTML 1.1では使えませんが)。おせっかいですみません。
| 石川 | 2008/04/25 11:56 PM |
丁寧にありがとうございます。
今週末は少し時間がとれないので、後ほど修正しておきます。

ちなみに「囲碁」のままでもW3CのMarkup Validationを通りましたので、あれはちょっとした不具合と考えてもよさそうですね。
(Transitionalで確認)
| junichiro | 2008/04/26 4:33 AM |
石川さんのおっしゃる通りだと思います。
微妙に本筋とは外れている部分でしたので、単に「囲碁」→「futsal」として修正させて頂きました。
| junichiro | 2008/04/30 11:02 AM |
初めまして。
W3CのvalidatorはDTD通りならエラーを出さないので、URIはCDATAならOKになります。
つまりURIの文字列に何を使ってもエラーをだしません。
その辺りはAnother HTML-lintのチェックが優れものだと思います。
| たかはし | 2008/05/28 4:50 AM |
アドバイスありがとうございます。
細かいところまでチェックしたい場合は、これは良さそうですね。

■Another HTML-lint
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

| junichiro | 2008/05/28 9:58 AM |
持ちの皮の部分も、自分で作ったとの事
| coach outlet store | 2011/07/11 6:36 PM |









関連情報