Question

我在问自己一个博客条目列表的标记。

可能是这样的：

案例1：

<article>...</article>
<article>...</article>
<article>...</article>

或案例2：

 <ol reversed>
    <li><article>...</article></li>
    <li><article>...</article></li>
    <li><article>...</article></li>
 </ol>

这个例子似乎是逻辑：＆＃34;它是一个按照desc date排序的条目列表＆＃34;

另一个例子是使用产品的重要步骤列表：

<ol>
     <li><section><h1>step 1</h1></section></li>
     <li><section><h1>step 2</h1></section></li>
     <li><section><h1>step 3</h1></section></li>
</ol>

获得如下大纲：

product name
    description
    how to use
       step 1
       step 2
       step 3
    customer reviews
    etc

你觉得这个内容的标记太多了吗？

我的目的是获得最佳的HTML5语法和大纲，但我不想用无用的标签填充HTML。

编辑：真正的问题不是什么更好，而是更像是知道开发人员正在考虑这些不同的方式。因为有很多方法可以做，但有时如果有两种方法是正确的，那么可能还有更多的方法可以做到。或＆＃34;相关＆＃34;这样做的方法。

Answer 1

只有在“更改订单会改变含义”时才能使用

ol。仅仅因为内容排序某种方式并不一定意味着ol是合适的。

如果您使用列表（ol或ul）取决于您的实际内容及其背景，则无法一般地回答。 HTML5规范将这些列表定义为“项目列表”，而不指定列表是什么或符合项的条件。

可能/主观的经验法则（除了很多例外）：查看您的内容并问自己是否将其称为列表，如果您可以使用典型的项目符号进行描述。

一个名为“博客”的页面，显示了10篇全文博客文章？可能不是。
标题为“相关帖子”的侧边栏，显示10个博客帖子链接？可能是的。

这表明内容的“复杂性”也可能发挥作用，因此另一种可能/主观的经验法则（甚至更多例外）：如果一个项目有一个标题（即，它是一个部分）和长内容，您可能不需要列表。

使用产品的步骤，其中每个步骤都包含对图像的长说明？可能不是。
使用产品的步骤，每一步都包含一个简短的句子？可能是的。

Answer 2

同意unor。

按照标准：

<块引用>

虽然它符合在 li 元素中包含标题元素（例如 h1），但它可能没有传达作者想要的语义。一个标题开始一个新的部分，因此列表中的标题隐式地将列表分成多个部分。

https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element

所以我认为如果内容可以有标题 - 将其包含在列表中是不合适的。

对于文章列表，哪种语义更好？

2 个答案: