New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

The header element

From: HTML5: Structure, Syntax, and Semantics

Video: The header element

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.

The header element

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.

Show transcript

This video is part of

Image for HTML5: Structure, Syntax, and Semantics
HTML5: Structure, Syntax, and Semantics

46 video lessons · 35076 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 20s
    1. Welcome
      48s
    2. Using the exercise files
      1m 32s
  2. 19m 7s
    1. A brief overview of HTML5
      3m 57s
    2. What's in the HTML5 specification?
      8m 17s
    3. Why do we need new structural elements?
      6m 53s
  3. 50m 33s
    1. Defining HTML5 documents
      5m 5s
    2. HTML5 syntax
      9m 14s
    3. The header element
      5m 22s
    4. The nav element
      4m 55s
    5. The section element
      4m 51s
    6. The article element
      4m 48s
    7. The aside element
      4m 13s
    8. The footer element
      4m 17s
    9. Content model overview
      7m 48s
  4. 35m 28s
    1. Understanding the outline algorithm
      3m 17s
    2. Creating document sections
      8m 25s
    3. Using headings properly
      9m 1s
    4. Using hgroup to override sectioning
      4m 17s
    5. Properly nesting structure
      7m 17s
    6. Sectioning roots
      3m 11s
  5. 58m 30s
    1. Organizing content
      4m 41s
    2. Planning document structure
      5m 47s
    3. Choosing the right structural element
      4m 43s
    4. Checking document outlines
      5m 27s
    5. Coding initial page structure
      5m 28s
    6. Using class and ID attributes
      5m 31s
    7. Structuring headers
      13m 13s
    8. Building navigation
      7m 1s
    9. Structuring footers
      6m 39s
  6. 1h 27m
    1. Working with figure and figcaption
      7m 12s
    2. Grouping content with asides
      3m 46s
    3. Using divs in HTML5
      5m 0s
    4. Working with lists in HTML5
      7m 10s
    5. The return of bold and italic
      5m 52s
    6. Citing works semantically
      6m 32s
    7. Using the address element
      5m 24s
    8. Using the small element
      4m 24s
    9. Using the mark element
      5m 16s
    10. Working with date and time
      11m 55s
    11. Creating block-level links
      8m 53s
    12. Understanding link relationships
      9m 28s
    13. Defining link relationships
      6m 23s
  7. 17m 22s
    1. Current browser support
      7m 38s
    2. Ensuring block-level display
      4m 3s
    3. Adding support for elements in older browsers
      5m 41s
  8. 3m 46s
    1. Additional Resources
      3m 46s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.