リスト出力タグで、現在は下記のように出力されています。
<ul> <li>hogehoge</li> <ul> <li>hogehoge</li> </ul> </ul>
<dl> <dt>hogehoge</dt> <dd>hogehoge</dd> <dl> <dt>hogehoge</dt> <dd>hogehoge</dt> </dl> </dl>
<ul><dl>の子要素に<ul>や<dl>は置けないので下記のように修正する必要があります。
<ul> <li>hogehoge</li> <li><ul> <li>hogehoge</li> </ul></li> </ul>
<dl> <dt>hogehoge</dt> <dd>hogehoge</dd> <dd><dl> <dt>hogehoge</dt> <dd>hogehoge</dd> </dl></dd> </dl>
この件についてはsngさんのところでも話が出てましたね。
基本的に<ul>の子要素は<li>だけ。<dl>の子要素は<dt>と<dd>だけ。
●W3C HTML4.01 Strict DTD / Transition DTD より該当箇所を抜粋
<!ELEMENT DL - - (DT|DD)+ -- definition list -->
意味:DLは開始タグ・終了タグを省略できず、子要素はDTもしくはDDを1つ以上含み、その順序は問わない。それ以外は子要素にできない。
<!ELEMENT OL - - (LI)+ -- ordered list -->
意味:OLは開始タグ・終了タグを省略できず、子要素はLIを1つ以上含む。それ以外は子要素にできない。
<!ELEMENT UL - - (LI)+ -- unordered list -->
意味:ULは開始タグ・終了タグを省略できず、子要素はLIを1つ以上含む。それ以外は子要素にできない。
- どのブラウザもW3C準拠ってことで、適合ではないということですね(苦笑)。 -- reimy 2002-06-28 (金) 20:45:11
●Another HTML-lintでチェックしてみました。やはり<ul>の直下に<ul>は置けないようです。
チェックの結果は以下のとおりです。 HTML4.01 Transitional としてチェックしました。 3個のエラーがありました。このHTMLは -10点です。タグが 11種類 17組使われています。 先頭の数字はエラーのおおまかな重要度を 0~9 で示しています(減点数ではありません)。少ない数字は軽く、9 になるほど致命的です。 7: line 18: <UL> を 15行目の <UL>~</UL> 内に書くことはできません。</UL> を補ってください。 → 解説 40 7: line 18: 15行目の <UL> に対応する終了タグ </UL> が見つかりません。 → 解説 69 7: line 21: </UL> に対応する開始タグ <UL> が見つかりません。 → 解説 66
チェックしたHTMLは以下のとおりです。
1. <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2. <html lang="ja"> 3. <head> 4. <meta http-equiv="content-type" content="text/html; charset=shift_jis"> 5. <meta http-equiv="content-style-type" content="text/css"> 6. <meta http-equiv="content-script-type" content="text/javascript"> 7. <meta name="generator" content="QX Editor with HTML4.01/CSS 2 Macro"> 8. <meta name="author" content="Reimy"> 9. <link rev="made" href="mailto:webmaster@reimy.com"> 10. <link rel="next" href="test2.html"> 11. <title>test</title> 12. </head> 13. <body> 14. <div> 15. <ul> 16. <li>あ</li> 17. <li>い</li> 18. <ul> 19. <li>う</li> 20. </ul> 21. </ul> 22. </div> 23. </body> 24. </html>
1. <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2. <html lang="ja"> 3. <head> 4. <meta http-equiv="content-type" content="text/html; charset=shift_jis"> 5. <meta http-equiv="content-style-type" content="text/css"> 6. <meta http-equiv="content-script-type" content="text/javascript"> 7. <meta name="generator" content="QX Editor with HTML4.01/CSS 2 Macro"> 8. <meta name="author" content="Reimy"> 9. <link rev="made" href="mailto:webmaster@reimy.com"> 10. <link rel="next" href="test2.html"> 11. <title>test</title> 12. </head> 13. <body> 14. <div> 15. <ul class="nest1"> 16. <li>あ</li> 17. <li>い</li> 18. </ul> 19. <ul class="nest2"> 20. <li>う</li> 21. </ul> 22. </div> 23. </body> 24. </html>
W3Cの規格に準拠していないブラウザに対しては、ネストの深さはスタイルシートで強引に
ul.nest1{ list-style-type:disc; margin-left:2em; } ul.nest2{ list-style-type:circle; margin-left:4em; }
のように指定すればよいと(爆)