Join Joseph Lowery for an in-depth discussion in this video Implementing advanced headings with HTML5, part of Typography with CSS in Dreamweaver.
Headings have taken on a new emphasis in the structure-focused HTML5. Whereas in previous versions of the language, where the heading hierarchy was generally applied on a document basis, with one h1 tag per page, HTML5 is more granular. To reflect today's nature of portable content, each section is encouraged to maintain its own hierarchy. HTML5 includes a new tag called hgroup to facilitate the suggested best practice. Let's take a look at a practical example to show you what I mean.
So I have open here the headings.htm file that can be found in the Chapter 7 > 07_01 folder, and if you take a quick look down at the Tag Selector, you'll notice that there is one div but then instead of other divs with an ID of say section or aside, these are the tags, and let's take a look at Split View so you can see that a little bit more closely. Here is an aside tag. This is an HTML5 tag, and if I go up to where the headings are, you can see that it opens with a section and not a div, and a header with an ID of main header instead of a div.
So now that we have an h1 and an h2 in our header what we want to do is group them together so that the outline of the document is properly represented. So I'm just going to highlight both the h1 and h2, and now I'm going to use the Quick Tag Editor in Dreamweaver, and you can open that up by pressing Command+T on the Mac, or Ctrl+T on the PC, and because I have text selected, it opens up in Wrap tag mode, which is perfect, because that's what I want.
I want to wrap this in a new tag called hgroup and you can see the code hint populating there. Once I have that I can just hit Enter or Return, and now my two headings are grouped in one section. In HTML5 headings can also create their own hierarchical levels within sections. Let's scroll down to the callouts, and if I put my cursor into the Monthly Specials, you'll see that this is actually an h3 tag here, and because I'm in a separate section of the page called an aside, I can go ahead and make this an h1 tag.
Now I wanted to show you a very quick way to do that. Of course, you could open up the Property Inspector and then choose that from the list, but there is a great series of keyboard shortcuts that you should be familiar with. I'll drop out of Live View here, just so you can see it. I'll put my cursor in that h3 tag, and then I'm going to press Command+1. That instantly converts the h3 tag to an h1 tag. Now there is an easily remembered series of keyboard shortcuts, Command+1 or Ctrl+1 for heading 1, Command+2 or Ctrl+ 2 for heading 2 and so on, 1 through 6.
If you press Command+0 or Ctrl+0 your text will go to a paragraph format. The restructuring of headings in the new hgroup tags are a critical component of the HTML5 structural tags designed to work more efficiently in a modular web.
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector