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.
I admit; I cheated a little bit for this movie. As you can see from looking at the code, there is little bit more content on the page than there was before. But the truth is, obviously, as I have said before, watching me type is probably pretty boring. So, since we are interested in focusing on the syntax, structure, and semantics of our code, I hope you'll forgive me for jumping a little bit and adding some of the page content for us. Now, as you can see, the added content lacks coherent structure. It's just text. So, it's our job to go in and add meaning to the content by structuring it properly.
In this case, we are only looking at the heading content for our sections. So, we are going to start the process by building some headers for various sections and then discuss some of the strategies that we are going to be using for structuring this header content. Now, you can find this file. This is the trails.htm in the 04_07 folder. Now, I'm going to be structuring the code. At the same time, we are going to be previewing the whole finished page in a browser, so we can kind of see how these headings, or header areas, fits in with the rest of our content. Now, I am going to do this so we can explore really the thought process behind our structuring decisions.
Now, you can find the finished file, the one that I am going to be previewing, in the 04_04 folder--and again, that's trails.htm. First thing I want to do is we are going to start, logically, at the top of the page in the main header area. And in the main header area, we see we have two lines of text that have been added. So we have Explore California Trail Guide and 'your complete biking trail source'. So, let's go look at the finished treatment of that. In the finished page, it looks a little different. It says, Trail Guide, 'your complete biking trail source', and Explore California portion of this is handled by the logo, so Explore California Trail Guide, 'your complete biking trail source'.
If I check the outline, we can see that the main heading, Explore California Trail Guide, shows up, but 'your complete biking trail source' does not. So, that gives you an idea as to what we want to see in our outline. It also gives you an idea of how we are going to have to structure our code. So, let's go back into our code, and since this is the main headline on the page, what I'm going to do is I am just going to go ahead and wrap this in an h1 tag. So, just go ahead and wrap the Explore California Trail Guide in an h1 tag, and then it would make sense as a natural progression to take the tagline, 'your complete biking trail source', and also wrap that in an h2 tag.
So, we want to go ahead and wrap that in a heading 2. We saw in the outline earlier that the only headline that we want to show up is the Explore California Trail Guide; we don't want 'your complete biking trail source' to show up in the outline. So, what we are going to do there is we are going to wrap both of those headings in an hgroup tag. Now we learned a little bit earlier that what the hgroup element does for us is it goes ahead and applies the highest ranking headline--in this case, Explore California Trail Guide--to the outline and sort of ignores the rest of them.
So, that is exactly what we want for our headings. You may have noticed also that the text, Explore California, doesn't show up in the final page, and of course that's through the magic of CSS. So, what I am going to do is I am just going to wrap the text, Explore California, in a span tag and let the styles hide it, so the Trail Guide is the only thing that shows up in our finished page. Again, and this is something that we will explore throughout the title, often we want the visual presentation of our page to be different than the actual structural content underneath it, and that's one of the things that Cascading Style Sheets is really good at doing for us.
But of course, occasionally we have to tweak our code a little bit. In this case, we are just wrapping a span tag around the text that we want to hide. It's not really harming anything. It's not really affecting the structure or the outline in any way. I am going to scroll down and we will move on to our next section. In this case, we're going to be formatting the header content for the trailReviews section. Remember, inside the trailReviews section, we have our heading content, or header content, right here, and then we have an individual article that's focusing on the Northridge Loop. Now, I want you to notice where I have placed this text.
So, inside our header, we have Trail Reviews, which identifies the section. Then we have some breadcrumb navigation, All Trails > Ojai, and then we are identifying the fact that the trail review that we are looking at comes from the Ojai Trail, so it's part of the Ojai Trails group. Well, let's go take a look at that visually and see how we are presenting that to users visually and sort of how that is going to have to be handled structurally. So, if I focus on this area, I can see that we have Trail Reviews right here identifying the contents of the section. We have our breadcrumb navigation and then down here, this looks a little different. We have Ojai Trails, Northridge Loop, and if visually, you would sort of put these two together and you would put these together and obviously the white space between them seems to make them separate, but there is a method behind what I'm doing here.
When you're determining which elements you are going to use--in this case, we are using a section because this is a section of content and there are going to be different articles that users can look at depending upon which area they are looking for, or which specific trail. So, this content is going to change a good bit. The identifying region here, Ojai Trails, is going to change also each time, but this article is something that I could syndicate. I could publish that out separately. If I were to publish this article out separately, it really won't make a lot of sense to have Ojai Trails or San Bernardino or Sonoma sitting up top, but saying Northridge Loop, the name of loop, and then having the article, would make sense.
So, that's why I want to keep those separate. Ojai Trails really does belong to this header content, but visually, it makes a nice presentation if it's arranged just above the name of the trail, so, again, we kind of know what we are looking at. So, again, this is an instance where the structure of our page needs to be one thing and the visual design of our page can be something quite different. So, let's back into the code and let's go ahead and structure that. So the first thing I am going to do is go into my Trail Reviews. This is the main headline for our section. So, I am going to go ahead and wrap that in an h2 tag.
Now, here again, we are having to decide how we are going to use headings. And I have decided for this page, we will only use one heading 1 on a page, and then for every new section, that section is going to begin with a heading 2 and then the headings will nest after that. So no matter how deep into the page outline we are, the beginning heading of any section will be a heading 2 tag. All Trails > Ojai, those are going to be our breadcrumb navigation, and for right now I am just going to go ahead and take that and wrap that inside a paragraph tag; that does not need to show up in the outline.
And then for Ojai Trails, I am going to go ahead, select that, and we are going to wrap that in a heading 3 tag. Again, it's a secondary heading that's a little further down, so it needs to nest inside of Trail Reviews. Notice that we have, between the heading 2 and the heading 3 here, we have a paragraph. So, if I wanted to hide Ojai Trails from the outline--I don't, but if I did want to hide it--I would have to use something other than the hgroup element because the hgroup element can only have headings inside of it. So I would need to either modify this or find some other way to hide it.
Okay, well let's move on to our article. Again, this is going to be actually pretty simple until we get towards the bottom of it. The Northridge Loop being the first heading inside of our article, we know what our policy is on that, so we are just going to go ahead and wrap that in a heading 2 tag, so h2. And then Skill level, Surface, Notable features, and Final thoughts, these are all sections of the article itself. So again, I am just going to keep them. They are all on the same level, but they should be nested underneath Northridge Loop, so these are all going to be heading 3 tags. So, I am just going to go ahead and wrap each of these in a heading 3.
The reason I stopped at Final thoughts is because it is the final section of my article. After that, we have a section of comments. And what I want to do is let's go out and take a look at that actually in the finished page. So, if I scroll down a little bit here and go down, I can see that Comments does look like an entirely different section, and then we have a sample comment in there as to how our comments are going to look and how they are going to be structured. You have to make a lot of decisions. If you are going to have a blog post or if you are going to have any type of article where user feedback can be entered in, you have to really think about how you are going to structure that.
The specification suggests that individual comments should be nested articles. A nested article isn't necessarily something that's going to be published and stand on its own, but it is independent content of its parent article, and that does suit comments a lot, so that's the structure that we are going to use for them. However, we do have a heading here that identifies the section, saying hey, this is the Comments section, so we are going to use a section tag to surround all of our comments, and then each of the individual comments will be in an article. So, let's go back into our page, and we're going to do just that.
So, the first thing I am going to do is go to my Comments and I am going to go ahead and wrap that in a section tag. So, be very careful about what you wrap. You are just wrapping the Comments headline and then the individual comment, Max Smith wrote this on April 25th. Those are going to go inside of the section tag. Now, the Comments itself, I am going to go ahead and highlight this. Because it's the first heading in a section, it gets an h2 tag. And then "Max Smith wrote this on April 25th," this is simply one part of the comment, but because this is an individual comment, remember, we are going to wrap those in an article tag.
So we are going to go ahead and wrap that in an article tag. And of course, there is more to this comment that we will structure a little bit later on. And then Max Smith wrote this, in terms of the meta content of a comment, there are a lot of different ways to structure that. I've seen people put them in footers. I have seen people put them in headlines. I have seen people put them in headers. I've even seen them structured in paragraphs. It's really up to you in term of how you want to do that. I frankly want to see this in the outline. I want to see all the comments structured in the outline itself. So, I am just going to go ahead and wrap that in a heading tag.
We only have one item, so I don't feel like I need a header for it. And a footer would be appropriate, but since I want this to appear in the outline and it's only one element, I think a heading is probably the better choice here. So, I am going to go ahead and wrap that in a heading 2 tag. We are going to go ahead and save that. We are almost done. We have one more section that we need to work on the headings for, and those are our rider reviews. And you can see that inside the article riderReviews, we have a headline identifying the article content, and then we have two nested articles: the Los Robles Trail and the Copper Canyon Loop.
I want to point out something about these by looking at the finished page. So, if I scroll back up through these, I can see that we have the title of the article, Los Robles Trail, then the author's name, and then submitted on, so this is all heading content right here. This is all part of the header. Now, if I look at the outline, again, we can scroll down, and we will be structuring this Ojai Trail Facts a little bit later on, but I can see the second one, Copper Canyon by Shea Hansen, follows the same format. Now, if I look at the outline for this, I can see that the title of the articles is showing up, but the headline is not. Again, that gives me a nice clue as to how this needs to be structured.
So, let's go back into our code. Now, the first thing I am going to do is take rider reviews and I am going to wrap that in a heading 2 tag. Then the nested articles themselves have more than just one article in the header, so it makes sense to go ahead and wrap that heading content in a header tag. So, I am going to go ahead and do that for both articles. Just go ahead and wrap their header content in a header tag, and then we can go in to actually structuring each of the individual lines within the header content. Los Robles Trail is the title of the article, so we are going to go ahead and give that a heading 2, remember, not a heading 3, because it is inside of its own section.
So, the article element starts a new section. So, we will go ahead and basically reset our headings and start over again. The author's name is going to be inside of a heading 3. It's almost like a tagline. And submitted on date, we are going to go ahead and wrap that in a paragraph. I am going to repeat the exact same structure right down here. So, a heading 2 for the title of the article, a heading 3 for the author, and then a paragraph for the date.
As you saw when we were looking at the outline, the author's name was not included as part of the outline; but if I were to leave it like this, it would be. So again, I am going to turn to our old friend hgroup and group those headings together and make sure that only the highest rank heading is added to the outline. So, I am just going to go ahead and do that for each of those sections. I am going to go ahead and save the file. At this point, I want to go ahead and test my page, so I am going to go ahead and preview that in my browser. So, just go ahead and open that up in your browser.
It doesn't look all that great yet, but we're going to check the structure. So, I am just going to check the outline, and in looking at the outline, I see exactly what I'm looking for: Explore California Trail Guide, there is our Trail Reviews, Ojai Trails, Northridge Loop, all of those individual areas. Notice that we have the Comments section, with its nested comment, and then we have the rider reviews and we have the trail names without the author's name, so that is perfect. That's exactly what we want. You may have to use your imagination a little bit to envision the finished page at this point, but you can see that our document structure is a lot clearer than it was before.
Now, the importance of properly structuring heading content cannot be overstated. This is where you add meaning and identity to the various sections of your document. Now, you may have noticed all of our sections were identified properly except for our navigation. Now, going back the outline, it just says untitled nav, which is fine. We are going to handle that next as we turn our attention to building our page navigation.
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.