「olタグ」内に「ｈタグ要素」を含めるのは正しい？

質問

<h2>▲▲▲▲▲▲</h2>
<ol>
<li>●●●●</li>
<li>●●●●</li>
<li>●●●●●</li>
</ol>

現在では、上記の様に記述しています。しかし、下記の様な形の記述が正しいと思う様になってきました。なお、プラウザでは、どちらも同じ様に表現されます。
どちらの記述が正しいですか？

<ol><h2>▲▲▲▲▲▲</h2>
<li>●●●●</li>
<li>●●●●</li>
<li>●●●●●</li>
</ol>

回答No.5

ORUKA1951 · ベストアンサー

ブラウザで表示を確認して・・・と言うのはダメなのです。ブラウザには、エラーのある文書も極力拡大解釈して表示することが求められていますが、著者がそれに頼るのは間違いです。
・認識できない要素があった場合、ユーザエージェントは、内容のレンダリングを試みねばならない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/appendix/notes.html#notes-invalid-docs )
・著者
　HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )
HTML5では、著者が使えるもの、ユーザーエージェントの処理が明確になりましたから、非推奨自体なくなりました。

　明らかに
<h2>▲▲▲▲▲▲</h2>
<ol>
<li>●●●●</li>
<li>●●●●</li>
<li>●●●●●</li>
</ol>
が正しいです。

<ol><h2>▲▲▲▲▲▲</h2>
<li>●●●●</li>
<li>●●●●</li>
<li>●●●●●</li>
</ol>
の場合、多くのブラウザは
　<ol></ol>
　<h2>▲▲▲▲▲▲</h2><!-- </li> -->
　<ol>
　　<li>●●●●</li>
　　<li>●●●●</li>
　　<li>●●●●●</li>
　</ol>
と解釈して表示するでしょう。

＞「olタグ」内に「ｈタグ要素」を含めるのは正しい？
　こんなことはここで聞くより仕様書に目を通せば正確な答えが分かります。
　⇒<!ELEMENT OL - - (LI)+( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-OL )
　OLは開始タグ終了タグとも省略不可(--)、中にはLIをひとつ以上(+)と明記してあるし、
⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
　で[DATA]タブから送信してみりゃ、詳しく解説してくれる。

No.1の補足で
「だた、それだと<h2>タグの範囲が、次の見出しが記述されるまで続く事になります。
例えば、下記のような場合は混乱が有ると思います。」

　これはHTMLに限らず、一般的な文書でも見出しをつけると、新たなセクションが始まり、次に見出しが現れるまでは、ひとつのセクションに所属するのではないですか？？？？

　連続するふたつのリストの内容が分かりませんから、どのマークアップが正しいかは示すことが出来ません。

「「ｈ２タグ」の範囲を、「olタグ」に囲まれたリストだけ、「ulタグ」はまた別の事柄の時です。その場合は、「ulタグ」の前にも「ｈタグ」を記述していく必要が有りますか？」
　もし、ulタグがh2とは、まったく別の事柄について述べているのでしたら、当然別のセクションですから基本的には見出しが必要になるでしょう。
　見出しが示す内容と、それぞれのリストの内容はあなたにしか分かりません。

