Structuring interior content
Video: Structuring interior contentNow that our page's basic structure is in place, we need to turn our attention to adding HTML5 structure to the interior of the page as well. In this movie, we're going to focus on when it's appropriate to use article tags and continue to refine the outline of our document. So I have the trails.htm file open from the 04_03 folder, and we're just picking up right where we left off. So our top-level elements have already been converted over to HTML5 tags.
Viewers: in countries Watching now:
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
- Understanding the history of HTML5
- Using new tags
- Understanding HTML5 semantics
- Coding ID and class attributes in HTML5
- Structuring documents
- Building forms
- Exploring HTML5 native APIs
- Encoding and adding HTML5 video
- Exploring associated technologies such as CSS3
Structuring interior content
Now that our page's basic structure is in place, we need to turn our attention to adding HTML5 structure to the interior of the page as well. In this movie, we're going to focus on when it's appropriate to use article tags and continue to refine the outline of our document. So I have the trails.htm file open from the 04_03 folder, and we're just picking up right where we left off. So our top-level elements have already been converted over to HTML5 tags.
You can see here we have header tag, a little bit further down you can see the section tag, below that we have an aside tag, and finally we have a footer tag down at the bottom of the page. So now we need to concentrate on the contents of those top-level regions. For example, inside of our header here we have a div tag that's wrapping the main navigation for the page. So it has an ID of mainNav and it contains all of our site navigation. So in this case it's appropriate to go ahead and use a nav tag here. So what I'm going to do is replace the div tag here with a nav tag, both the opening and the closing div tags.
Let's talk about why it's appropriate to use a nav tag here. Well, nav tags are designed to wrap navigation. So that's the first thing. That's the first reason we're using it here, but the second reason is that it is sectional content. So adding a nav tag to the page adds a brand-new section to our outline. So essentially, we're saying just below the top of the page, here's our main page navigation. We could use that for accessibility purposes, we could tell user agents to make sure they introspect the main page navigation, or we could tell to skip it.
So that's a really good way to identify the navigation and to add it as a section in our page. Now I'm going to scroll down a little bit further to find our trailInfo section. So inside the trailInfo section is all of our trail information on the Northridge Loop trail, which is the trail that we're currently looking at. You can see for example that we have a little small navigation inside of that that's basically saying All Trails and then the Ojai Trails. We have a header that's identifying the fact that we're looking into the Ojai Trails region and then we have the Northridge Loop itself.
So we have a table, some quick facts about it, and then after that we have some text that's basically just giving us a review of that trail. So, for the most part this is content that again can be republished on its own. However, the top two items in this section, the sub-navigation for the trails and the heading identifying that we're looking at the Ojai Trails region, doesn't really fit into something that we would republish. So for the moment, we're going to leave that content alone. However, the content below it, the heading right here starting with Northridge Loop and then going all the way down to just inside the section tag, so still that image tag that has our canvas_mockup in it, all of this content can be republished and can stand on its own.
So this is something that we might want to syndicate a little bit later on or we may need to pull this content out. So a nice way of identifying that and creating a new section within our document outline is to use an article tag. So that's what we're going to go ahead and do here. So I'm going to go ahead and wrap that content with an article tag. So you just want to add an opening article tag in front of it and make sure a closing article tag is added to the end of it. In this case we don't need any type of a class or an ID to identify this. It's just an article of content and it's not always appropriate to use a class or an ID unless you're wanting to identify it further, and in this case we don't really need to.
Next, I'm going to turn my attention to the aside region. So I'm going to scroll down a little bit, and for me, it's on line 59 right now. But here is our aside. It has an ID of trailNews and inside of that we have a headline that's essentially identifying the section as well as Trail News. Now directly inside of that, we have a div tag that has a class of news. Inside that, we have our promotional video and some corresponding text. So this is a discrete element inside of our Trail News and probably needs to be identified as such. Now again, we could use an article tag, but the question comes, is this content that we're going to republish, is it something that can stand on its own? In this case, the answer to that would be no.
So instead of using an article tag here, we're just going to use a section tag. Again, it's going to go ahead and create a new section in our document outline. It stands for a discrete region of content, but it isn't necessarily standalone content. So again, I'm going to change the opening and closing div tags here to a section tag. All right, cool! Now, going down a little bit further on, and by the way, I left the class of news on that. Obviously, that class is doing something for us in regards to styling or identifying that section, so I'm going to leave that alone.
Just below that we have another div tag with a class of news. If we look a little closer at this, this is a section identifying Rider Reviews. So individual riders can publish their own reviews to the site and this is one of those. Now, this is content that I could see being reused somewhere else and as you can tell, that's always a judgment call. You may have a desire to republish content that other people wouldn't republish, or you may have a certain requirement that says hey, this content must be republished. But in this case, it's just content that I think probably can be republished or can be used somewhere else or can stand on its own.
So again, instead of a div tag, we're going to change that div tag to an article tag and we'll leave the class alone, so it will still be identifying that as news content. So it will say article. And again, I'm going to scroll down, find the closing div tag, and make sure that is a closing article tag. So our aside has two sections inside of it. The first one will be the promotional video, the second one will be the Rider Reviews. So two sections of equal importance, but one is using a section tag, another is using an article tag based upon its standalone nature.
Now, there is one more thing that I want to do here in terms of structuring this interior content. You'll notice inside of our Rider Review article, we have a paragraph that has a class of publishing date and it's submitted on February 23rd, 2010. So this is when this particular review was published. Well, one of the really nice things about HTML5 is it allows us to identify content, not so much for human readability, but for machine readability. Maybe if I am syndicating this, I'd want to identify to any user agent when this content was published.
Normally you would send that along through some type of metadata or some other means, but by using the time tag, we can go ahead and use the date/time attribute to pass along a specific machine-readable value. So what I'm going to do is I am just going to highlight the actual dates itself. So we're on line 70, and I am highlighting not the text submitted on, just the actual date. 02/23/10. I'm going to go ahead and wrap that, and I'm going to wrap that in a time tag. So we want to go ahead and use a time tag there, and inside the time tag I'm going to use an attribute called datetime.
Now, datetime allows me to go ahead and specify in Gregorian formatting the date that this is published. So you can pass along month, date, year. You can pass along actual time itself. In this case, we don't have the time of day that it was published, but we do have the date. So I'm going to go ahead and hit Return. So I want datetime= and inside that, I'm going to go ahead and type in 2010-02-10. So again, this is Gregorian format, and it's something that if you're interested in doing this yourself, you'll have to learn how to format that.
But most of the time, it will be your blog or some type of other publishing system that is adding the date for you. Then directly after that, I'm going to use an attribute called pubdate. Now, a pubdate is a Boolean value, so it either has true or false. You can explicitly write that or you can do what I'm going to do here, which is basically put the attribute in there. The attribute appearing without any type of an assigned value will assume a true date. So by using the attribute pubdate, I'm letting any type of system that might be repurposing this content know that this is the date that the article was published.
So I'm going to go ahead and hit Return, and there is my time tag with my datetime and the pubdate attribute wrapping that. Perfect! So I'm going to go ahead and save the file and now we're almost finished restructuring our page with our HTML structural markup. We've still got one more extremely important part of our restructuring to go. Right now, other than the top section of the page, we haven't explicitly defined any headers. We're going to cover that and why it is so important to do so in our next movie.
There are currently no FAQs about HTML5 First Look.