Grow your CSS skills. Land your dream job.

HTML5 Section tag

  • # May 29, 2012 at 7:31 am

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

    # May 29, 2012 at 7:56 am

    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.

    # May 29, 2012 at 8:00 am

    So in that sense it can replace a normal div?

    # May 29, 2012 at 9:21 am

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





    # May 29, 2012 at 9:31 am

    thanks very much!

    # May 29, 2012 at 10:04 am

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

    # May 29, 2012 at 10:10 am

    That’s superb @Paulie_D. Thank you!

    # May 29, 2012 at 6:38 pm

    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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".