嵌套HTML5版块标签 [英] Nesting HTML5 section tags

问题描述

这是使用< section> 标记的正确方法吗？

 < section id =container> 
< section id =outer> 
< section id =inner> 
< / section> 
< / section> 
< / section> 
  

我试着弄清楚我是否应该只使用一个部分ID，如果你只是使用这些元素来放置某些位置/样式的东西，那么，如果你只是使用这些元素放置某些位置/样式的东西，那么，你应该使用div。

段实际上是将属于一起的内容分组 - 你不应该有一个没有标题（H1或类似）元素的段该部分包含的内容......我认为过去有些人犯了类似的错误：

http://html5doctor.com/the-section-element/

来自规范：

注意： section元素不是通用的容器元素。当需要
元素进行样式设计或作为
脚本编写的便利时，鼓励作者改为使用div元素。
的一般规则是，section元素只有在
元素的内容将在文档的
大纲中明确列出时才适用。

话虽如此，嵌套部分元素是完全可以接受的。可能类似于：

 < section> 
< h1> Portishead< / h1> 
< p> Portishead是来自Bristol< / p> 
< section> 
< h1> Dummy（专辑）< / h1> 
< p>一些信息....< / p> 
< img src =.../> 
< / section> 
< section> 
< h1> Portishead（专辑）< / h1> 
< p>其他一些信息信息....< / p> 
< img src =.../> 
< / section> 
< / section> 
  

Is this a correct way to use the <section> tag?

<section id="container">
   <section id="outer">
      <section id="inner">
      </section>
   </section>
</section>

I'm trying to work out whether or not I should use only one section id, and leave the other two sections as just divs?

解决方案

If you are just using these elements to place things in some position / style things, then you should probably be using divs.

Section is really for grouping content that belongs together - you shouldn't really have a section without a title (H1 or similar) element describing what the section contains... a few people have made similar mistakes in the past I think:

http://html5doctor.com/the-section-element/

From the spec:

NOTE: The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

Having said that, it's perfectly acceptable to nest section elements. Maybe something like:

<section>
    <h1>Portishead</h1>
    <p>Portishead are a cool band from Bristol</p>
    <section>
        <h1>Dummy (album)</h1>
        <p>some info....</p>
        <img src="..." />
    </section>
    <section>
        <h1>Portishead (album)</h1>
        <p>some other info info....</p>
        <img src="..." />
    </section>
</section>

这篇关于嵌套HTML5版块标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！