I’m always looking for newer and better ways to write my code. Whether its HTML or CSS, its important to continually refine your tools and procedures. I recently came across a new way to handle headings ( h1, h2, h3, etc ) and its been working out great and made it into my base skeleton. Below is what I’ve come up with:

View the Demo

Sass Code

1
2
3
4
5
6
7
8
9
10
11
12

h1,
.heading1 { margin-bottom: 20 / 36 * 1em; font-size: 36 / 16 * 1em; line-height: 42 / 36 * 1em; text-transform: none; font-weight: bold; }
h2,
.heading2 { margin-bottom: 20 / 24 * 1em; font-size: 24 / 16 * 1em; line-height: 32 / 24 * 1em; text-transform: none; font-weight: bold; }
h3,
.heading3 { margin-bottom: 10 / 18 * 1em; font-size: 18 / 16 * 1em; line-height: 24 / 18 * 1em; text-transform: none; font-weight: bold; }
h4,
.heading4 { margin-bottom: 10 / 14 * 1em; font-size: 14 / 16 * 1em; line-height: 16 / 14 * 1em; text-transform: none; font-weight: bold; }
h5,
.heading5 { margin-bottom: 10 / 12 * 1em; font-size: 12 / 16 * 1em; line-height: 1em; text-transform: none; font-weight: bold; }
h6,
.heading6 { margin-bottom: 1em; font-size: 10 / 16 * 1em; line-height: 1em; text-transform: uppercase; font-weight: normal; }

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
 
<h6 class="heading1">Heading 1</h6>
<h6 class="heading2">Heading 2</h6>
<h6 class="heading3">Heading 3</h6>
<h6 class="heading4">Heading 4</h6>
<h6 class="heading5">Heading 5</h6>
<h6 class="heading6">Heading 6</h6>

Output Image

As you can see we esstentially duplicate all the heading tags with heading classes so we can use them on other elements. Make sure you’re explicate with your styles, you can’t rely on inherited styles with this method. This adds extra markup to your stylesheet, but will ultimately save you from writing special cases down the road.

Many times on a page or in a design, large text fits the styles setup for an h2, but isn’t important to the content below. This typically occurs in sidebars or auxiliary content. Instead of watering down the heading heirarchy on the page with unimportant titles, we can use the defined classes above to give the same style as an h2. Typically when doing so, I use an h6 as the clay that gets molded, but you could just as easily use a span or a strong tag as well. Doing so will make sure your semantics are set properly and your heavy hitting SEO content isn’t being watered down by obtrusive headings from the design.

So what do you think? How do you handle semantics and headings? What sort of base styles do you give you headings?