A Command of Headings: Usage and Styling

Posted February 16th, 2008 by Mike Cherim

I command thee, headings. Do not defy me as I am the all-powerful web developer. I am your master for I wield a style sheet with which I can make you mine…

Wow! Where did that come from? It sounds so dramatic. And, yet, it so well defines our relationship with heading elements. Of course not everyone will feel this way. I, for one, recall a time when headings where something I avoided using. I mean, really, they’re so big and black and ugly. That was early-on in my foray into the craft, though, when paragraphs — or pseudographs as I like to call them now — were made by placing two break elements between two blocks of text. I didn’t know better. I didn’t realize the power I had at hand via my style sheet. I learned.

Selecting Headings

Before we get high on Cascading Style Sheet (CSS) magic, we need to first figure out what headings to use. There are, after all, six to choose from: h1 through h6, largest through smallest, respectively — most to least important, consequently. Generally the h1 will be used once (that is my recommendation) and it will either define the site, the page content, or both. After the h1, the h2 will be used to identify the major sections of the page. So, the first content heading will be an h2, then that might be followed by another h2, unless there is first some sub-content that requires its own heading. An h3 would be used next in such a case. Think parents, children, grandchildren, and so on, as the content’s organization will dictate.

Here’s an example of one possible structural permutation.

<h1> Animals.com - Dogs

 <h2> About Dogs
   <h3> Physical Characteristics
    <h4> Small Dogs
    <h4> Large Dogs
   <h3> Training Dogs
    <h4> Personality Traits

 <h2> Navigation & Links
   <h3> Affiliates
    <h4> Friends
   <h3> Sponsors

Note that I didn’t use the h5 and h6 sub-headings. I didn’t include them because I find I rarely need them. But it all depends on your web document and its content. If it makes sense to use them then do so, just don’t skip a size. In other words, don’t follow an h2 heading with an h4. An h3 would first be needed.

Take the time to get it right. Headings are not only important to page organization, and page indexing (by search engines), they’re extremely important to web accessibility. Some users will be able to access the page semantics via your heading structure, in advance of accessing the content itself. Some people will be able to use your headings for actual page navigation.

Okay, now that that’s out of the way, let’s get to the good stuff.

Styling Headings

Big and black and ugly?! That’s so far from the truth. Headings are easily styled and rather cooperative offering decent cross-platform/cross-browser support consistency. Let’s explore this a bit further. In the following examples I will offer some text with headings — all h4s because that is appropriate in this case — each treated differently. Each example will be followed by the styles used to get them looking right on this site. This should still prove useful, though. Please note that due to the different fonts offered on this site, there may be some rendering discrepancies. Inline styles were used for the examples in this article.

A Decorative Floated Heading

This is pretty cool. It could also be floated left. It all depends on what you’re after. To float left, the margin would have to be adjusted, swapping the left and right measurements. This might look cool with a colored background or image. A background image could be positioned to the top right and right-side padding to the heading to make room for the image.

h4 {
  float : right;
  margin : 0 0 10px 30px; /* top, right, bottom, left (respective) */
  color : #cc6633;
  font : 150% georgia, palatino, serif;
  font-style : italic;
}

Colored Background Boxed Heading

A background color (watch that contrast), a border, and a little bit of padding is all that’s needed to make this work. It’s an ideal style if you want a strong visual section demarcation. A treatment like this would probably be best applied to larger h1 or h2 headings. It could be used creatively on a side bar just as easily, though. This could look good with just a border, or with a background image added.

h4 {
  background-color : #f7f7f7;
  border : 1px solid #339999;
  color : #cc6633;
  padding : 3px 8px; /* top/bottom, right/left (respective) */
  width : 98.5%;
  margin-top : 25px;
}

A Left-Floated Inline Heading.

You’d normally see this type of treatment in a book, not on the web. But there’s no reason not to use it. It would be especially useful if you were dealing with lots of headings and you wanted to save some space. This effect is also available via the display property run-in, which is designed specifically with this in mind (without improper nesting as would be necessary if the actual inline display property was used). Unfortunately display:run-in isn’t well supported, not even in Firefox, so, for now, this is probably the best option. Alternatively, if a pixel-perfect layout isn’t critical, it could be deemed a progressive enhancement facilitating the proper rendering for browsers that support it (Opera and Safari) and a normal heading rendering for those that don’t. If you use browser-specific style sheets then you could expand the level of support by offering both methods.

h4 {
  float : left;
  margin : 0;
  padding : 5px 5px 0 0; /* top, right, bottom, left (respective) */
  color : #cc6633;
  font-size : 100%;
}

An Expanded Small-Capped Heading

I think this looks sort of sophisticated, but it would strongly depend on the type-face used. A serif font should look good but I decided to let your selected font-prevail. It might be worthy of some experimentation.

h4 {
  color : #cc6633;
  font-variant : small-caps;
  letter-spacing : 0.5em;
  font-size : 120%;
}

An Expanded and Transformed Heading

Transform it to uppercase, make sure it’s bold — try to select a bold font like Impact/Futura as I’ve used here, and spread it out a bit. Wham. This treatment makes a statement.

