我正在尝试用HTML5构建一个布局,在阅读了几篇不同的文章后,我感到很困惑。我正在尝试获得一些关于如何使用它的输入。
下面是我反复使用的变体:
1)
<section id="content">
<h1>Heading</h1>
<div id="primary">
Some text goes here...
</div>
</section>
你能像容器一样使用区段标记吗?
2)
<div id="content">
<h1>Heading</h1>
<section id="primary">
<article>
<h2>Post Title</h2>
<p>Some text goes here...</p>
</article>
</section>
<section id="primary">
<article>
<h2>Post Title</h2>
<p>Some text goes here...</p>
</article>
</section>
</div>
使用 <section>
标记的正确方法是什么?
发布于 2011-08-25 06:42:14
答案就在当前的规范中:
部分元素表示文档或应用程序的通用部分。在此上下文中,节是内容的主题分组,通常带有标题。
章节的例子可以是章节、选项卡式对话框中的各种选项卡式页面或论文的编号章节。网站的主页可以分为介绍、新闻条目和联系信息等部分。
如果将元素的内容联合起来更有意义,则鼓励作者使用元素而不是元素。
节元素不是通用容器元素。当需要某个元素来设置样式或方便编写脚本时,鼓励作者改用div元素。一般规则是,只有当元素的内容在文档的大纲中显式列出时,元素才适用。
参考资料:
另请参阅:
这个元素的用途似乎有很多混淆之处,但有一点是一致同意的,那就是它是,而不是像<div>
那样的泛型包装器。它应该用于语义目的,而不是CSS或JavaScript挂钩(尽管它当然可以是样式或“脚本化”)。
根据我的理解,一个更好的例子可能是这样的:
<div id="content">
<article>
<h2>How to use the section tag</h2>
<section id="disclaimer">
<h3>Disclaimer</h3>
<p>Don't take my word for it...</p>
</section>
<section id="examples">
<h3>Examples</h3>
<p>But here's how I would do it...</p>
</section>
<section id="closing_notes">
<h3>Closing Notes</h3>
<p>Well that was fun. I wonder if the spec will change next week?</p>
</section>
</article>
</div>
请注意,<div>
是完全非语义的,可以在HTML规范允许的文档中的任何地方使用,但不是必需的。
发布于 2014-01-03 02:22:37
在W3 wiki page about structuring HTML5中,它说:
<section>
:用于将不同的文章分组到不同的目的或主题中,或者定义单个文章的不同部分。
a用于将不同的文章分为不同的目的或主题,或者定义单个文章的不同部分。
然后显示我清理的an image:
了解如何使用<article>
标记(来自上面的相同W3链接)也很重要:
<article>
与<section>
相关,但又截然不同。<section>
用于对内容或功能的不同部分进行分组,而<article>
用于包含相关的独立内容片段,例如单个博客帖子、视频、图像或新闻项目。这样想一想--如果你有一系列的内容,每一项都适合自己阅读,并且在RSS feed中联合成单独的项是有意义的,那么<article>
就适合标记它们。
在我们的示例中,<section id="main">
包含博客条目。每个博客条目都适合作为RSS feed中的一个项目,并且在独立阅读时也很有意义,因此<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>
发布于 2012-03-02 21:51:37
我的理解是,部分包含一个标题的部分,这是页面“流”的重要部分(而不是旁注)。章节可以是章节、文档的编号部分等等。
文章是针对辛迪加内容的--例如帖子,新闻故事等。文章和版块是完全分开的--你可以有一个而不是另一个,因为它们是非常不同的用例。
关于节的另一件事是,如果你的页面只有一个节,你就不应该使用它。此外,每个部分必须有一个标题(H1-6,HGROUP,标题)。标题与节一起“限定范围”,因此,例如,如果您在主页(节外)中使用H1,然后在节中使用H1,则后者将被视为H2。
在编写本文时,the spec中的示例已经相当不错了。
因此,在您的第一个示例中,如果您有几个不能被描述为文章的内容部分,那么将是正确的。(有一个小问题,你不需要#primary DIV,除非你想把它作为一个样式钩子--P标签会更好)。
如果您删除了所有的节标记,那么第二个示例将是正确的--该文档中的数据将是文章、帖子或类似的内容。
节不应该用作容器-- DIV仍然是它的正确用法,以及您可能想出的任何其他定制框。
https://stackoverflow.com/questions/7183132
复制相似问题