3

これが適切なコーディング スタイルかどうかを判断しようとしています。少なくとも 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>

アイテムには論理的に連続した順序があるため、順序付きリストを使用していますが、各アイテムには見出しが必要なようです。意味的に、このコードは理にかなっていますか? リスト項目のヘッダーを示すために、他の種類のタグを使用する必要がありますか? リストを完全に破棄して、ヘッダー タグのみを使用する必要がありますか? ここでのベストプラクティスは何ですか?

4

5 に答える 5

6

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

実際にolは、アイテムの番号付きリストを意味します。これは、リストの抽象的な概念ではなく、順序付けられたシーケンスです。たとえば、段落は論理的にはステートメントのシーケンスであり、連続する段落はより高いレベルのシーケンスを構成します。単語の文字でさえ、順序付けられたシーケンスです。まだ使用olしていません。レシピやショッピングリスト、またはアイデアをサポートする引数のリストのように、ブラウザで生成された番号付けを使用olして、かなり短いアイテムの項目別リストを作成するために使用します。アイテムの長さに特定の上限はありませんが、アイテムが長くなるほど、番号付きリストとして表示するのに適していないという意味があります。

したがって、リストアイテムに見出しが必要な場合は、リストを使用しないでください。実用面では、の内の最初の要素として使用する場合、h2アイテム番号はデフォルトで見出しよりもはるかに小さいフォントで表示されます（通常の太さでは太字ではありません）。デフォルトのレンダリングがばかばかしいほど奇妙な場合は常に、HTMLマークアップを実際に使用することを意図した方法で使用しているかどうかを自問する必要があります。liol

この例は、見出しが前に付いた段落で構成されています。スタイリングまたはスクリプトの目的で、見出しと段落の組み合わせを1つの単位として、または構成全体を1つの単位として扱う必要がない限り、マークアップを「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>

fooおよびbarをコンテンツを反映する名前に置き換えるか、sectionおよびなどの一般的な名前に置き換えsubsectionます。（これは、一部は好みとコーディングスタイルに依存し、一部はさまざまな意味を持つコンテンツに同様のマークアップを使用する予定があるかどうかに依存します。）

または、HTML5ドラフトに従ってマークアップを使用することもできますがsection、一部の古いブラウザーはまったく認識しないため問題が発生し、機能や外観の点で実際のメリットはありません（ただし、これは変更される可能性があります）。

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

アイテムに番号を付けたい場合、最も堅牢な方法は最も明白な方法です。たとえば、見出しに番号を入れます<h2>1 The First Item</h2>。作成の柔軟性、つまり、手動で番号を変更せずにパーツを並べ替えたり、パーツを追加および削除したりする可能性が、最も古いブラウザーでの番号の不足を正当化するのに十分重要であると考える場合は、CSS（自動番号付けと生成されたコンテンツ）を使用できます）数字を挿入します。

于 2012-05-03T03:38:56.693 に答える
1

意味的には少し冗長ですが、コンテンツで意味があればまったく問題ありません。

于 2012-05-02T23:58:59.633 に答える
0

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

http://jsfiddle.net/SmqFK/

于 2012-05-03T03:18:30.843 に答える
0

それが本当にリストかどうか自問してください。もしそうなら、私の意見では、あなたがしていることは問題ありません。CSS カウンターと番号付けも参照してください: http://webdesign.about.com/od/css2/a/aa032807.htm

于 2012-05-03T00:02:53.497 に答える
-4

それは本当にあなたが達成しようとしていることに依存します。html は見栄えを良くするためのものです。とにかく、それは私には問題ないようです。この小さなタグも気に入っています。

<ol>
  <li>
      <fieldset>
        <legend><b>The Fist Item:</b></legend>
        a descriptive paragraph
      </fieldset>
  </li>
</ol>
于 2012-05-02T23:55:36.220 に答える