h4 {
  color : #cc6633;
  font : 150% impact, futura, sans-serif;
  text-transform : uppercase;
  letter-spacing : 0.3em;
  text-align : center;
}

Background Image Heading

Using background images with headings offers almost limitless options. This example is just one of the myriad possibilities. Smaller images can be repeated, or you can get creative in other ways as shown in the next example.

h4 {
  background : url(/site/post-img/headings-background.jpg) no-repeat;
  color : #cc6633;
  padding: 8px 0 18px 15px; /* top, right, bottom, left (respective) */
  margin : 25px 2px 0 2px; /* top, right, bottom, left (respective) */
}

A Worn Out Heading

This is a cool effect created by khmerang.com that utilizes an empty span as an absolutely positioned container for a background repeated on top of the text it’s relative to — the accessible Gilder/Levin method of image replacement. The splotches of color chip away a few pixels of text causing this effect. The mark-up looks like this: <h4><span></span>Text</h4>.

h4 {
  color : #cc6633;
  font : 200% impact, futura, sans-serif;
  text-transform : uppercase;
  float : left;
  overflow : hidden;
  position : relative;
  padding-left : 3px;
}

h4 span {
  background : url(/site/post-img/headings-worn.gif);
  position : absolute;
  width : 100%;
  height : 2em;
}

p {
  clear : left;
}

Embedded Image Heading

This won’t enlarge like the other image-heading examples, but it’s still a viable method of putting a heading on a page. And it is still an accessible method. The styling is extremely simple so I followed it up with the markup as well.

h4 {
  color : #cc6633;
  text-align : center;
}

h4 img {
  border : 0;
}

<h4>
 <img src="/site/post-img/headings-embedded.jpg" width="400" height="50" alt="Embedded Image Heading" />
</h4>

Coming to a Head

The examples above are the proverbial tip of the iceberg. Armed with a style sheet, some images, and an imagination, you can offer the best of all worlds: accessibility, readability, organization, and high-style, all while offering a semantic page. What more could you want?

Are headings big and black and ugly? Not any more.


10 Responses to: “A Command of Headings: Usage and Styling”

  1. Anup responds:
    Posted: February 17th, 2008 at 6:08 am

    Good post! Headings are really important as you outline. I still come across a few people who say they don’t like to use H2; they prefer H3 or something because of the size etc…

    One question for you: a while back (I don’t know if it is still the case), the RNIB used to insist that the H1 had to be a) the first heading, b) the only H1 allowed on a page.

    For different pages this may or may not make sense (Eric Meyer had a good case of using H1’s for each slide title in his S5 slide system, which was built on semantic HTML + JavaScript for the slide effects.)

    On many sites, you get the home page have the site’s name/logo in an H1. On the sub-sites (e.g. articles, blog posts etc), many continue to use H1 for the same logo/name, and H2 then becomes used as the page heading. Other sites I have seen then use two H1s. What would you suggest?

  2. David Zemens - 1955 Design responds:
    Posted: February 17th, 2008 at 8:23 am

    Thanks for the primer on the correct way to use the various heading elements, Mike. It’s easy to get sloppy and use them in the incorrect way. I agree with you that I have rarely, if ever, used h5 or h6 in my projects.

    Your suggestions on ways to style the headings are also a great reminder of the flexibility we all have with our stylesheet. Your tips always leave me with a new idea on how to approach the styling on one of my projects!

  3. Jermayn Parker responds:
    Posted: February 19th, 2008 at 1:40 am

    Just for arguments sake
    “Think parents, children, grandchildren, and so on, as the content’s organization will dictate.”

    So are you saying that the children are all single-parented? Keeping up with todays generation :P

  4. Christian responds:
    Posted: March 14th, 2008 at 11:35 am

    Good post. At my job I always wonder why I’m coming across old code that others programmed that has fake headers made by span tags with classes attached to them. Don’t these people know there’s such a thing as header tags? And I have several sites where I have drilled down to using level 6 headers, including my personal site.

  5. Max Design - standards based web design, development and training » Some links for light reading (18/3/08) responds:
    Posted: March 18th, 2008 at 5:35 am

    […] A Command of Headings: Usage and Styling […]

  6. Jordan Clark responds:
    Posted: March 20th, 2008 at 9:44 pm

    @ Mike:

    Great article… Oh, I really like your idea about combining the site name and the content title in the h1 element - what a great idea!

    I too have often agonised over the h1 “site name versus article name” dilemma, and I think your approach let’s you have the penny and the bun, so to speak.

    In future, I think I might “borrow” this technique (if that’s okay with you)!

  7. Irfanullah responds:
    Posted: April 1st, 2008 at 5:42 am

    Your Site home page allignment is problem when i use FIRE BUG just check it……

  8. Craig responds:
    Posted: April 16th, 2008 at 5:05 pm

    As a website designer, I work closely with copywriters and a few marketing consultants, the one thing that everyone of us agrees on is that “it’s all in the header”. If it’s not in the header, it’s not that important. I am always looking for ways to make unique header designs that are seo friendly. Great Article!

Sorry. Comments are closed.




Note: This is the end of the usable page. The image(s) below are preloaded for performance only.