【问题标题】:Is it a good practice to put <article>s inside <li>s?把 <article>s 放在 <li>s 里面是个好习惯吗?
【发布时间】:2013-04-19 06:09:59
【问题描述】:

通常在博客的首页,有几篇最近的博文,每篇博文都是&lt;article&gt;。通常博客 cmets 也使用&lt;article&gt;s 进行标记。

我的问题是:将这些 &lt;article&gt;s 放入 &lt;li&gt;s 是一个好习惯吗?我曾经这样做是因为在我自己的解释中,这些&lt;article&gt;s 以某种数量/数量的方式呈现。所以在列出一定数量/数量的元素时,&lt;ul&gt;&lt;ol&gt; 是最好的选择。

但是,也许我需要重新考虑我的解释,因为将&lt;article&gt;s 放入&lt;li&gt;s 似乎是对&lt;li&gt; 的滥用。我还想考虑可访问性。我不确定这样做是否会导致对辅助技术的混淆。

【问题讨论】:

标签: html html-lists accessibility semantics article


【解决方案1】:

问题真正归结为:什么构成列表?如果是文章列表,则应使用&lt;li&gt; 进行标记。屏幕阅读器用户的优势是屏幕阅读器可以使用语义标记来传达有用的信息。例如,通知用户他们刚刚进入“5 个项目的列表”,这有助于他们了解内容的组织方式以及内容的数量。

也就是说,如果列表中的每个项目都非常长或包含具有大量嵌套元素的复杂内容,我同意@IanY 这可能会造成混淆,因为这样用户就很难跟踪他们在其中的位置列表。

当内容块相对较大时,如果有视力的用户不太可能查看该内容并将其识别为项目列表,那么您不应使用&lt;li&gt;。如果您使用&lt;article&gt; 和标题来标记文章标题,则可以提供足够多的语义以方便屏幕阅读器用户进行导航。

【讨论】:

  • 谢谢。我决定通过询问WAI Interest Group的人来弄清楚这件事,我得到的回应是这些&lt;article&gt;s不应该被视为物品清单。也看回复,请访问here
【解决方案2】:

如果文章是完整的博客文章,则它是合适的。我不会用它来做预告片。文章标签应该用于可以独立存在的内容。

【讨论】:

  • 我不认为@Ian 是在询问&lt;article&gt; 是否适合博客文章。他在问是否适合将其放在&lt;li&gt; 标签中。
  • 是的。虽然这不是我的主要问题,但@Ted 确实提到了一个有趣的观点。那么,您会建议在博客首页中使用哪种 HTML5 元素作为预告片?
  • 换个角度看,预告片也是一个独立的内容,不是吗?也许我们不应该在上面使用微数据itemtype="http://schema.org/BlogPosting",但也许它仍然值得&lt;article&gt;
  • article 对于预告片来说完全没问题。它仍然是一个独立的项目。
【解决方案3】:

&lt;article&gt;s 放入&lt;li&gt;s 似乎是对&lt;li&gt; 的滥用。

怎么样?

我不确定这样做是否会导致对辅助技术的混淆。

据我所知没有。如果有问题,我会对所讨论的辅助技术感到惊讶/失望。

【讨论】:

  • 我最初的担心是&lt;article&gt; 通常很长,在&lt;li&gt; 中放置很长的内容看起来很奇怪。感谢您提供有关辅助技术的信息。 :)
  • @IanY。当然,我明白你的意思。我没有使用足够的屏幕阅读器来了解&lt;li&gt;s 中的长内容是否存在问题。
猜你喜欢
  • 2010-12-05
  • 2016-02-28
  • 2011-07-29
  • 2016-01-03
  • 2022-08-05
  • 1970-01-01
  • 2011-06-17
  • 2018-08-09
  • 2014-12-22
相关资源
最近更新 更多