HTMLリスト項目に<h#>タグが含まれていますか？

Question

私はこれが良いコーディングスタイルかどうかを判断しようとしています。私はそれが少なくともHTML5の下では有効であることを知っていますが、その意味的意味が私の意図と一致するかどうかを知りたいのです。

<ol> 
    <li> 
    <h2>The First Item</h2> 
    <p>a descriptive paragraph</p> 
    </li> 
    <li> 
    <h2>The Second Item</h2> 
    <p>a descriptive paragraph</p> 
    </li> 
    <li> 
    <h2>The Third Item</h2> 
    <p>a descriptive paragraph</p> 
    </li> 
</ol> 

項目に論理的にシーケンシャルな順序があるので、私は順序付けられたリストを使用していますが、それは見出しに値するように各項目は思われます。意味的には、このコードは意味がありますか？リスト項目のヘッダーを示すために他の種類のタグを使用する必要がありますか？私は完全にリストを捨てるべきであり、ヘッダータグだけを使用しますか？ここでベストプラクティスは何ですか？

Answer 1

本当にあなたが達成しようとしているものによって異なります。 htmlは、物事が良く見えるようにすることです。とにかく、それは私にとってはうまくいくようです。私もこの小さなタグが好きです。

<ol> 
    <li> 
     <fieldset> 
     <legend><b>The Fist Item:</b></legend> 
     a descriptive paragraph 
     </fieldset> 
    </li> 
</ol> 

Answer 2

意味的には少し重複していますが、コンテンツに合っていると完全に問題ありません。

Answer 3

実際にリストであるかどうかを確認してください。もしそうなら、私の意見ではあなたがしていることは大丈夫です。 また、CSSのカウンターと番号を確認してください。http://webdesign.about.com/od/css2/a/aa032807.htm

Answer 4

リストが特定の順序でない場合は、順序なしリストを使用してください。ネストされたリストの使用を検討することもできますが、この場合は定義リストを使用します。

http://jsfiddle.net/SmqFK/

Answer 5

これは、HTMLの任意のバージョンで有効です。しかし、妥当性はあらゆる種類のナンセンスも許す正式な概念です。

実際にはol means a numbered list of itemsです。これはリストの抽象概念ではなく、順序付けられたシーケンスです。たとえば、段落は論理的に文の列であり、連続する段落は上位の段落を構成します。単語の文字さえ順序付けられたシーケンスです。まだ彼らのためにolを使用していません。 olを使用して、レシピ、買い物リスト、またはアイデアをサポートする議論のリストのように、ブラウザで生成された番号付きのかなり短い商品のリスト項目を設定します。項目の長さには特定の上限はありませんが、長ければ長いほど、番号付きリストとして提示するのに適していません。

したがって、リスト項目に見出しが必要な場合は、リストを使用しないでください。実際にはをliのolの最初の要素として使用すると、項目番号はデフォルトで見出しよりはるかに小さいフォントで表示されます（太字ではなく通常の太さで表示されます）。デフォルトのレンダリングがばかげて奇妙な場合はいつも、のようにHTMLマークアップを使用しているのかどうか、実際にはを使うべきかどうかを尋ねてください。

この例は、見出しの前に段落が含まれています。スタイリングやスクリプティングの目的で、見出しと段落の組み合わせを単位として扱う必要がある場合を除いて、h2またはp以外のマークアップを使用する必要がある実用的または理論的な理由はありません。必要な場合はdivと入力してください。

<div class="foo"> 
    <div class="bar"> 
    <h2>The First Item</h2> 
    <p>a descriptive paragraph</p> 
    </div> 
    <div class="bar"> 
    <h2>The Second Item</h2> 
    <p>a descriptive paragraph</p> 
    </div> 
    <div class="bar"> 
    <h2>The Third Item</h2> 
    <p>a descriptive paragraph</p> 
    </div> 
</div> 

内容を反映名で、またはsectionとsubsectionのような一般的な名前でfooとbarを交換してください。

また、HTML5ドラフトごとにsectionマークアップを使用することもできますが、一部の古いブラウザでは問題が発生します（これは、趣味やコーディングスタイルによって部分的に異なりますが、一部は意味が異なるコンテンツに同様のマークアップを使用するかどうかによって異なります）。何も認識しませんし、機能や外見の点で実際のメリットはありません（ただし、これは変更される可能性があります）。

divをクラスに使用すると、特別なデフォルトレンダリング（余白付きの番号付きリスト）の負担がなく、簡単にスタイルを設定（またはJavaScriptで処理）できます。

アイテムに番号を付ける場合は、最も堅牢な方法が最も明白です。数字を見出しに入れます（例： <h2>1 The First Item</h2>。もしオーサリングの柔軟性、すなわち部品の並べ替えの可能性、手動で数字を変更しないでパーツの追加と削除を行うことは、最も古いブラウザでの数字の不足を正当化するのに十分重要だと思うならば、CSS（自動ナンバリングと生成コンテンツ）を押して数字の数字を挿入します。