Of all the elements introduced in HTML5, the article and
section elements are probably the most confusing to authors.
You know, to most people, these elements seem very similar and
there's a lot of confusion even among people that have been authoring HTML for
a long time around when to use one over another.
So, don't be surprised, as a new web designer,
if you're a little confused about them as well.
Well, in many cases, it's really just a judgement call as to which one to use.
So, in this exercise, I want to take a closer look at the article element and
when it's appropriate to use.
So, here I am again in the W3C's HTML5 specification.
This time, I focused on the article element and
I just want to scroll down here to the description.
Now, pay real close attention to this.
It's a little vague.
The article element represents a complete self-contained composition in a document,
page, application or site.
And that is, in principle, independently distributable or reusable.
These could be things like forum posts, magazine or newspaper articles,
blog entries, user-submitted comments, interactive widgets, and the list goes on.
Now, that pretty much describes a lot of content in HTML, so
it seems kind of vague and it is kind of vague, to be honest with you, and
I think a lot of the confusion comes with the term article.
We tend to think of an article as something that's written, for
example, in blogs and magazines and things like this.
So, the best way to think of articles, I've found,
is like an article of clothing, a separate article like a shirt or a pants or
shorts or socks, individual elements that can stand alone.
And to me, that is the most important part about articles.
When they describe articles here, they're talking about standalone items that if
they were removed from the other content, would still make sense.
So, things that you could syndicate, things that you could set apart.
For me, that's one of the deciding factors about what is and
what is not an article in terms of structuring pages.
Now, it goes on to talk about things like nesting articles.
If you nest one article inside of another one,
the nested articles need to be related to the main article.
And it also mentions, I'm going to scroll down a little bit here.
When it's the main content of the page,
you don't have to use both the main element,
which we'll talk about a little bit later, and the article element, but that you can.
I would also like to point out that the main element does not create a section in
the outline, but article does,
which is why I usually use both of them if I'm going to use them.
Now, directly after that we get code examples of different ways to
use the article.
I'd recommend that you spend some time looking at not only the specification and
how it codes it, but also some of the reference sites that I'm going to give you
after the course in terms of how they work with the article element as well.
For our purposes, we're going to go back into that structure.htm.
This time, in the 04_04 directory.
And if I preview this in the browser, and when I start looking at
the different pieces of this, we have the headline, HTML Essential Training,
we have the name of the page, Structuring Pages, we have the site navigation.
Then we have some content and the content is broken up into sections,
Conveying meaning through structure, Sectioning elements, Document outlines,
W3C Warning, WAI-ARIA Roles, and then some copyright information.
When I think about which of these things can stand separately by themselves,
none of it really jumps out to me that, set apart by itself, this is syndicatable.
You could make the argument that each one of these sections is an individual thing
and can be separated, and
there are a lot of people out there that do things like that.
They would put each of these sections within an article tag.
I tend to think, however, that probably the page content itself could be
syndicated or separated or put apart if you wanted to.
So I would probably use an article to structure that content, but again,
that would be a judgement call.
So, what I'm going to do is I'm going to go back into the code and
just after the nav element but prior to this first h3 that starts the content,
I'm going to go ahead and wrap all of this in an article.
Now, it's not all going to get contained within the article.
As I scroll down, I can see that I have some copyright information and
things like that within this paragraph.
I don't want that to be part of my article.
That's going to be part of a footer a little bit later on.
So, I need to close the article tag prior to that.
So I'm going to save this.
So, our page is gaining a little bit more structure.
We've added nav to describe where the navigation is and now we've
created an article to basically say all of this content belongs together and
it could stand alone if we need it to.
Now, I've seen a lot of authors use the article element as their sort of go to
element for creating new sections of content.
I, however, tend to be a little more, more cautious about using it.
I only use it when it's clear that the content inside of it can stand on its
own or maybe it's something that I might syndicate as a separate piece of content.
There are so many other sectioning elements out there that can be used, such
as the section and div elements that we're going to take a look at in just a moment,
that you really shouldn't use it unless there's a clear semantic reason to do so.