Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Gain a deeper understanding of HTML5 and learn how to create richer, more meaningful web pages with structural tags and descriptive attributes. In this course, author James Williamson presents an overview of HTML5 and its development, defines the new tags and attributes, and discusses how browsers parse and display HTML5 content. The course also includes step-by-step instructions for constructing an HTML5 document with a header and footer, navigation, content groups, and formatting.
Much like the section element, the article element helps you define distinct sections of content within your pages. However, the article element plays a very specific role in identifying content, so let's take a look at the specification to see what kind of role the article element can play for us. Now, once in categories, we have our Flow content and Sectioning content, but it's just like the sectioning element. I am going to scroll down a little bit so I can see this definition a little bit more clearly. Notice that the article element presents a self-contained composition in a document that is in principle independently distributable or reusable, such as in syndication.
So this is content that can be repurposed and republished, or syndicated. They give examples of forum posts that some of you might make, magazine or newspaper articles, a blog entry, user- submitted contents, interactive widgets-- really any other independent item of content. Now it's that last line I want you to focus on, "any other independent item of content." Did you notice how much leeway the specification is giving you, the author, in determining what that might be? And of course, this is leading to some of the confusion around it, but seriously, look at it this way.
I've heard some people describe the article as a distinct item--you know, think like article of clothing, a shirt, or a pair of pants, some socks, something like that. If the element in your page represents an independent article apart from the page, then it's something that the article element can be used for. Other people have a much stricter interpretation of it, that if you are not going to syndicate something, if you're not going to repurpose it, then you probably shouldn't use the article element. I look at it this way. If its content that can be republished, if it's content that can be syndicated or that you might want another user agent to be able to come in and access and can be understood by itself with none of the rest of the page content around it, then the article element is more than likely appropriate.
Notice also, it mentions, when article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer articles. So when you are determining whether to nest those, that comes into play. And they mention user-submitted comments in our a blog entry, and that's typically where you'll find that usage of that. As a matter of fact, when we scroll down, we can see a couple of examples. The first example shows a blog post. You can see article and closing article tag, and you can see that we have some comments down here or a link to show some comments. And if we do the same blog post, when we look at this, you can see down here now, each of the individual comments by the users are contained in the article tag as well.
Most examples that you see using the article element are blog posts, because it's such an obvious choice for that blog post. They're independent; they stand on their own. They can be republished or repurposed, so it kind of makes sense for the article element. And that's not a bad pace to start with that, if you want to grasp kind of the meaning of the article element is. So now that we've talked about that a little bit, let's go back into the pages that we're building and use the article element within our page. So, here we are, back, and I have the html5.htm file open from the 02_06 directory, and this is going to be kind of anti-climactic, to be quite honest with you.
I am going to scroll down, and our section that we created here where it says "Come explore our world your way, Explore California is the best way to explore our wonderful state!" so forth, and so on, this could be a lot of content, but this could be an article that we might want to republish on other pages or other sites or something that we want to syndicate. If that's the case, then the section element is not the element to use here, and it would be the article element. So I am going to go ahead and change the opening and closing tags to the article element.
I am going to go ahead and save that, and you might say to yourself, well, wait a second. You are just changing elements around, and we don't really know what this means-- and that's exactly my point. My point is that as a web author, it's your job to understand the content of your page and how that content needs to be represented. So you have to make that judgment call as to whether this is an independent piece of content. That's a much easier call to make if you know that that content is going to be repurposed or syndicated in say an RSS feed, or that might be in some type of aggregator grabbing that information and republishing it somewhere, then it's a lot easier to say to yourself, okay, I just need to use the article element here.
If not, then you really have to make that determination for yourself, and this is one of the elements that I think, frankly, I've seen people sort of overuse. It's sort of become the replacement for the div tag in a lot of cases, and that is not what this element is for. So, make sure you spend some time really thinking about the content on your page and whether the article element is appropriate. So, just as I mentioned, just like with the section element, we are going to talk more about the article element and when it's appropriate to use, all throughout this title, actually. For now, just concentrate on the fact that articles are appropriate when representing stand-alone or syndicated content, and in the future it will make it a lot easier for folks to construct feeds, repurpose that content, or segregate content for quick searches.
There are currently no FAQs about HTML5: Structure, Syntax, and Semantics.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.