How to correctly use “section” tag in HTML5?

Question

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

Answer 1

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

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:

  

     
How to use the section tag
     

         
Disclaimer
         
Don't take my word for it...
     
     

       
Examples
       
But here's how I would do it...
     
     

       
Closing Notes
       
Well that was fun. I wonder if the spec will change next week?
     
  

Note that

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

0 讨论(0)

查看其它6个回答

发布评论:

提交评论

---

•  加载中...