Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 2 down vote favorite
1

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?

share|improve this question
3  
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? – slow diver 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
show 3 more comments

2 Answers

up vote 4 down vote accepted

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.

share|improve this answer
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
Great answer, thanks. – Jack Apr 28 '12 at 8:19
up vote 0 down vote

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

Document 1:

<body>
 <h1>foo</h1>
 <div>…</div>
 <h2>bar</h2>
</body>

Document 2:

<body>
 <h1>foo</h1>
 <section>…</section>
 <h2>bar</h2>
</body>

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)
share|improve this answer
As per @danlefree's answer, and as mentioned here, the heading should perhaps go inside the section. – w3d 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

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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