There is a trend amongst web developers towards using the HTML5 section element wherever and whenever possible. In the enthusiasm for all the other HTML5 structural elements, there is a growing tendency for the section element to be used whether it’s the right element for the job or not.
The section element is not a div
The HTML5 section element is not a replacement for a div. It’s easy to think it should be, because all the other structural elements that were introduced in HTML5 (header, footer, main etc.) replaced all the divs we used to use to denote those areas of a page.
The HTML5 specification is clear about this
“The
sectionelement is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use thedivelement instead.”
If you’re wondering why it makes a difference, the answer is semantics. The div is a semantically neutral element, the section element is not. The section element is exposed through the browser’s accessibility API, and that information is picked up by assistive technologies and communicated to users.
For example the Jaws screen reader announces “Region” each time it encounters the section element. It announces “Region” rather than “Section” because the section element maps to the role of region (and it’s the role that’s exposed via the accessibility APIs).
The section element is a thematic container
The section element is a container for content that has a related theme. The HTML5.0 specification has this to say:
“A section, in this context, is a thematic grouping of content, typically with a heading.”
At the time of writing the HTML 5.1 nightly specification provides even more clarity:
“The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1 – h6 element) as a descendant of the section element.”
The section element should have a heading
The heading is important. If you can’t think of a suitable heading for the content within a section element, there’s a good chance you shouldn’t be using the section element at all. Time to consider a div instead.
The heading is important for another reason. It can be used to increase the semantic information that’s available about the section element through the browser’s accessibility API.
Applying the aria-labelledby property to the section element and pairing it with the heading’s id attribute, enhances the information that’s available to assistive technologies.
<section aria-labelledby="sectionHeading"> <h2 id="sectionHeading">Weather report</h2> ... </section>
Now the name of the region is exposed via the accessibility APIs for ATs to use. For example, the Jaws screen reader would announce “Weather report region” if it were to encounter the section element shown above.
To keep your pages semantically clean, and user friendly for people using assistive technologies, keep these things in mind:
- Don’t use the
sectionelement if you just need a hook for styling or scripting. - Use the
sectionelement when your content has a theme. - Give your
sectionelement a heading and associate the two programmatically.
Comments
Do you interpret that to mean that a typical page should have a section for each header? For example, in this page you have a chunk of content with its own header: “The section element is a thematic container”. Following that is another chunk of content with its own header: “The section element should have a heading”. Should those chunks be styled as sections?
I think not, but I’ve seen people do that and would like to hear a solid rationale for why it should be one way or another.
@Pat L. I think it’s pretty clearly the other way around.
Funny : this page doesn’t seem to endorse it’s own semantic credo -no section or even article elements anywhere, only divs …
The blog uses landmark roles, headings (implied sections), list structures etc. There is more than one way to provide the semantics in HTML
@Pat L
“Do you interpret that to mean that a typical page should have a section for each header?”
No, I don’t think so. There are instances where a heading would be appropriate, but a section element would be too much. Like an online article broken up by headings for example.
I’m not sure I agree that “The section element should have a heading”; I use sections in my site (http://www.awardwinnersonly.com) for each book, movie, or recording, and what *appears* to be a header is the prize category, which is in a cite tag. I see no need for an h2 in my case.
The page you link to has approximately 380 sections and only 2 headings. It has virtually no document outline, check it yourself with a HTML5 outlining tool.
That’s exactly what I said – I don’t use headings, and see no use for them, in all my sections. If I can’t be convinced otherwise, I will consider changing them, but I doubt it. The “heading” is a cite tag, which I’m using for exactly its semantic meaning.
As the HTML spec says:
You can use HTML elements as you see fit, the HTML spec defines their intended use.
You might consider a section with a heading to represent the larger themes of your content, like books for example with a heading. Then use articles for each book within that themed section.
Then again your tone of you reply suggests that your not really looking for advice, so good day.
Hello
Could you in the light of the definition of the aside element:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
explain the diffence of usage between section and aside?
The way I read it now, is that when the content has a theme and is in anyway related to the surrounding content you should use the aside. when there is no relation with the surrounding content you should use the section. Is this correct to assume?
then the example given in the def of advertisement confuses me.
when the advertisement is related to the content e.g. google content related ads, you should use the aside.
but when you ads, but non content related ads e.g. word from your sponsor, you should use section?
the a different question about section.:
let’s say I have a simple lay-out:
header, two columns being: nav and main content and a footer.
Is it semantically correct if I use section as my main content area where the first descendant is an article with a h2 as it’s descendant?
thanks in advance for the reply
“If you’re wondering why it makes a difference, the answer is semantics.”
While I can’t really argue against any of the points in your article, I will say that it’s futile to expect web developers to adhere to the HTML5 spec if semantics is the only answer to this question.
We’ve had people arguing against using tables for years because it’s not semantically the right set of elements for page layouts… and so now we’re stuck in the land of infinite DIVs. The same goes for many other tags over the years.
My question to you: do think it’s realistic that the general HTML5 community abides by the spec? Or do you think it’s more likely they’ll continue to use elements improperly?
“Right” or “Wrong”, I’m simply glad that web developers are embracing HTML5 markup.
@B. Clay Shannon
If something “appears” to be a heading, there is probably a good case for it to be an actual heading. No?
@Arthur Kay
“My question to you: do think it’s realistic that the general HTML5 community abides by the spec? Or do you think it’s more likely they’ll continue to use elements improperly?”
A little of both I expect 🙂
There are a lot of good developers out there who take pride in their code, and they’re writing great semantic markup. There are a lot that don’t of course, but I think those that do are growing in number every day.
@Sean.
There’s a reason we have standards. It allows the developer, browser, and associated tools to work with each other without confusion. Using a section without a header is no different than using a fieldset without a legend because you like the outline it generates.
Your site provides a set of books. Each of these books has a title, category, thumbnail, and links to Amazon version. When you look at the actual data, you’ll realize the definition list would be a better choice. Further, you could add the hproduct microformat for full semantic markup.
The dt would be the book title. The other elements would be the dd that defines the book title. http://html5doctor.com/the-dl-element/
Our new website is being developed and it will be HTML5, I read this article with interest and I like the use of the aria-labelledby however as I add this onto my section element I now find I have
Contact
which seems a little over kill really when the screen reader will pick up and read the h1 or h2 tags anyway. The screen reader user can also jump around the page using the heading tags which follows the areas of content on the page – or am I missing something.
@Hatty
“…which seems a little over kill really when the screen reader will pick up and read the h1 or h2 tags anyway. The screen reader user can also jump around
the page using the heading tags which follows the areas of content on the page – or am I missing something.”
Not at all. Headings (when implemented well) provide an excellent way for screen reader users to drill down into content.
When you give the section element an accessible name, you effectively turn it into a landmark that’s tailored to your website. That in turn gives screen reader users a very easy way to get an overview of the page as a whole.
When a sighted person looks at a page they take in the header, footer, navigation, search area, and other groupings of content (such as you’d put in a section) at a glance. Landmarks give screen reader users a way to do something similar. Then, once you understand the page as a whole, other things like headings, lists and so forth make it possible to drill down into the content itself.
@Jos Gellisen
“The way I read it now, is that when the content has a theme and is in anyway related to the surrounding content you should use the aside. when there is
no relation with the surrounding content you should use the section. Is this correct to assume?”
A section is a grouping of content that shares a common theme. The aside contains content that is related to the main content, but does not nescessarily have anything in common other than that.
“…let’s say I have a simple lay-out:
header, two columns being: nav and main content and a footer.
Is it semantically correct if I use section as my main content area where the first descendant is an article with a h2 as it’s descendant?”
I’d use the main element as the container for the main content area of your page, not section. More on the main element in the HTML5.1 nightly:
http://tinyurl.com/ajj96xc
Thnx
I never heard of the main element, I’ll look into that.
That makes sense, I was confused about the way how people use section (like here: http://blog.paciellogroup.com/2013/10/using-html5-section-element/#comment-34050), but after that article I now realize how to make more structural page with section element. It also doesn’t matter if it have a heading or not (I mean for better semantics we can always hide heading in css, if it wasn’t in design :)).
Cheers
@Leonie
This is a nice description. I may reference this in the future.
I think I have a pretty good handle on this, but do you think the following is good practice? Multiple headings of same level within the section…so:
-section
-h2
-h2
-h2
Hi Dennis,
what you are doing in your example is the equivalent of:
heading
heading
heading
It is a little difficult to advise you on this code out of context, what I would suggest is you review the document outline of your code with and without the
sectionelement(s), if they both produce a logical document outline then it’s OK. You can check the outline using this version of the HTML5 outline bookmarklet.I rarely use sections but I have on one small one-page site, and when I read about the aria-labelledby it also sounded like doubling the info… but I suppose if someone wants to choose to skim the document by section rather than by heading, then it makes sense.
If the heading is too verbose or a related-string is being used for heading text (especially when someone uses “creative” headings), would it also make sense to use aria-label instead for those sections?
example (HTML tags without brackets cause I hate fighting all the character entity references, I always get some wrong)
section aria-label=”table semantics”
h2 ‘Semantics, Harry!’ /h2
… topic is about the semantics of tables, but has a cutsie heading which happens to not even mention tables here…
/section
?
Hi Leonie, newbie here learning HTML5.
I have a question on creating a container in the middle of the page with a border outline. I would normally use the div tags to do it in HTML and CSS.
Does the ‘Section’ tag outputs the same results as above? And would I use the CSS to style it?
The example here has the outline for the: top, header, content. and footer : http://pic.dhe.ibm.com/infocenter/rsahelp/v8/topic/com.ibm.etools.jsf.doc/images/jsfdojo/bordercontainer_design.jpg
If I wanted to code it correctly, would I be using ‘Section’ tag to create the container first in the middle and have the header, content, footer tag, etc, inside it? That is the goal I need to achieve.
I’m getting confuse with the basic layout for HTML5??
Would kindly appreciate your help.
Many thanks in advance
CHEERS 🙂
You can style a section element just as easily as a div. The question to ask, is what’s the purpose of the content inside the border?
If the content shares a theme or topic, then it’s ok to use the section element (just bear in mind the advice in this article). If the border is just a visual flourish, and the content inside shares no particular theme, then a div is the better option.
The trick with HTML is to keep it simple. Start with a simple header, footer and main structure, then add other elements as needed. Just keep in mind that you don’t have to use any of these elements just because you can.
HTH.
OK, thank you for you response. I am struggling to add a border to a single container with the content inside it?? What HTML tag would I be using?How would I also style this in CSS? I did some further studies and noticed the canvas tag was able to portray a square with a border. Do I use this or the ‘Section’ tag?
Example:
<div class="content"?
<div id="foooter"?
————
As you mentioned above, it depends if it is simple enough. My template is exactly simple enough with only a container with a border and aligning it to the center with the rest of the content inside.
How would I achieve the same results with HTML5?
Thanks again
Leonie! I think I figured it out.
So the basic HTML5 would look like this, right?
—
—
I did some adjustments with the CSS file.
Is this example below OK?
CSS code:
—
html
{background-color: #f7ede5; background-image: url(../images/th-01.jpg); background-repeat: no-repeat; background-position: center top;}
body
{margin: 0 auto; margin-top: 10px; position: relative; background-color:#fdfcfd; width:1020px; height:auto; border: 1px solid #e4b2c2;}
—
This works for me and now I have a container with a border outline and aligned to the middle of the page.
Not sure if it’s the most efficient but at least I got it going for now using HTML5 😉