这种情况的正确html5元素是什么?

时间:2013-01-18 10:11:32

标签: html html5

我是html的新手,所以对新的html5元素进行了一些努力。

我有两种情况,我无法决定是否应该使用articlesection

场景1:

我有一个主页,其中包含许多不同的部分(我不一定是指html部分)。举一个例子,主页的1部分包含使用我的公司/网站的原因 - 它还有一个header

这会显示在主页上,但也会显示在侧栏中的许多其他页面上。如果我理解正确,这将属于article,但我不完全确定。

场景2:

我有一个常见问题页面。每个问题都有一个答案,并且可以将一些问题分组到特定主题下。

那么,每个主题是section,每个问题/答案是article吗?这个问题的问题是header吗?

非常感谢任何帮助和建议。

4 个答案:

答案 0 :(得分:1)

章节标记

标签定义文档中的部分。例如章节,页眉,页脚或文档的任何其他部分。

文章标记

标签指定独立的自包含内容。

文章本身应该有意义,应该可以独立于网站的其他部分分发。

元素的潜在来源:

  • 论坛帖子
  • 博客文章
  • 新闻报道
  • 注释

一般性评论

您使用的内容仍然完全取决于您。但是,您必须记住,并非所有浏览器都支持HTML5中包含的所有标记。例如,该标记适用于所有最近的浏览器(Firefox,Chrome,Safari,Opera和IE9)。许多人仍然使用旧版本的Internet Explorer(IE8或IE7或IE6),这意味着这些旧版浏览器不会知道这个标签。

这并不是那么糟糕,因为总有一个解决方案可以让它在所有浏览器中运行,例如你可以使用html5shiv脚本。

不知道HTML5中的标记或任何其他标记的浏览器将它们视为普通的内联元素。所以你应该包括以下css规则:

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

希望这有点帮助: - )

答案 1 :(得分:0)

对于常见问题解答,我建议对每个主题(包括标题)使用section每个问题和一个或多个答案的每个问题和{1}}的说明列表dl包裹在它自己的dt中。您也可以省略dd并使用嵌套的描述列表。

从规范来看,section的使用在这里没有意义。考虑博客文章等用例的article元素。

我不明白你的第一个场景。

答案 2 :(得分:0)

一般来说,article用于不需要额外上下文的自包含文档。 section是页面的一部分,在该页面之外没有任何意义。

在您的主页上,看起来您的部分很可能是html部分。在您的其他页面中,您可能也希望将它们作为部分,而不是文章。如果它们只是小项目,您可能只想将它们包装在侧边栏中的div中,而不是给它们任何特定的语义含义。

在您的常见问题解答页面上,我会说每个问题/答案都是article(例如,您可以将它们视为RSS Feed中的单独文章)。这些主题实际上不是articlesection,我认为它们不需要任何特定的语义含义,因此您可以将它们分组为div进行布局。问题不是文章的标题,标题用于可能包含导航等的页眉。您的问题可能只是一个头* ing *(h1 / {{ 1}} / h2等)。

不要通过尝试将任何块元素放入节或文章中来过度使用html5元素,只有在存在真正的语义目的时才使用它们。页面布局应该只用好的旧h3来完成。

有一篇很好的文章更深入地解释了这些差异over here

答案 3 :(得分:0)

通常section应该是article的子节点。

W3C standard说(我强调):

  

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

因此,如果将文本发布到其他地方而不给它任何上下文是有意义的,那么你会把它作为一篇文章。

场景1 当文本显示在您网站的不同页面上时,它似乎符合这一条件。

场景2 通常,每个FAQ问题/答案对都是关于一个单独的主题,并且它本身是有意义的,因此它们将是一篇文章。但是,如果你的问题的结构只有在一个接一个地阅读它们时才有意义,你就可以将它们作为一部分。

顺便说一下:这个答案将是一个部分,因为没有阅读你的问题就没有意义。他们将共同组成一篇文章。