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

Using headings properly

From: HTML5: Structure, Syntax, and Semantics

Video: Using headings properly

While we only have four sectioning elements--article, aside, nave, and section-- headings can also create sections, sometimes unexpectedly. The rules governing the strategies concerning heading use have changed from HTML 4 to HTML5 as well, so it's worth taking the time to explore heading use in HTML5. Understanding how they are used to section content, and how policies governing their use of changed will really help you to create your own strategy for using them. So once again, here I am at the HTML5 Outliner, and we are going to start by exploring how headings can create implicit sections in your documents.

Using headings properly

While we only have four sectioning elements--article, aside, nave, and section-- headings can also create sections, sometimes unexpectedly. The rules governing the strategies concerning heading use have changed from HTML 4 to HTML5 as well, so it's worth taking the time to explore heading use in HTML5. Understanding how they are used to section content, and how policies governing their use of changed will really help you to create your own strategy for using them. So once again, here I am at the HTML5 Outliner, and we are going to start by exploring how headings can create implicit sections in your documents.

So I am just going to scroll down again to this area where we can kind of enter our own code. So once again, I am just going to go ahead and get rid of everything except for the doctype and the title. I am just going to start by adding three headings here. So I am going to do an h1 and I am just going to say, "Explore California." Close the h1 tag. Now I may add another h1, and this is going to say, "Our Tours." Then finally, our last section, which is going to be Tour Reviews, and that again, is in an h1 tag. So now I am going to go ahead and outline this, and notice that we have three items--Explore California, Our Tours and Tour Reviews--and they are on the same level.

And they are on the same level because they have the same ranking. So again, if I go back here, these are all three h1s. All three are going to create in this section, and Explore California is actually the title of the body section, but then Our Tours and Tour Reviews creates new implicit sections that are on the same level as that, because they have the same ranking. However, what happens if, for example, these are found inside other sectional content? Well, that changes things. So if I were to encase both of these in a section--and feel free to go ahead do that--what does that do for us in terms of our outline? Because now they are encased in these sections, if I outline them, now they are considered nested.

They are inside other sections. So remember, the first heading of a section is its title, regardless of its ranking--h1, h2, h3, it doesn't really matter. So in this case, instead of now being a flat document where everything is the same level because of the same rakings, because they are nested inside of interior sections, they are now nested in the outline as well. Okay, well, let's do that in a slightly different way. Let's say we get rid of this sections again and we change the ranking of headings. So now instead of h1, what if these were h2s? If I outline that, notice I get exactly the same structure.

So, two ways of achieving the exact same effect, and really what comes down to is, do you need those sectioning content or are you okay with the sort of more sparse document structure here of using these implicit sections? Let's take this a little bit further. Now, in HTML 4, the only way to section page content was to use different heading rankings, just like this, to create these sort of implicit nested sections. So, in that case, how you used your headings was really, really important, because it created your document structure. Now often, you would only use one h1 on the page, for example, because that would title the page and assist the screen readers and search engine rankings and things like that.

Now HTML5 gives us a whole new set of rules, as these individual sections now have their own distinct hierarchy apart from the page. This means that it's possible, or maybe even desirable, to use more than one h1 per page. So let's go ahead and illustrate that. All right, so right after our Explore California, what I am going to do is I am going to take this Tours and I am going to change that back to an h1 tag, and then I am going to nest it. And I am going to nest this in a section. There we go. I am going to go and open that up. And I am going to create a little bit of space and close my section, because what I am going to do is I am going to nest some additional headings inside of this.

As a matter of fact, if you really want to sort of see the structure, you could just go ahead and put everything on one line. So, the next thing I am going to do is do another h2, and this is going to be Cycle California, so that's the first tour that we are going to describe is Cycle California, and we are going to do it with an h2 tag. And then we have got another tour that's going to follow directly after that, so yet another h2 tag, and that is Backpack California. So now, let's turn our attention to Tour Reviews. We're going to do the same thing here. So, Tour Reviews is going to be nested inside of a section. Again, I am just going to give myself a little bit of space and close the section. And then Tour Reviews is also going to be changed back to an h1 tag.

