【问题标题】:Section vs Article HTML5部分与文章 HTML5
【发布时间】:2011-11-24 20:39:29
【问题描述】:

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

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

干杯

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

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

【问题讨论】:

  • 这并不重要。使用任何对你有意义的东西。我个人会使用section's
  • @illia choly:我同意你的观点,没有真正的对与错。
  • 简洁的解释与示例MDN

标签: html markup


【解决方案1】:

Article 和 Section 都是 HTML5 的语义元素。 部分是网页的块级通用部分,但与我们的网页内容相关。 文章也是块级的,但文章是指网页的单个博客文章、评论。

Article 和 Section 都应该包含一个标题元素 h2-h6。

对于博客文章,请对文章和部分使用以下语法。

<article role="main">
         <h1>Heading 1</h1>
         <p>Article Description</p>
         <section id="sec1">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
         <section id="sec2">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
</article>

【讨论】:

    【解决方案2】:

    在选择各种语义 HTML5 元素之一时,下面的流程图可能会有所帮助:

    【讨论】:

      【解决方案3】:

      部分

      • 使用它来定义布局的一部分。可能是mid,left,right 等等。
      • 这意味着与其他元素有联系,简单地说,它是 DEPENDENT。

      文章

      • 在您有独立的内容时使用它。

      • 文章有其完整的含义。

      【讨论】:

        【解决方案4】:

        一个部分基本上是h1(或其他h标签)和与之对应的内容的包装器。 article 本质上是文档中重复或分页的文档...就像文档中的每篇博文都可以是一篇文章,或者文档上的每条评论都可以是一篇文章。

        【讨论】:

          【解决方案5】:

          W3 wiki page about structuring HTML5 中,它说:

          &lt;section&gt;:用于将不同的文章分组到不同的目的或 主题,或定义一篇文章的不同部分。

          然后显示我清理的an image

          它还描述了如何使用&lt;article&gt; 标签(来自上面相同的 W3 链接):

          &lt;article&gt;&lt;section&gt; 相关,但明显不同。 而&lt;section&gt; 用于对不同的内容部分进行分组或 功能,&lt;article&gt; 用于包含相关个人 独立的内容片段,例如个人博客文章、视频、 图片或新闻。这样想——如果你有很多 内容项目,每个项目都适合阅读他们的 拥有,并且在 RSS 中作为单独的项目进行联合是有意义的 feed,那么&lt;article&gt; 适合标记它们。

          在我们的示例中,&lt;section id="main"&gt; 包含博客条目。每个博客 条目将适合作为 RSS 提要中的项目进行联合,并且 脱离上下文单独阅读时会有意义,因此 &lt;article&gt; 非常适合他们:

          <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>
          

          【讨论】:

          • 另外:
            可用于包裹页眉和页脚之间的元素(图像中的蓝色块)。
            将图片包裹在文章或部分中。
          • 干得好。这应该是公认的答案。我同意你应该添加main的逻辑单元。
          • 您应该使用文章中的部分更新图片。
          • 我觉得文章和部分之间的这场战争现在会因为混乱而结束。但是 Justin Im 100% 支持您使用部分而不是文章,因为部分适用于文档的部分内容(如您所示),其中文章是文档内部的独立、独立内容(以及其部分)。无论如何,从语义上讲,“部分”一词作为旧 div 部分的替代品更有意义。干得好!
          • 如果您需要比
            更具体的内容,也可以在
            中使用
          【解决方案6】:

          我的解释是: 我认为 YouTube 有一个评论部分,在评论部分中有多篇文章(在本例中为 cmets)。

          所以一个部分就像一个包含文章的 div 容器。

          【讨论】:

            【解决方案7】:

            听起来您应该将每个“部分”(如您所称)包装在&lt;article&gt; 标记中,并将文章中的条目包装在&lt;section&gt; 标记中。

            HTML5 spec 说(部分):

            section 元素表示文档的通用部分或 应用。在这种情况下,一个部分是一个主题分组 内容,通常带有标题。 [...]

            章节的例子是章节,不同的标签页 选项卡式对话框,或论文的编号部分。网络 网站的主页可以分成几个部分进行介绍, 新闻项目和联系信息。

            注意:鼓励作者使用文章元素而不是 section 元素,什么时候可以联合 元素。

            对于Article

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

            我认为您在 OP 中所谓的“部分”符合文章的定义,因为我可以看到它们可独立分发或可重复使用

            更新:articlelatest editors draft for HTML 5.1 中的一些小文本更改(斜体更改):

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

            另外,在 2013 年的 JanuaryFebruary 中讨论了关于 article 的公共 HTML 邮件列表。

            【讨论】:

            • 在网上搜索时,我发现了一份法律文件,上面写着Article 1, Section 2, Clause 3。我希望这能帮助我记住逻辑。
            • 我在一定程度上不同意,但我也相信它们可以根据上下文进行切换。阅读规范说明向我表明,如果 article 充当“小部件”,则应该相反。 section:“主题分组”和“文档部分”。 article:“自包含”和“小部件”。考虑一个主页示例,例如codepen.io/anon/pen/iDEwf
            • 为什么他们说单个论坛帖子可以写一篇文章?没有帖子的其余部分恕我直言,论坛帖子是不完整的。
            • 这是倒退的。 W3C 明确指出section 是内容的主题分组,而article 是独立元素(即可以分组为主题)。把它想象成报纸:你会在每个部分找到很多文章。例如,娱乐部分的电影评论文章。
            • 在这里同意@Chuck。在我的书中,这个答案完全倒退了。 Justin's answer 更合适。但是哦,好吧,猜测规范留下了很多解释空间。不确定这是好事还是坏事。
            【解决方案8】:

            此外,对于联合内容,“当联合元素的内容有意义时,鼓励作者使用 article 元素而不是 section 元素。”

            【讨论】:

              【解决方案9】:

              我喜欢坚持所用词的标准含义:article 将适用于文章。我会将博客文章、文档和新闻文章定义为articles。另一方面,节将引用布局/用户体验项目:侧边栏、页眉、页脚将是节。然而,这都是我个人的解释——正如你所指出的,这些元素的规范没有很好地定义。

              支持这一点,w3carticle 元素定义为可以独立存在的内容部分。一篇博文可以作为有价值且可消费的内容独立存在。但是,标题不会。

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

              更成问题的是文章和版块都非常 相似的。将它们分开的只是“自包含”一词。 如果有一些困难,决定使用哪个元素会很容易 和快速的规则。相反,这是一个解释问题。你可以有 一个部分内有多篇文章,您可以有多个部分 在和文章中,您可以在部分和文章中嵌套部分 节内。由您决定哪个元素最多 在任何给定的情况下语义上都是合适的。

              Here 是对 SO 上相同问题的一个很好的答案

              【讨论】:

                【解决方案10】:

                我会使用&lt;article&gt; 作为与页面上的其他块完全无关的文本块。 另一方面,&lt;section&gt; 将作为分隔符来分隔彼此相关的文档。

                现在,我不确定您的视频、新闻源等中包含什么,但这里有一个示例(没有真正的对错,只是我如何使用这些标签的指南):

                <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>
                

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

                例如

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

                希望这是有道理的。

                【讨论】:

                • I'd use &lt;article&gt; for a text block that is totally unrelated to the other blocks on the page. 我知道你在 2011 年写过这篇文章,但是,这不是 &lt;aside&gt; 标签的用途吗?
                猜你喜欢
                • 2015-02-21
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2012-09-09
                • 1970-01-01
                • 2011-06-14
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多