我有一个由各种“部分”组成的页面,如视频,新闻提要等。我有点困惑如何用HTML5表示这些。目前我有他们作为HTML5 <节>s,但进一步检查,看起来他们更正确的标签将是<文章>。有人能给我解释一下吗?

这些东西都不是真正意义上的博客文章或“文档”,所以很难看出该应用哪个元素。

编辑:我选择使用文章标签,因为它似乎是一个容器标签的不相关的元素,我猜我的“部分”是。然而,实际的标签名称文章似乎很有误导性,尽管他们说HTML5的开发更多地考虑了web应用程序,但我发现很多标签更以博客为中心/基于文档。

无论如何,谢谢你的回答,这似乎是相当主观的。


我将使用<article>作为与页面上其他块完全无关的文本块。 <section>,另一方面,将是一个分隔符,分隔彼此相关的文档。

现在,我不确定你在你的视频,新闻等,但这里有一个例子(没有真正的正确或错误,只是我如何使用这些标签的指导方针):

<article>
    <h1>People</h1>
    <p>text about people</p>
    <section>
        <h1>fat people</h1>
        <p>text about fat people</p>
    </section>
    <section>
        <h1>skinny people</p>
        <p>text about skinny people</p>
    </section>
</article>
<article>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</article>

如您所见,这些部分仍然彼此相关,但只要它们在将它们分组的块中。章节不必在文章内部。它们可以在一个文档的主体中,但是当整个文档是一篇文章时,我在主体中使用章节。

e.g.

<body>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</body>

希望这是有意义的。


我喜欢坚持所使用词语的标准含义:An article将适用于,嗯,文章。我将博客文章、文档和新闻文章定义为文章。另一方面,section指的是布局/ux项:边栏、页眉、页脚都是section。然而,这完全是我个人的解释——正如您所指出的,这些元素的规范并没有很好地定义。

为了支持这一点,w3c将article元素定义为可以独立存在的内容部分。一篇博客文章可以作为一种有价值和可消费的内容。然而,头文件则不会。

这里有一篇有趣的文章,讲的是一个人疯狂地试图区分这两种新元素。这篇文章的基本观点,我也认为是正确的,就是尝试使用你认为最能代表它所包含内容的元素。

What’s more problematic is that article and section are so very similar. All that separates them is the word “self-contained”. Deciding which element to use would be easy if there were some hard and fast rules. Instead, it’s a matter of interpretation. You can have multiple articles within a section, you can have multiple sections within and article, you can nest sections within sections and articles within sections. It’s up to you to decide which element is the most semantically appropriate in any given situation.

这里有一个很好的答案来回答同样的问题


听起来好像您应该将每个“章节”(如您所称)包装在<article>标记中,并将文章中的条目包装在<section>标记中。

HTML5规范说(章节):

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. [...] Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information. Note: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

和Article

类中的一个自包含组合 文件、页面、应用程序或站点,即原则上 可独立分发或可重用,例如在联合中。这 可以是一篇论坛帖子,一篇杂志或报纸文章,一篇博客文章, 用户提交的评论、交互式小部件或小工具等等 其他独立内容项。

我认为你在OP中所说的“章节”符合文章的定义,因为我可以看到它们是可独立分发或可重用的。

更新:在最新的HTML 5.1编辑稿中,文章有一些小的文字改动(斜体字的改动):

article元素表示一个完整的,或自包含的, 在文档、页面、应用程序或站点中的组合,即在 原则,可独立分发或可重复使用,例如 联合。这可以是一个论坛帖子,杂志或报纸 文章、博客条目、用户提交的评论、交互式小部件 或小工具,或任何其他独立的内容项目。

此外,2013年1月和2月关于文章的公共HTML邮件列表的讨论。


同样,对于联合的内容,“鼓励作者使用article元素而不是section元素,如果联合元素的内容是有意义的。”


我的解读是: 我认为YouTube有一个评论区,在评论区里面有很多文章(在这种情况下是评论)。

因此,section就像一个存放文章的div-container。


在关于构建HTML5的W3 wiki页面中,它说:

<section>:用于将不同的文章分为不同的目的或 主题,或者定义一篇文章的不同部分。

然后显示我清理过的图像:

它还描述了如何使用<article>标签(来自上面的同一个W3链接):

<article> is related to <section>, but is distinctly different. Whereas <section> is for grouping distinct sections of content or functionality, <article> is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way - if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then <article> is suitable for marking them up. In our example, <section id="main"> contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore <article> is perfect for them:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

简单的哈?请注意,您也可以在其中嵌套部分 文章,这样做是有意义的。例如,如果每一个 这些博客文章有一个一致的结构,不同的部分,然后 你也可以在文章中加入章节。它看起来 就像这样:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

section基本上是h1(或其他h标记)和与之对应的内容的包装器。文章本质上是你的文档中的一个重复或分页的文档…比如你文档上的每一篇博文都可以是一篇文章,或者你文档上的每一条评论都可以是一篇文章。


部分

使用它来定义布局的一个部分。可以是中间,左边,右边 等. . 这有一个与其他元素联系的意思,简单地说,它是依赖的。

文章

在你有独立内容的时候使用这个方法。 Article有其完整的含义。


下面的流程图可以帮助您选择各种语义HTML5元素之一: