Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Although we've talked about using asides to help structure pages and section content, we haven't really talked about how often, it's a good choice when grouping content within larger sections. Now to be clear, asides will generate a new section of content, regardless of where you use it, but it also gives you an ability to identify related content within a larger section. Now the trick is in understanding how an aside element works when it's used inside of another sectioning element. It will probably, or hopefully, make a little bit more sense once we take a look at our example.
So let's go ahead and dive in it and check it out. So I'm going to be working on the trails.htm file that you can find in the 05_02 folder. And I want to scroll down and take a look inside my rider-submitted reviews, and I can find those right down here. So again, we have a parent article with an ID of riderReviews, and then inside that, we have those individual reviews, which are inside their own articles. We have the Los Robles Trail by Justin Vyn, and we have the Copper Canyon Loop by Shea Hansen. Now in the middle of those now--so here we have the closing article of the Los Robles Trail and we have the opening article of the Copper Canyon Loop.
So in the middle of those two articles, we now have this content, the Ojai Trail Facts. Think about where this is found. So this is in between two articles, which is in itself inside of a parent article. We could certainly use another article here, but that would sort of identify this as being stand-alone content, and it's really not. It's content that does relate to these other two articles. It's not a rider review. However, it does talk about Ojai trails, and these are trails that are found in Ojai. So there is a relationship between this content and those two articles, but it's really is a partial relationship, a tangential relationship if you will.
And so because of that, an aside is the perfect element to use to group this content. So right after article, I am going to go ahead and create an aside and just wrap the Ojai Trail Facts in an aside. Now I'll need to go ahead and take the Ojai Trail Facts the first element here, that's going to be a header, so I'm going to wrap that in an h2 tag. If you can remember from earlier, every time we do a new section of content, we're going to identify that with a heading. And based on our policy of using headings, that's going to be an h2. And then the remaining content, we're just going to go ahead and wrap that inside of a paragraph tag.
There we go. So we're going to go ahead and save that. And I want to preview this in my browser, and I want to scroll down a little bit, okay, so there is Ojai Trail Facts now, and it's been wrapped in an aside. And if I look at the document outline, I can see that now inside Rider Reviews, right there along with our other rider reviews is Ojai Trail Facts, so it's showing up exactly where I want it. Now again, the really important thing that I want you to take away from this is that even though the aside is a sectioning element, there are going to be times that the aside element is the perfect choice for grouping content and establishing relationships between the group content and its siblings within that parent.
Just remember--a really, really important point here-- if it's found, if the aside element is found and nested inside of a parent element, the contents of the aside element are related to that element. Now if it has no parent, the content relates to the entire document. So by placing the aside inside the rider reviews article, we're saying that this content relates to the other rider reviews, not the entire page. Now, being able to scope content in this manner allows us to establish very specific relationships between the content and our files, and that is extremely helpful when you're trying to create more semantic markup.
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.