首页 > 代码库 > <section>标签的妙用之处
<section>标签的妙用之处
<section>标签的用法
，有一个网友评论问<section> 的用法。所以现在举例来说明一下：
html5引入了<section>标签，用于描述文档的结构，它同<div>标签的意思一样。但是在特定环境中，两者又有明显的区别。
w3对<section>的定义是：定义一个文档的章节(可以拥有自己的<header>和<footer>)。
w3对<div>的定义是: 定义一个文档的章节。（但似乎更适合用于外层的布局，缺少语义性。）
比如看一个案例：
<body>
<header></header>
<div id=“content”>
<section></section>
<section></section>
</div>
<footer></footer>
</body>
在这里，我用<section>来定义id为content的div里面的两个章节/区域。当然此处你也可以直接把div用section代替，或者把里面的<section>改成<div>,因为此处还不能明显的区分两者的区别:
<section id=”content”>
<section></section>
<section></section>
</section>
或者：
<div id=”content”>
<div></div>
<div></div>
</div>
我们继续举例分析另外一个更明显的区分<section>和<div>的案例：
<div id=”team”>
<nav>
<ul>
<li>member1</li>
<li>member2</li>
<li>member3</li>
</ul>
</nav>
<section id=”member1”>
<article>
<header><h1>member1</h1></header>
<p>一个描述的段落</p>
<p>另一个描述的段落</p>
<section>
<p>这里的描述段落在语义上于<section>外层的段落不是兄弟级别。</p>
<p>这里的描述段落在语义上于<section>外层的段落不是兄弟级别。</p>
</section>
<p>又是另外一个段落描述，于最上面的两个段落属于兄弟级。</p>
</article>
</section>
<section id=”member2”>
<article>
<header><h1>member2</h1></header>
<p>一个描述的段落</p>
<p>另一个描述的段落</p>
<section>
<header><h1>这个<section>有分节的小标题，这里是这个分节的小标题</h1></header>
<p>这里的描述段落在语义上于<section>外层的段落不是兄弟级别。</p>
<p>这里的描述段落在语义上于<section>外层的段落不是兄弟级别。</p>
</section>
<p>又是另外一个段落描述，于最上面的两个段落属于兄弟级。</p>
</article>
</section>
<section id=”member3”>
<article>
<header><h1>member3</h1></header>
<p>一个描述的段落</p>
<p>另一个描述的段落</p>
<section>
<header><h1>这里是这个分节的小标题</h1></header>
<p>这里的描述段落在语义上于<section>外层的段落不是兄弟级别。</p>
<p>这里的描述段落在语义上于<section>外层的段落不是兄弟级别。</p>
<footer>这里的内容对于这个<section>是一个脚部，它区别于上面的描述段落。</footer>
</section>
<p>又是另外一个段落描述，于最上面的两个段落属于兄弟级。</p>
</article>
</section>
</div>
在这个案例当中，我们用<div>标签来布局整个最外层的章，而用<section>用来定义内部的章节。当然如果把整个文档都看作是一个章节，那么也可以用<section>来代替<div>，但是建议不要使用<section>来代替该用<div>布局的地方，那些地方不能体现出<section> 的语义性。
在上面的<div id=”team”>中，有一个导航，用<nav>元素，
除了<nav>之外，就是属于这个<div id=”team”>的区域内的具体的章节，我们就用<section>来定义，你可以看到，用<section>来定义一个章节，而这个章节的内部又都是一个<article> ，它是关于一个member的具体的文章。而在这个<article>的内部，可能我们会发现，有时候这个文章的结构又会有嵌套的关系，那么这个被嵌套的区域我们就可以用<section>来表示这整个文章内的又一个分节。显然，在这里用<div>标签的话，语义上来说就很不适合了。
<section>标签的妙用之处