　セクションと言うのは!!機械的に目次を作成するときに、その項目となりうるheading(HTMLだと<h1>～<h6>をもつであろう記事の集団です。
<div class="section">
　<h2>このセクションの見出し</h2>
　<p>・・</p>
　<ol>
　　<li></li>
　</ol>
　<div class="section">
　　<h3>サブセクションの見出し</h3>
　　<ul>
　　　<li></li>
　　</ul>
　</div>
</div>

HTML5ですと
<section>
　<h2>このセクションの見出し</h2>
　<p>・・</p>
　<ol>
　　<li></li>
　</ol>
　</section>
　　<h3>サブセクションの見出し</h3>
　　<ul>
　　　<li></li>
　　</ul>
　</section>
</div>
★h3を表示するかしないかはHTMLとは関係ありません。
　スタイルシートでsection section h3{display:none;}ですむ。

よくあるのが次のような場面です。(HTML5の<nav>は<div class="nav">に置き換えて考える。
<nav>
　<h2>サイトマップ</h2>
　<ol>
　　<li><a href=""></a></li>
・・この場合テキストブラウザや読み上げソフト点字端末、印刷などには見出しが必要ですが視覚系ブラウザには、デザインでナビゲーションだと示せますから
nav h2{display:none;}
とすることは、極めてよく行われます。

　いずれにしても、もう少し具体的な内容(実物でなくても)を教えてください。

　アドバイスのしようがないです。

お礼

回答を頂きまして、有難うございます。
疑問を解決する事が出来ました。
有難うございました。

回答No.4

DrFell

先の回答にあるように、後者は明らかに間違いですので、どちらが正しい？と問われれば、前者の可能性があると答えます。でも、前者が正しいか？というと必ずしも正しいわけではないように思います。

●や▲では意味がわかりません。どのように表示させるか、させたいか？よりも、どのような構造か？でタグをつけるべきです。なので、●や▲の意味や関連によって、正しいタグは変わってきます。

例えば、入れ子のリスト（項目の中に項目がある）場合
<ul>
<li>日本料理<!--子-->
<ol>
<li>郷土料理</li><!--孫-->
<li>懐石料理</li><!--孫-->
<li>会席料理</li><!--孫-->
</ol>
</li>
<li>中華料理</li><!--子-->
<li>洋食料理</li><!--子-->
</ul>

でどうでしょう？デザイン的にも、
子には
ul>li{ }
孫には
ul ol>li{ }
等で区別ができます。

<ul>や<ol>の子要素は必ず<li>です。<li>の中に<h2>を入れることは問題がありませんので、どーしてもh2を使いたいなら

<ol>
<li><h2>▲▲▲▲▲▲</h2></li>
<li>●●●●</li>
<li>●●●●</li>
<li>●●●●●</li>
</ol>
<ul>
<li>●●●</li>
<li>●●●●</li>
</ul>

なら、文法は問題がなくなります。が、文章構造として、今回の質問では使いどころが私には思い浮かびません。見た目のデザインは、cssで調整しましょう。

お礼

回答を頂きまして、有難うございます。
疑問を解決する事が出来ました。
有難うございました。

回答No.3

naokita

olの直接の子は、liのみです。

無理にh2を入れる事もないです。
関連付けるならdlの方が良い場合もあります。
以下、▲で序列リストを意味する場合：

<dl>
<dt>▲▲▲▲▲▲</dt>
<dd>
<ol>
<li>●●●●</li>
<li>●●●●</li>
<li>●●●●●</li>
</ol>
</dd>
</dl>

以下、▲で序列リストと箇条書きリストの両方を意味する場合：

<dl>
<dt>▲▲▲▲▲▲</dt>
<dd>
<ol>
<li>●●●●</li>
<li>●●●●</li>
<li>●●●●●</li>
</ol>
</dd>
<dd>
<ul>
<li>●●●</li>
<li>●●●●</li>
</ul>
</dd>
</dl>

お礼

回答を頂きまして、有難うございます。
疑問を解決する事が出来ました。
有難うございました。

回答No.2

Tacosan

検索するまでもなく, DTD を読めば「ol の中には li しか入れられない」ことは明らか. 従って下の方を正しいとする余地はどこにもない. 一方, 特に過去のしがらみでブラウザには「だめな HTML でもなんとかする能力」を求められることがあるので, 「ブラウザでどう見えるか」は根拠にするべきではない.

ol と ul を並列させて, かつ ol に h2 を付けるなら ul にも h2 を付けるのが論理的に最も自然だね... と書いておくけど, 正直あんまり適切な方法がないというのがなんとも. title 属性はこの場合全く役に立たんし.

かなり苦しいけど
<OBJECT>
<P class="list-caption">なんか</P>
<OL>
<LI>
<!-- これ以降の中身は省略 -->
</OL>
</OBJECT>
みたいにごまかすかなぁ.

お礼

回答を頂きまして、有難うございます。
疑問を解決する事が出来ました。
有難うございました。

回答No.1

Tacosan

上が正しい.

お礼

回答有難うございます。
ネット検索しても、上の記述が正しいとの意見が有りました。

だた、それだと<h2>タグの範囲が、次の見出しが記述されるまで続く事になります。
例えば、下記のような場合は混乱が有ると思います。

<h2>▲▲▲▲▲▲</h2>
<ol>
<li>●●●●</li>
<li>●●●●</li>
<li>●●●●●</li>
</ol>

<ul>
<li>●●●</li>
<li>●●●●</li>
</ul>

つまり、「ｈ２タグ」の範囲を、「olタグ」に囲まれたリストだけ、「ulタグ」はまた別の事柄の時です。その場合は、「ulタグ」の前にも「ｈタグ」を記述していく必要が有りますか？
また、このケースの「ulタグ」の前に「ｈタグ」を付けたくない場合は、他に妥当なタグ（objectタグなど）はあるでしょうか？