Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now, that we've covered some of the basics of HTML5 document structure and syntax, I want to revisit our HTML5 page and begin to replace the generic div tags with some of the new semantic structural elements available to us in HTML5. Now, we are going to explore those elements and how you'll use them to structure pages in more detail a little bit later on. Right now, I just want to introduce the tags and show you where you can learn more about them, and then get a feel for them by completing our basic page structure. The specification that I am going to be making the most use of in this course is the HTML5 Edition for Web Authors.
Again, you can find that at dev.w3.org/html5/spec-author-view. This sort of is a subset of the HTML5 specification, and it doesn't have any of the UA implementations, which just makes it a little bit easier to search through, and also it's formatted a little differently than the normal HTML5 spec too, which makes it a little bit easier to read. Now, by the time you are taking this title, this site may have changed. It's about second or third design at the moment. But this is a site that I recommend going in terms of referencing specific tags and finding out a little bit more about them.
Now, speaking of that, we're focusing on the header element, so what I'll do is I am just going to scroll down into the table of contents, and if you want, you've got a section here, sort of a shorter table of contents. Notice that I could go searching for the elements of HTML, which will drop me down a little bit into these elements, and I can begin to find them. They have them highlighted in red, so they are really easy to find. Now remember, we're looking for the header, so if I scroll down to Sections, I can find header pretty easily. So I am now going to click on that, and that takes me to a more detailed description of the header element.
Now, the way that this edition of the spec is set up is we have this nice introductory content here in this lock. It sort of gives us a quick glance of the tag; lists which categories it belongs to-- in this case it's Flow content and formatBlock candidate-- Contexts in which the element can be used where Flow content is expected. Now, here is the thing: unless you know what Flow content is, this is probably still Greek to you. HTML5 has a whole new set of content models available to you that you didn't have in earlier versions of HTML. So, a little bit later on, we are going to go into that in more detail, so that you'll kind of know what all these means.
The other thing that it tells you is, for the content model, it tells you what can go in this tag, and in this case Flow content, but with no header or footer element descendants. So, headers can contain just about anything, but they can't contain additional headers or footers, so you can't put headers and footers inside of headers. If there are there any specific attributes to that tag, they'll be listed here. As we can see, the header attribute just takes global attributes, so any attributes in HTML that are listed as global attributes, can be applied to the header element. Now, the other thing this specification does for us is it gives us a brief description.
Here, the header element represents a group of introductory or navigational aids. Below that we usually have these little notes which are on these little dotted line boxes, and it says, "A header element is intended to usually contain the section's heading, (an h1- h6 element or an hgroup element), but this is not required." The header element can also be used to wrap a section's table of contents, search form, or any relevant logo. So, we're looking at introductory content, navigational aids, headers. That's the type of thing that we are looking at for the header tag.
Now, if I scroll down, it will actually show you some code examples of the element that you are looking at. So, it shows you different versions of different ways to write it, that sort of thing. And it also passes along notes like the fact that the header element is not sectioning content. Now again, we are going to go into the content models a little bit later on, so that will make sense the deeper we get into the title. So, I love this version of the specification, because it gives you the sort of nice concise description of the element and then shows you some examples of how it's used. Now, speaking of that, we are going to go back into our document and actually use the header element as we begin to restructure our file as an HTML5 file.
In this page, it's actually pretty obvious where that header element needs to go. We can see that we have some div tags here that are sort of identifying these areas of content, and this is definitely the way that we would author pages in XHTML. So, instead of saying div id="header"--which again, you and I know what it means, but semantically it means absolutely nothing-- we are going to replace that with a header element. So remember to do both the opening and the closing tags, and I am going to go ahead and save that. Now, you may have noticed that our navigation is outside the header tag, even though in the spec it said that it was permissible to go ahead and place the navigation or navigational aids within the header element.
Well, in this case I just didn't feel like it was the proper place for it. Perhaps, for example, you might have some sidebar navigation that's vertical in nature; it probably wouldn't fit within the header. But in other cases, you might want the navigation to be the very first thing that's encountered, so you would place it in the header. In a lot of cases, these are just judgment calls. You have all these options that HTML5 gives you, and as an author, it's up to you to decide kind of which path you want to take. That's why it's so important to learn as much as you can about these elements, so that you know the options that are available to you, and as you are authoring your pages, you can kind of make those judgments calls.
So the header element, it's a great place for introductory content. It is a very natural location for that. And as we're going to see a little bit later on, as we create more complex documents, you can use it as many times as needed in your document; it's not just a single-use tag. And of course, we'll see that as we explore in more detail a little bit later on.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104560 Viewers
56 Video lessons · 116482 Viewers
71 Video lessons · 85687 Viewers
131 Video lessons · 41010 Viewers
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.