リストの多重化で出力されるタグの誤り

メッセージ

リスト出力タグで、現在は下記のように出力されています。

<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>

W3Cの規格に準拠していないブラウザに対しては、ネストの深さはスタイルシートで強引に

 ul.nest1{
    list-style-type:disc;
    margin-left:2em;
 }
 ul.nest2{
    list-style-type:circle;
    margin-left:4em;
 }

のように指定すればよいと(爆)


添付ファイル: fileul_li.gif 618件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2007-11-01 (木) 22:29:42
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.478 sec.

OSDN