Remember, it's the beginning of a new hierarchy of tags because it's inside this sort of nested section. Now inside that we are going to do just like a couple of Tour Reviews. The first one h2, it's going to be the tour of the Los Robles Canyon, and feel free to make up your own page structure if you like. After that, we are going to do an h2, Firebreak Trail. As a matter of fact, I really encourage that. I think you will learn a lot more if you come in and say, well, what if I did this, and what if I did this? And sometimes the results are going to surprise you. Okay now, what if I wanted to nest something within Firebreak Trail? Well, because I have started with h1s in the section and went h2s, that's going to nest them.

So, a further nesting of this would be, of course, an h3. So it's just the same sort of rule hierarchy we used before. So, Upper Loop, that will be the first one, and then the second one is going to be Lower Loop. At the very end of all this, past the bottom of the section, I am going to add one more tag. Now, I am going to do an h2 here, and I am going to say, "Monthly Specials." Now think about what I have done here. All these are nested sections, so we have a nested section here, we have a nested section here, and then we have our h1 tag.

So we have h1, nested section, nested section, and then we have an h2. So if I went ahead and outlined this, notice that Explore California, our root, is the first item. And then we have Our Tours, Tour Reviews, which are nested inside of that. And then Monthly Specials enjoys the exact same level within document outline as the two nested sections, and that's because it has an h2. So in terms of the Explore California hierarchy, it's nested inside of it. If it was an h1, it would actually be outside of those guys on the same par as Explore California. Notice also, we are creating implicit sections within our sections by using the h3s instead of the h2s. So we have an h1, the h2 comes next, and because of the first one is simply used to title it, those are on the same level.

So you can see how each section essentially has its own ranking hierarchy, which is going to start over again with every new section. Now, this concept does seem pretty simple. It can be really challenging to come up with a consistent strategy that not only meets your goals in terms of using these headings, but that also results in the desired outline. Now, let me demonstrate that real quick. We've got one last little thing here I want to do. Let's say I go down at the very, very bottom of the code and I create a footer, and inside that footer, I just go ahead and throw a paragraph inside of that and I just call it Legal stuff, because that's where you put in the footer usually is a legal stuff. And then I will close the footer.

Okay, so that's my page footer, right? Now I just have a paragraph inside that. I don't have any headings. So if I outline this, I can see that the footer doesn't show up in my document outline. Remember, headers and footers are not sectioning content, so they don't actually add to the document outline. So if I wanted that inside the document outline, I would need to go ahead and give it a heading. Because it's the start of a new section, a lot of times somebody would say okay, it's the start of a new section. Let's just go there and throw an h1 in there, and they would outline it. And now Legal stuff is on the same level as Explore California, but what if you wanted everything nested inside the title of the document? Well, here the heading that you choose really matters, because this is still considered to be part of the root, because even though it's in footer, the footer is not sectioning content, so it's considered to be inside the root. So if I want it to be on the same levels as Monthly Specials, I would need to use, in fact, an h2, and now it goes ahead and gives me the outline that I am looking for.

So this leads me to really what's a much larger point. Up until now, we just had it drilled into our heads over and over again to only use one h1 per page, and to use the heading rankings to denote levels of importance after that. Now, HTML5 forces us to kind of revisit that, by introducing sectioning content as a way of sort of breaking those sections up. So I think it would be helpful here to examine the specification. So I am going to click over and this is the author view, and I found the Sections area, and I am looking at heading and sections, so 4.4.11. And if I scroll down a little bit, there is one paragraph in particular that I wanted to talk about.

Now, sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements or to use elements of the appropriate rank for the section's nesting level. So, really what that means is that you are going to have to come up with your own strategy for our headings are used within sections. Are you only going to use one h1 per page? Now, again, you are encouraged to use h1 elements within nested sections, but you don't have to. As a matter of fact, most authors are sort of going against what the specification is encouraging them to do, because search engines still strongly value how many h1s you have and where those h1s are and what's in them.

So until that changes--and I full expect search engines to adopt this particular document structure, so I don't think that's going to matter so much down the road--but for right now, a lot of people are hesitant to go away from the strategy. So, are you going to start each section at h1 or nested sections are going to start with an h2, and then go from there? You know, in the end, what really matters is being consistent. So be sure to create a policy that's going to work for the size, structure, and complexity of the site that you're authoring.

Show transcript

This video is part of

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

46 video lessons · 36577 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.