如何正确使用“部分”标签在HTML5中？ [英] How to correctly use "section" tag in HTML5?

问题描述

我试图在HTML5中构建一个布局，阅读了几篇不同的文章后，我只是感到困惑。

以下是我前后的变化形式：

1）

 < section id =content> 
< h1>标题< / h1> 
< div id =primary> 
一些文字在这里... 
< / div> 
< / section> 
  

您可以使用section标签来像容器一样吗？

<2>

 < div id =content> 
< h1>标题< / h1> 
< section id =primary> 
<文章> 
< h2>帖子标题< / h2> 
< p>一些文字在这里...< / p> 
< / article> 
< / section> 
< section id =primary> 
< article> 
< h2>帖子标题< / h2> 
< p>一些文字在这里...< / p> 
< / article> 
< / section> 
< / div> 
  

正确的方法是使用< section>



section元素表示文档或
应用程序的通用部分。在这种情况下，部分是
内容的主题分组，通常带有一个标题。

章节的示例可以是章节，各种标签页
选项卡式对话框或论文的编号部分。一个网站的
主页可以分成几个部分进行介绍，新闻
项目和联系信息。

鼓励作者使用文章元素而不是
section元素时，可以合并
元素的内容

。

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

参考：



• http://www.w3.org/TR/html5/sections.html#the-section-element


• http：// www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element
  

另见：

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


• http://www.impressivewebs.com/html5-section/

看起来好像有很多混乱关于这个元素的宗旨，但是这商定的一件事是，它是的不一个通用的包装，如< DIV> 是。它应该用于语义目的，而不是CSS或JavaScript钩子（尽管它可以 em>风格化或脚本化）。

根据我的理解，更好的例子可能如下所示：

 < div id =content> 
<文章> 
< h2>如何使用栏目标签< / h2> 
< section id =disclaimer> 
< h3>免责声明< / h3> 
< p>不要拿我的话来说......< / p> 
< / section> 
< section id =examples> 
< h3>例子< / h3> 
< p>但是，我可以这样做......< / p> 
< / section> 
< section id =closing_notes> 
< h3>结束笔记< / h3> 
< p>那很好玩。我想知道规范下周是否会改变？< / p> 
< / section> 
< / article> 
< / div> 
  

请注意< div> ，存在完全非语义的，可以在HTML规范允许的文档中的任何地方使用，但不是必需的。

I'm trying to build a layout in HTML5 and after reading several different articles I'm just confused. I'm trying to get some input on how it should be used.

Below is the variations I'm going back and forth with:

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

Can you use the section tag to act like a container?

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>

What is the correct method to use the <section> tag?

解决方案

The answer is in the current spec:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

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.

Reference:

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

Also see:

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

It looks like there's been a lot of confusion about this element's purpose, but the one thing that's agreed upon is that it is not a generic wrapper, like <div> is. It should be used for semantic purposes, and not a CSS or JavaScript hook (although it certainly can be styled or "scripted").

A better example, from my understanding, might look something like this:

<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>

Note that <div>, being completely non-semantic, can be used anywhere in the document that the HTML spec allows it, but is not necessary.

这篇关于如何正确使用“部分”标签在HTML5中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！