【问题标题】:Should HTML list items contain <h#> tags?HTML 列表项是否应该包含 <h#> 标签?
【发布时间】:2012-05-02 23:43:16
【问题描述】:

我想弄清楚这是否是一种好的编码风格。我知道它是有效的,至少在 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>

我使用有序列表是因为这些项目在逻辑上是按顺序排列的,但每个项目似乎都应该有一个标题。从语义上讲,这段代码有意义吗?我应该使用其他类型的标签来表示列表项的标题吗?我应该完全丢弃列表并 only 使用标题标签吗?这里的最佳做法是什么?

【问题讨论】:

    标签: html html-lists html-heading


    【解决方案1】:

    它在任何版本的 HTML 中都有效。但有效性是一个正式的概念,也允许各种废话。

    在实践中,ol means a numbered list of items。它不是一个列表的抽象概念,一个有序的序列。例如,一个段落在逻辑上是一个语句序列,连续的段落构成更高层次的序列。甚至一个单词的字母也是一个有序的序列。我们仍然不为他们使用ol。我们使用ol 来列出一个由浏览器生成编号的相当短的项目的逐项列表,如食谱或购物清单或支持某个想法的参数列表。项目的长度没有具体的上限,除非它们越长,就越不适合以编号列表的形式呈现。

    因此,如果您的列表项需要标题,那么您不应该使用列表。在实际方面,如果您使用h2 作为olli 内的第一个元素,那么默认情况下,项目编号将以比标题小得多的字体显示(并且是正常粗细,而不是粗体) )。每当默认呈现非常奇怪时,您应该问自己是否使用 HTML 标记的方式真的打算使用。

    该示例由前面带有标题的段落组成。除了 h2p 之外,没有任何实际或理论上的理由让它有标记,除非您需要将标题和段落的组合视为一个单元,或将整个构造视为一个单元,以达到目的样式或脚本。如果需要,请使用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>
    

    foobar 替换为反映内容的名称,或使用通用名称(如 sectionsubsection)。 (这部分取决于品味和编码风格,部分取决于您是否打算对具有不同含义的内容使用相似的标记。)

    或者,您可以根据 HTML5 草案使用 section 标记,但它会导致问题,因为一些旧浏览器根本无法识别,并且在功能或外观方面没有实际好处(尽管这就像任何东西一样) ,可能会改变)。

    div 与类一起使用可以让您轻松设置它们的样式(或在 JavaScript 中处理它们),而无需您首先需要防止的特殊默认呈现(作为带有边距的编号列表)的负担。

    如果您希望对项目进行编号,最稳健的方法是最明显的方法:将数字放入标题中,例如&lt;h2&gt;1 The First Item&lt;/h2&gt;。如果您认为创作中的灵活性,即重新排序部件、添加和删除部件的可能性,而无需手动更改数字,足以证明在最旧的浏览器中缺少数字,您可以使用 CSS(自动编号和生成的内容) 来插入数字。

    【讨论】:

      【解决方案2】:

      从语义上讲,这有点多余,但如果它对您的内容有意义,那就太好了。

      【讨论】:

      • 假设我的 CSS 从有序列表中删除了编号。这是否表明我不应该使用有序列表开始?这些项目按时间倒序代表一个人的工作历史,但我不需要对它们进行编号。文档中项目的顺序是否足以让我在不丢失排序语义的情况下删除列表标记?
      • 对此没有“正确”答案,但恕我直言,是的,您的 CSS 删除了数字这一事实,再加上您使用了正确的 H# 标签,我得出的结论是列表本身是不需要的。
      【解决方案3】:

      问问自己这是否真的是一个列表。如果是这样,我认为你正在做的事情很好。 另请查看 CSS 计数器和编号:http://webdesign.about.com/od/css2/a/aa032807.htm

      【讨论】:

        【解决方案4】:

        如果您的列表没有按特定顺序排列,请使用无序列表。您甚至可以考虑使用嵌套列表,但在这种情况下,我会使用定义列表。

        http://jsfiddle.net/SmqFK/

        【讨论】:

          【解决方案5】:

          这真的取决于你想要完成什么。 html 就是为了让事情看起来不错。无论如何,对我来说似乎很好。我也喜欢这个小标签。

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

          【讨论】:

          • 字段集和图例主要用于表单布局
          • 我不同意“html 就是让事情看起来更好”。 HTML 就是从语义上描述数据。 CSS 就是让它看起来不错。
          • 我真的不认为&lt;fieldset&gt; 合适。这更适用于交互式表单的逻辑部分,而不是静态内容。无论我使用哪种元素,我都会使用大量的 CSS 来让这件事看起来正确。我只希望我选择的元素能够反映列表的语义。如果它有帮助,在我的情况下,它是一个工作历史列表。每个标题都是公司名称,描述是对工作的简要说明。
          • HTML 不仅仅是为了让事情看起来更好。这就是 CSS 的作用。 HTML 应该是关于在有意义的部分中对文档进行语义分割
          猜你喜欢
          • 2015-08-28
          • 1970-01-01
          • 2012-12-08
          • 2020-08-20
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-05-07
          相关资源
          最近更新 更多