HTML5 Section tag

[tobeeornot]

Is it semantically correct to indicate a new section in your markup simply by using a ‘section’ tag instead of a div or does a section specifically need to be contained within an ‘article’?

[wolfcry911]

Yes, it is semantically correct to use a section element outside of an article. Sections may be part of articles and articles may be part of sections.

[tobeeornot]

So in that sense it can replace a normal div?

[Taufik Nurrohman]

I saw the site html5doctor, section‘s are used just like fragment identifiers.
For example:

Section title 1


Section title 2


Section title 3

[tobeeornot]

thanks very much!

[Paulie_D]

A ‘section’ element should not be used as a general substitute for a div however. The idea is that a section is a piece (or even a whole group of similar pieces) of content that are “different” from the content next to or around them.

If you have two elements containing ‘news’ then then you should use divs. If you have content for ‘news’ and another for ‘reviews’ then a ‘section’ would be appropriate. That’s not to say that you can’t put divs inside the sections if you want.

A section element by itself does nothing but it does make it an easy way to tell one …ahem…section of your content from another IF you view the code, otherwise you might as well use a div.

HTML5 Doctor, having being referenced says

“Represents a generic document or application section. In this context, a section is a thematic grouping of content, typically with a header, possibly with a footer. Examples include chapters in a book, 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, contact information.”

and

“With very few exceptions, section should not be used if there is no natural heading for it. “

[tobeeornot]

That’s superb @Paulie_D. Thank you!

[joshuanhibbert]

Another way to view it: if it makes sense to add a heading, then you are probably safe using section.

Also, I use this all the time, and you might find it useful too: http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf

[Author]

Posts