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 is the variations I m going back and forth with   1     lt section id  content  gt         lt h1 gt Heading lt  h1 gt         lt div id  primary  gt           Some text goes here           lt  div gt      lt  section gt    Can you use the section tag to act like a container   2     lt div id  content  gt         lt h1 gt Heading lt  h1 gt         lt section id  primary  gt            lt article gt               lt h2 gt Post Title lt  h2 gt               lt p gt Some text goes here    lt  p gt            lt  article gt         lt  section gt         lt section id  primary  gt            lt article gt               lt h2 gt Post Title lt  h2 gt               lt p gt Some text goes here    lt  p gt            lt  article gt         lt  section gt      lt  div gt    What is the correct method to use the  lt section gt  tag

User · Answer

You can definitely use the section tag as a container. It is there to group content in a more semantically significant way than with a div or as the html5 spec says:

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. http://www.w3.org/TR/html5/sections.html#the-section-element

User · Answer

In the W3 wiki page about structuring HTML5  it says       lt section gt   Used to either group different articles into different purposes or   subjects  or to define the different sections of a single article    And then displays an image that I cleaned up     It s also important to know how to use the  lt article gt  tag  from the same W3 link above        lt article gt  is related to  lt section gt   but is distinctly different    Whereas  lt section gt  is for grouping distinct sections of content or   functionality   lt article gt  is for containing related individual   standalone pieces of content  such as individual blog posts  videos    images or news items  Think of it this way - if you have a number of   items of content  each of which would be suitable for reading on their   own  and would make sense to syndicate as separate items in an RSS   feed  then  lt article gt  is suitable for marking them up       In our example   lt section id  main  gt  contains blog entries  Each blog   entry would be suitable for syndicating as an item in an RSS feed  and   would make sense when read on its own  out of context  therefore    lt article gt  is perfect for them     lt section id  main  gt       lt article gt         lt  -- first blog post -- gt       lt  article gt        lt article gt         lt  -- second blog post  -- gt       lt  article gt        lt article gt         lt  -- third blog post -- gt       lt  article gt   lt  section gt       Simple huh  Be aware though that you can also nest sections inside   articles  where it makes sense to do so  For example  if each one of   these blog posts has a consistent structure of distinct sections  then   you could put sections inside your articles as well  It could look   something like this     lt article gt     lt section id  introduction  gt     lt  section gt      lt section id  content  gt     lt  section gt      lt section id  summary  gt     lt  section gt   lt  article gt

User · Answer

that   s just wrong   is not a wrapper  The  element denotes a semantic section of your content to help construct a document outline  It should contain a heading  If you   re looking for a page wrapper element  for any flavour of HTML or XHTML   consider applying styles directly to the  element as described by Kroc Camen  If you still need an additional element for styling  use a   As Dr Mike explains  div isn   t dead  and if there   s nothing else more appropriate  it   s probably where you really want to apply your CSS   you can check this   http   html5doctor com avoiding-common-html5-mistakes

User · Answer

The correct method is  2  You used the section tag to define a section of your document  From the specs http   www w3 org TR html5 sections html      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

User · Answer

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  lt div gt  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    lt div id  content  gt     lt article gt        lt h2 gt How to use the section tag lt  h2 gt        lt section id  disclaimer  gt            lt h3 gt Disclaimer lt  h3 gt            lt p gt Don t take my word for it    lt  p gt        lt  section gt        lt section id  examples  gt          lt h3 gt Examples lt  h3 gt          lt p gt But here s how I would do it    lt  p gt        lt  section gt        lt section id  closing notes  gt          lt h3 gt Closing Notes lt  h3 gt          lt p gt Well that was fun  I wonder if the spec will change next week  lt  p gt        lt  section gt     lt  article gt   lt  div gt    Note that  lt div gt   being completely non-semantic  can be used anywhere in the document that the HTML spec allows it  but is not necessary

User · Answer

My understanding is that SECTION holds a section with a heading which is an important part of the  flow  of the page  not an aside   SECTIONs would be chapters  numbered parts of documents and so on   ARTICLE is for syndicated content -- e g  posts  news stories etc  ARTICLE and SECTION are completely separate -- you can have one without the other as they are very different use cases   Another thing about SECTION is that you shouldn t use it if your page has only the one section  Also  each section must have a heading  H1-6  HGROUP  HEADING   Headings are  scoped  withing the SECTION  so e g  if you use a H1 in the main page  outside a SECTION  and then a H1 inside the section  the latter will be treated as an H2   The examples in the spec are pretty good at time of writing   So in your first example would be correct if you had several sections of content which couldn t be described as ARTICLEs   With a minor point that you wouldn t need the  primary DIV unless you wanted it for a style hook - P tags would be better    The second example would be correct if you removed all the SECTION tags -- the data in that document would be articles  posts or something like this   SECTIONs should not be used as containers -- DIV is still the correct use for that  and any other custom box you might come up with

[html] How to correctly use "section" tag in HTML5?

Examples related to html