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

Structuring headers

From: HTML5: Structure, Syntax, and Semantics

Video: Structuring headers

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.

Structuring headers

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.

Show transcript

This video is part of

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

46 video lessons · 35929 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 20s
    1. Welcome
      48s
    2. Using the exercise files
      1m 32s
  2. 18m 41s
    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 27s
  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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5: Structure, Syntax, and Semantics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.