It seems that the HTML 5 <section> tag doesn't really add much beyond a <div> tag. Why should I use it, especially as it will not be compatible with anything below IE9?

  • 4
    Voting to close. This is basic documentation and there are thousands of articles explaining why section versus article, div etc.
    – Su'
    Apr 27 '12 at 18:51
  • 1
    @Su' - the question appears to be on-topic (SEO) and specific enough to be practically answerable - and, if we closed every question that can be answered with a Google search, this site wouldn't turn up in Google searches; if you post your link to the documentation as an answer I know you'll get at least one upvote.
    – danlefree
    Apr 27 '12 at 19:27
  • @danlefree I disagree pretty much completely. But the votes will decide if it stays. If you want to discuss, start a thread in meta. No point hijacking the question.
    – Su'
    Apr 27 '12 at 19:44
  • 2
    did the OP did any research at all before this?
    – anonymous
    Apr 27 '12 at 20:13
  • 1
    @jack I think I'm getting a better feel for what you're really after, but could you go read this and this and edit your question with some more detail re: what bothers you about the tag? The problem is section is weird as far as where or even if you should use it("if article, aside or nav is more appropriate"). Frankly you can just not use it if you don't want to and nobody will really care. It adds some semantics and organization to the document, but you won't lose much of anything without it.
    – Su'
    Apr 27 '12 at 22:57

The HTML5 Living Standard describes a section as:

... a thematic grouping of content, typically with a heading ...

Consider an electronics product's page on an e-commerce site, for example, in which you list a product's "marketing-speak" description under one heading, a list of technical specifications under another heading, and a blurb about the manufacturer under yet another heading - each of those units of information could be considered a section of the document about the product.

You might be interested in using sections to help search engines and bots interpret these chunks of data as discrete logical entities with equivalent relation to the topic of the document, rather than as entities with relative relation to each other in order of appearance (as opposed to a story or expository essay).*

Because sections can effectively represent multiple themes with roughly-equivalent relevance to the document, it might make sense to use the section tag to organize panels on an interactive tabbed display (in which only one section displays at a time) - an unobtrusive Javascript could then scan documents for the section tag and, when it finds multiple sections, it could alter their CSS position and draw tabs to create the tabbed display.

* it is presumptuous on my part to state that search engines are presently analyzing content at this level, but I wouldn't be surprised in the least if Google were, and when you author an HTML document and put it on a public server, it's safe to say that it's going to be analyzed by algorithms well into the foreseeable future.

  • 1
    On the IE9 support point, there are utilities like html5shim that will trick older versions of IE into behaving with most of the newer HTML5 tags. (HTML5shim is about the minimum, but do a little reading about "browser polyfills" and find one you like if you need more than just tag support; it's a whole topic on its own.)
    – Su'
    Apr 27 '12 at 22:41
  • but why should I be interested in helping a search bot "understand" versus having a web page that "works"
    – Jack
    Apr 27 '12 at 22:43
  • In this case the most-likely unnoticeable boost in rankings and traffic you could receive by making your site more accessible to bots is probably less valuable than the potential impact to users... but eventually your IE8 users will upgrade - at which point helping search bots understand your content will give you a competitive advantage. (Which is why it pays to take an interest now - you're in the best position to determine when to prioritize search bots' needs over the dwindling number of users on an obsolete browser)
    – danlefree
    Apr 28 '12 at 7:24

The most important difference is that section plays a role in the outline of the document, div not.

Document 1:


Document 2:


Document 1 has this outline:

  1. foo (h1)
    1. bar (h2)

Document 2 has this outline:

  1. foo (h1)
    1. (unnamed section heading)
    2. bar (h2)
  • As per @danlefree's answer, and as mentioned here, the heading should perhaps go inside the section.
    – MrWhite
    Aug 11 '12 at 8:24
  • @w3d: Moving one of those two headings inside the section would, of course, change the outline and thereby the semantics of the document (I deliberately chose this structure so that these two examples are the same except for div vs. section). So you'd want to (and should, but not must) add a heading inside the section. The outline structure would not change but the "unnamed section heading" would have a name (that of the first heading in the section, no matter which level).
    – unor
    Aug 11 '12 at 12:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.