部分与文章HTML5


201

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

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

干杯

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

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


5
没关系。使用对您有意义的任何东西。我个人使用section
伊利亚Choly

@illia choly:我同意你的看法,没有真正的对与错。
Shirgill Farhan 2015年

1
使用示例MDN进行的
简洁

Answers:


143

有关构造HTML5W3 Wiki页面中,它说:

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

然后显示我清理的图像

在此处输入图片说明

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

<article>与相关<section>,但有明显不同。而<section>用于对内容或功能的不同部分进行分组,<article>则用于包含相关的独立内容,例如独立的博客文章,视频,图像或新闻项目。可以这样考虑-如果您有很多内容项,每个内容都适合自己阅读,并且可以在RSS feed中作为单独的项目联合<article>在一起,那么就适合对其进行标记。

在我们的示例中,<section id="main">包含博客条目。每个博客条目都适合于作为RSS提要中的项目进行联合,并且在脱离上下文的情况下单独阅读时很有意义,因此 <article>非常适合它们:

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

13
另外:<main>可用于在页眉和页脚之间包装元素(图像中的蓝色块)。<figure>将图像包装在文章或部分中。
逻辑单元

2
很好。这应该是公认的答案。我同意您应该添加的逻辑单元main
Chuck Le Butt 2015年

1
您应该使用文章中的部分更新图片。
K-SO的毒性在增加。

由于混乱,我觉得文章和版块之间的这场战争现在将会进行。但是Justin Im 100%会使用您的文章上的章节作为章节,适用于文档中独立的独立内容(如文档所示)中的文档的某些部分(如您所示)。从语义上讲,“部分”一词在任何情况下都可以替代旧的div部分,因此更有意义。做得好!
斯托克利

1
如果您需要比<section>更具体的内容,也可以在<article>中使用<header>和<footer>
Ric

130

听起来您应该将每个“部分”(如您所说的那样)包装在<article>标签中,并将文章中的条目包装在<section>标签中。

HTML5规范说(部分):

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

部分的示例包括章节,选项卡式对话框中的各种选项卡式页面或论文的编号部分。网站的主页可以分为几个部分,以进行介绍,新闻和联系信息。

注意:在合理的情况下,鼓励作者使用article元素而不是section元素来联合该元素的内容。

对于文章

文章元素表示文档,页面,应用程序或站点中的独立组成,并且原则上独立地可分发或可重用,例如在联合组织中。这可能是论坛帖子,杂志或报纸文章,博客条目,用户提交的评论,交互式小部件或小工具,或任何其他独立的内容。

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

更新:对于一些小的文本更改article最新的编辑起草HTML 5.1(以斜体字的变化):

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

此外,关于公共HTML邮件列表上的讨论article一月二月的2013。


17
在网上搜索时,我遇到了一份法律文件,内容为Article 1, Section 2, Clause 3。我希望这能帮助我记住逻辑。
13年

3
我在某种程度上不同意,但我也相信可以根据上下文进行切换。阅读规范说明对我来说,如果article行为充当“小部件” ,则应该相反。section:“主题分组”和“文档部分”。article:“独立”和“小部件”。考虑一个像codepen.io/anon/pen/iDEwf
daleyjem,2014年

2
为什么他们说,一个单一的论坛帖子,使文章?没有其余的主题恕我直言,论坛帖子是不完整的。
masterxilo 2014年

7
这是倒退。W3C明确声明这section是内容的主题分组,并且article是独立的元素(即可以分组为主题)。就像报纸一样:在每个部分中都会找到许多文章。例如,娱乐部分的电影评论文章。
Chuck Le Butt

3
在这里同意@Chuck。在我的书中,这个答案完全倒退了。贾斯汀的答案更合适。但是,哦,猜想该规范还有很多解释的余地​​。不知道这是好事还是坏事。
maryisdead 2015年

39

我将使用<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>

如您所见,这些部分仍然彼此相关,但是只要它们在对它们进行分组的块内即可。部分“不要”必须在文章内部。它们可以在文档的正文中,但是当整个文档为一篇文章时,我在正文中使用节。

例如

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

希望这是有道理的。


5
I'd use <article> for a text block that is totally unrelated to the other blocks on the page.我知道您是在2011年写的,但是,这不是<aside>标签的目的吗?
MyDaftQuestions 2015年

19

我喜欢坚持使用所用单词的标准含义:“ An” article适用于文章。我将博客文章,文档和新闻文章定义为articles。另一方面,部分将引用layout / ux项:侧栏,页眉,页脚将是部分。但是,这都是我自己的个人解释-正如您所指出的那样,这些元素的规范没有很好地定义。

为了支持这一点,w3carticle元素定义为可以独立站立的一部分内容。博客文章可以自己作为有价值的消耗性内容。但是,标题不会。

是一篇有趣的文章,关于一个人试图区分这两种新元素的疯狂。我也认为本文是正确的,它的基本要点是尝试使用您认为最能实际代表该内容的元素。

更有问题的是,文章和版块是如此相似。将它们分开的唯一词是“自包含”。如果有一些严格的规则,那么决定使用哪个元素将很容易。相反,这是一个解释问题。您可以在一个节中包含多个文章,可以在和文章中包含多个节,可以在节中嵌套节,而在节中嵌套文章。在任何给定情况下,由您决定哪个元素在语义上最合适。

是关于同一问题的很好的答案


8

下面的流程图在选择各种语义HTML5元素之一时可能会有所帮助: 在此处输入图片说明


5

部分

  • 使用它来定义布局的一部分。这可能是midleftright ,等。
  • 简而言之,它与其他元素有联系,这取决于它。

文章

  • 当您拥有独立的内容时,请使用此功能。

  • 文章有其完整的含义。


3

节基本上是h1(或其他h标签)的包装,以及与此对应的内容。An article本质上是重复或分页的文档中的文档...就像文档上的每个博客帖子都可以是文章,或者文档上的每个注释都可以是文章。


1

同样,对于联合内容,“在合理的情况下,鼓励作者使用article元素而不是section元素来联合该元素的内容。”


0

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

因此,部分就像是存放文章的div容器。


-2

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

文章和本节均应包含标题元素h2-h6。

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

<article>
         <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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.