Much like the article element, there's a good deal of confusion around when it's
appropriate to use the section element.
Let's take a closer look at the semantic meaning behind the tag, and
when it should be used when structuring and formatting your content.
So again, I'm in the W3C's HTML file specification.
This time, I've navigated to the Section Element category, and
what I want to do real quick, I'm going to scroll down here, so that I can
see the description a little bit better, and some of the notes surrounding it.
So let's take a look at the description of the section element.
It represents a generic section of a document or application.
A section in this context is, and this is important, a thematic grouping of content.
The theme of each section should be identified typically by
including a heading as a child of the section element, right inside
the section element there'll be a heading to sort of title that particular section.
Examples of sections would be chapters, various tab pages, and
a tab dialog box or the numbered sections of a thesis.
A website's home page could be split into sections for
things like introduction, news items, contact information, that sort of things.
Now, look at the notes below this.
Authors are encouraged to use the article element instead of the section element
when it would make sense to syndicate the contents of the elements.
So again, if it can stand alone, if it can be published on its own,
probably should be an article, not a section.
However, the note below that gets a little bit more specific about when it
should be used.
The section element is not a generic container element.
Now I know what it says.
It says above that it represents a generic section of a document.
When people write specifications, sometimes they get vague.
It is not a generic container.
When an element is needed only for styling purposes or as a convenience for
scripting, things like JavaScript, authors are encouraged to use the div element,
which we'll talk about in just a little bit.
So a general rule is that the section element is appropriate only if
the elements contents would be listed explicitly in the documents outline and
that's where it reaches the sweet spot.
When you have content that needs to be listed in the document outline but
it doesn't meet the standard of being syndicated or pushed apart by itself,
then that's when the section element is probably appropriate.
So let's go back to formatting our structure page by adding sections to
the document.
Now a preview of this in the browser,
as I start to go through this, sections begin to sort of jump out at me.
For example conveying meaning through structure, sectioning elements,
document outlines, maybe that W3C warning, the WAI-ARIA Roles section.
So those all look like individual sections within sort of
this parent article that we have.
Now that's not always the dynamic you're going to have.
A lot of times, you might have a section and have an article inside of it.
So just because we’re going to structure the pages this way doesn't mean that
you’re always going to have an article that contains sections.
Sometimes it’s the other way around.
All right, I’m going to go back into my code.
In this case we're working on the structured .htm from the 04_05 directory.
And what I'm going to do, as I scroll down inside the article I'm
going to find each of these sections that start with an h3 and
I'm going to wrap that in a section tag.
Now remember for section you are going to have the opening and closing tags.
Be very careful of where you place these.
I'm going to open them right before the h3's and
I'm, of course going to close them before the next h3.
And they need to enclose everything inside of them.
So every time I see an h3 I know that that's a new section.
There's document outlines so
I need to close the previous section, and then open up another one.
Now as I scroll down, I see that one of the h3s has an h4 inside of it.
We’ll come back to that in just a moment.
And we should have one more main section and that is the WAI-ARIA roles, and
of course I have to close the last section prior to the closing of
the article because they’re all contained within it.
So now I have four sections in this article, all denoted by those h3s.
That leads me to go back up to the h4 and really consider this.
Should this be its own section?
We know that it's going to show up in the document outline,
because it has a heading.
So that lends itself to saying yes, it probably should be a heading.
But if we think about what this is,
if I scroll up I can see that the section's talking about document outlines,
and this smaller section inside of it is talking about a warning that
the W3C has on a new specification about the HTML5 outlining algorithm.
So when I look at this it could be a section, but
there's actually another element out there that makes more sense semantically to use.
So we'll hold off on that, and
we're going to cover that element in just a moment.
So as you can see, personal judgement does come into play when
deciding when it's appropriate to use the article and section elements.
While it's certainly okay to use them in whatever manner you see fit,
I want to make sure that any strategy you develop around these two
elements is based solidly on the semantic reasoning behind using them.
They do convey meaning.
So it's important that that meaning is consistent across all the pages in
your site