No.5ベストアンサー
- 回答日時:
ブラウザで表示を確認して・・・と言うのはダメなのです。
ブラウザには、エラーのある文書も極力拡大解釈して表示することが求められていますが、著者がそれに頼るのは間違いです。・認識できない要素があった場合、ユーザエージェントは、内容のレンダリングを試みねばならない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・著者
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
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タグ」内に「hタグ要素」を含めるのは正しい?
こんなことはここで聞くより仕様書に目を通せば正確な答えが分かります。
⇒<!ELEMENT OL - - (LI)+( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
OLは開始タグ終了タグとも省略不可(--)、中にはLIをひとつ以上(+)と明記してあるし、
⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
で[DATA]タブから送信してみりゃ、詳しく解説してくれる。
No.1の補足で
「だた、それだと<h2>タグの範囲が、次の見出しが記述されるまで続く事になります。
例えば、下記のような場合は混乱が有ると思います。」
これはHTMLに限らず、一般的な文書でも見出しをつけると、新たなセクションが始まり、次に見出しが現れるまでは、ひとつのセクションに所属するのではないですか????
連続するふたつのリストの内容が分かりませんから、どのマークアップが正しいかは示すことが出来ません。
「「h2タグ」の範囲を、「olタグ」に囲まれたリストだけ、「ulタグ」はまた別の事柄の時です。その場合は、「ulタグ」の前にも「hタグ」を記述していく必要が有りますか?」
もし、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
- 回答日時:
先の回答にあるように、後者は明らかに間違いですので、どちらが正しい?と問われれば、前者の可能性があると答えます。
でも、前者が正しいか?というと必ずしも正しいわけではないように思います。●や▲では意味がわかりません。どのように表示させるか、させたいか?よりも、どのような構造か?でタグをつけるべきです。なので、●や▲の意味や関連によって、正しいタグは変わってきます。
例えば、入れ子のリスト(項目の中に項目がある)場合
<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
- 回答日時:
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
- 回答日時:
検索するまでもなく, DTD を読めば「ol の中には li しか入れられない」ことは明らか. 従って下の方を正しいとする余地はどこにもない. 一方, 特に過去のしがらみでブラウザには「だめな HTML でもなんとかする能力」を求められることがあるので, 「ブラウザでどう見えるか」は根拠にするべきではない.
ol と ul を並列させて, かつ ol に h2 を付けるなら ul にも h2 を付けるのが論理的に最も自然だね... と書いておくけど, 正直あんまり適切な方法がないというのがなんとも. title 属性はこの場合全く役に立たんし.
かなり苦しいけど
<OBJECT>
<P class="list-caption">なんか</P>
<OL>
<LI>
<!-- これ以降の中身は省略 -->
</OL>
</OBJECT>
みたいにごまかすかなぁ.
No.1
- 回答日時:
上が正しい.
回答有難うございます。
ネット検索しても、上の記述が正しいとの意見が有りました。
だた、それだと<h2>タグの範囲が、次の見出しが記述されるまで続く事になります。
例えば、下記のような場合は混乱が有ると思います。
<h2>▲▲▲▲▲▲</h2>
<ol>
<li>●●●●</li>
<li>●●●●</li>
<li>●●●●●</li>
</ol>
<ul>
<li>●●●</li>
<li>●●●●</li>
</ul>
つまり、「h2タグ」の範囲を、「olタグ」に囲まれたリストだけ、「ulタグ」はまた別の事柄の時です。その場合は、「ulタグ」の前にも「hタグ」を記述していく必要が有りますか?
また、このケースの「ulタグ」の前に「hタグ」を付けたくない場合は、他に妥当なタグ(objectタグなど)はあるでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS display flex の使い方 1 2022/04/25 19:13
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- その他(プログラミング・Web制作) pythonリストの特定の値を表示htmlで表示できない 2 2022/05/14 05:48
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- PHP SQLとPHPの連結方法がわからないのでアドバイスお願い致します 1 2022/07/12 12:16
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<ul><li></li></ul>にするメリ...
-
リストを2つに分割して、それぞ...
-
divタグ内のコンテンツが重なっ...
-
円形の配置にするコーディング...
-
ホームページビルダーで同じ行...
-
リストの並べ替え
-
文字の先頭につけるアイコン
-
ulタグやliタグの中でbrタグ...
-
htmlの<ol>タグで、数字などを...
-
jQuery-もっと見るボタンをスマ...
-
テーブル内のプルダウンの下に...
-
html <ul></ul>の並びで一行空...
-
タイトルの横にサブタイトルが並ぶ
-
html/cssの、navを2段にする...
-
CSS フォントサイズの違うリス...
-
番号付きリスト(<Ol><Li>・・...
-
<li>で並べたメニューのリンク...
-
ボタンを横に並べて表示させる方法
-
レスポンシブなサイトがうまく...
-
display:table;を多段表示させたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ページを開いているときのリン...
-
HTML5のfooterに見出しを付けて...
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報