将< article>嵌套在语义上是否正确?< li>中的元素元素? [英] Is it semantically correct to nest an <article> element within a <li> element?

问题描述

使用HTML5，将< article> 元素放在< li> 元素内在语义上是正确的.可能有用的情况是博客上的近期或流行文章列表.请考虑以下内容:

using HTML5, would it be semantically correct to place an <article> element within a <li> element. A situation where this would prove useful is a list of recent or popular articles on a blog. Consider the following:

<section id="popular">
  <div class="blurb">
    <h2>Popular Articles</h2>
    <p>The most popular posts from my blog.</p>
  </div>
  <ul>
    <li>
      <article>
        <h3>Article</h3>
        <p>An excerpt from the article.</p>
      </article>
    </li>
    <li>
      <article>
        <h3>Article</h3>
        <p>An excerpt from the article.</p>
      </article>
    </li>
    <li>
      <article>
        <h3>Article</h3>
        <p>An excerpt from the article.</p>
      </article>
    </li>
  </ul>
</section>

显示如下:

我的博客中最受欢迎的帖子.

The most popular posts from my blog.

• 文章

  文章摘录.

文章摘录.

文章摘录.

对我来说，这似乎是标记信息的绝佳方法.我唯一的问题是，以这种方式将< article> 元素嵌套在< li> 元素内是否正确.

To me, this seems an excellent way of marking up the information. My only question is if it is correct to nest the <article> element inside the <li> element in this way.

推荐答案

在语义上没有任何不正确的地方，但这并不是必须的.< ul> 和< li> 元素在这里并没有真正添加任何内容，除非您利用它们的默认样式.只需将< article> 标记直接放置在< section id ="popular"> 内就足够了，并且可以降低页面的复杂度，以及它的大小.

There is nothing semantically incorrect about it, but it is not really necessary. The <ul> and <li> elements aren't really adding anything here, unless you are taking advantage of their default styling. Simply putting the <article> tags directly within the <section id="popular"> should be sufficient, and it reduces the complexity of your page as well as its size.

要确定某些内容在语义上是否正确并在HTML中有用，请问自己几个问题.您是否将每个元素用于其预期目的?例如，如果将< a> 元素用于按钮，则在语义上是不正确的，因为< a> 用于超链接，< button>用于按钮.您是否需要使用每个元素来传达有关内容的所有语义信息(节，标题，链接等)?您打算传达使用有意义的元素表达不是的任何有意义的事情吗?拥有许多额外的无意义的元素通常不会造成危害，但会增加混乱，这可能意味着您在视觉上传达了语义上的区别，但没有以屏幕阅读器或自动bot或浏览器在其中显示信息的方式进行编码.可以使用其他格式.

To determine whether something is semantically correct and useful in HTML, ask yourself a few questions. Are you using each element for its intended purpose? For instance, it's not semantically correct if you use an <a> element for a button, as <a> is for hyperlinks, <button> is for buttons. Do you need each element you are using in order to convey all of the semantic information about your content (sections, headings, links, etc)? Is there anything meaningful that you intend to convey that isn't expressed by use of appropriate elements? Having lots of extra meaningless elements usually isn't harmful, but it adds clutter, and it may mean that there are semantic distinctions you are conveying visually but not encoding in a way that a screen reader or automated bot or browser that presented the information in a different format could make sense of.

这篇关于将< article>嵌套在语义上是否正确?< li>中的元素元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！