Mobile app version of vmapp.org
Login or Join
Hamaas447

: What is the purpose of the section tag 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

@Hamaas447

Posted in: #Html5 #Section

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?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Hamaas447

2 Comments

Sorted by latest first Latest Oldest Best

 

@Ann8826881

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:


foo (h1)

bar (h2)



Document 2 has this outline:


foo (h1)

(unnamed section heading)
bar (h2)

10% popularity Vote Up Vote Down


 

@Angie530

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme