部分vs文章HTML5

Question

部分vs文章HTML5

我有一个由各种"部分"组成的页面,如视频,新闻源等.我有点困惑如何用HTML5表示这些.目前我将它们作为HTML5 <section>,但在进一步检查时,它看起来更正确的标签<article>.谁能为我解释一下这个问题？

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

干杯

编辑:我选择使用article标签,因为它似乎是不相关元素的容器标签,我想我的"部分"是.然而,实际的标记名称文章似乎颇具误导性,虽然他们说HTML5是在更加考虑Web 应用程序的情况下开发的,但我发现许多标记更加以博客为中心/基于文档.

无论如何,谢谢你的答案似乎是相当主观的.

Answer 1

Jus*_*tin 127

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

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

然后显示我清理的图像:

在此输入图像描述

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

<article>与...有关<section>,但明显不同.然而<section>,用于对不同的内容或功能部分进行分组,<article>用于包含相关的单独独立内容,例如个人博客帖子,视频,图像或新闻项目.可以这样考虑 - 如果你有许多内容项目,每个内容都适合自己阅读,并且在RSS提要中作为单独的项目进行联合是有意义的,那么<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>

Run Code Online (Sandbox Code Playgroud)

简单吧？请注意,您也可以在文章中嵌套部分,这样做是有意义的.例如,如果这些博客文章中的每一篇都具有不同部分的一致结构,那么您也可以在文章中放置部分.它可能看起来像这样:

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

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

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

Run Code Online (Sandbox Code Playgroud)

另外:<main>可用于在页眉和页脚之间包装元素(图像中的蓝色块).<figure>将图像包装在文章或部分中. (10认同)
很好.这应该是公认的答案.我同意你应该添加`main`的逻辑单元. (2认同)

Answer 2

ste*_*eax 120

听起来你应该在<article>标签中的标签和条目中包装每个"部分"(如你所说)<section>.

在HTML5规范说(部分):

section元素表示文档或应用程序的通用部分.在此上下文中,部分是内容的主题分组,通常带有标题.[...]

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

注意:鼓励作者使用article元素而不是section元素,因为联合元素的内容是有意义的.

而对于文章

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

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

更新:HTML 5.1article的最新编辑器草稿中的一些小文本更改(斜体更改):

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

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

在网上搜索时,我遇到了一份法律文件,上面写着"第1条第2款第3条".我希望这能帮助我记住逻辑. (15认同)
这是倒退.W3C明确指出`section`是内容的主题分组,`article`是一个独立的元素(即可以分组为主题).把它想象成一份报纸:你会在每个部分找到很多文章.例如,娱乐部分的电影评论文章. (6认同)
我在某种程度上不同意,但我也相信它们可以根据具体情况进行切换.阅读规范描述告诉我,如果`article`充当"小部件",它应该是另一种方式.`section`:"主题分组"和"文档部分".`article`:"自包含"和"小部件".考虑像http://codepen.io/anon/pen/iDEwf这样的主页示例 (3认同)
在这里同意@Chuck.在我的书中,这个答案完全倒退了.[贾斯汀的回答](http://stackoverflow.com/a/24764861/151509)更合适.但是哦,好吧,猜测规格留下了很大的解释空间.不确定这是不是坏事还是好事. (3认同)
他们为什么说**single*论坛帖子发表文章？如果没有线程的其余部分,论坛帖子就不完整了. (2认同)

Answer 3

jzm*_*jzm 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>

Run Code Online (Sandbox Code Playgroud)

正如您所看到的,这些部分仍然相互关联,但只要它们位于将它们组合在一起的块中.章节DONT必须在文章内.它们可以在文档的正文中,但是当整个文档是一篇文章时,我使用正文中的部分.

例如

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

Run Code Online (Sandbox Code Playgroud)

希望这是有道理的.