Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last movie, we saw how headings can create implicit sections when more than one is used within sectioning content. Now, this is usually the desired result, but what if you wanted subheadings to relate to the previous heading and not create a brand-new section? Now, for example, maybe your main page headline has a tagline that you'd normally represent with an h2 tag, but in terms of the document outline, you would have just created a new section by using it that way. Well, that's where the hgroup element comes in. The hgroup element allows us to group related heading content together, overriding the normal sectioning rules.
Now, let's take a closer look at it by examining the specification. So I am here in the HTML5 author's guide, and I found the sectioning content, and I found the hgroup elements inside that, so 4.4.7. And I noticed a couple of things about it right off the block. Number one, it belongs to heading content, and it's very restrictive in terms of what it can hold inside of it. And notice that you can have any headings, h1 through h6, and you can have a group of them basically. If we scroll down to the description, we see that the hgroup represents the heading of a section. It's used to group a set of h1 through h6 elements when the heading has multiple levels, such as subheadings, alternate titles, or tag lines.
Now, the next section is really important. Now for the purpose of the document summary or outlines and the like, the text of the hgroup elements is defined to be the text of the highest ranked, h1 to h6 element, and that's really important, and we are going to take a closer look at that in just a moment. Okay, so I'm going to switch back over to the HTML5 outliner that we had been using, and again, I am going to scroll down to just the sort of content section, and really kind of what we've been doing, sort of getting rid of everything except for the doctype and the title. So the first I want to do is just type in an h1 tag, and once again, I will just type in 'Explore California' and close my h1 tag there. And underneath that, we are going to type in an h2 tag that is almost really obvious to anybody reading this that it's a tagline.
I am going to type in, 'Come explore our world your way'. So it's typical advertising tagline. However, if we outline this, we can see that that heading is exposed to the document outline, and it would be in any type of table of contents or assistive technology that reads this, and we really don't want it. We want to hide it. So if I go back into the Outliner, if I instead encase this in an hgroup element--so essentially I just go ahead and wrap an hgroup element around it-- now if I outline this again, I only see the top-level heading. So the h2 is being ignored based on the fact that it's wrapped in the hgroup tag and the top- level heading is the h1, Explore California.
Now, remember what the specification said. The specification essentially said, "Hey, it's the highest level heading that acts as the title, regardless of where it's found." And let me illustrate that. Basically, what I am going to do is I am just going to come in here to the hgroup tag we've got. I'm going to cut the heading 1, and I am going to add this below the heading 2, and maybe I might even come in here and add an h3. Why not? And I'll just come in and say, you know, "Our Tours are paradise." So now I have three headings in my hgroup, and the h3 starts first and the h2 and h1. So, normally within a section, it's the first heading that you encounter that acts as the title of the section, but when you encase it inside the hgroup tag, that is not the case.
So if I outline this, notice it still says Explore California, and that's because the highest-ranking heading is used to title it, no matter in which order it's found. So think about the hgroup element as a way of really preserving what your intentions are, regardless of the way that the content is encountered, because often the structure of our sections really doesn't match the desired outline that we want for our document. Now as its name implies, the hgroup element gives us the ability to group headings together, ensuring that sections are titled properly, and allows us to override the sectioning rules, so the unwanted sections aren't created by taglines, subheadings, or alternative titles.
Now, there is one thing to remember here: hgroup can only handle headings. So if I had a heading 1 tag and then a paragraph, and then a heading 2 tag, I can't surround all of those in an hgroup tag. I am going to end up with two distinct sections, the h1 and the h2, and there is really nothing I can do about it. Now, with that in mind, if you use the hgroup tag correctly, the hgroup element can be a very powerful way to control your document outlines and how your headings are structured.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97489 Viewers
61 Video lessons · 84721 Viewers
71 Video lessons · 68914 Viewers
56 Video lessons · 101358 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.
Your file was successfully uploaded.