Headings are very important on a web page as they split a page up into relevant sections, making it easier to read. They also denote individual areas on a page, helping a user find their way around. Without headings, a page is rather boring and meaningless.

The headings

There are several heading tags, starting at h1 and working their way down, through the various sub-headings. For example:

• h1 - the page heading — there is always only one of these on a page
• h2 - a second-level, small sub-heading
• h3 - a third-level, smaller sub-heading
• h4 - a third-level, even smaller sub-heading

And so on.

The order of headings

It is best practice for your headings to start big and gradually become smaller. Although you may prefer a big h1, then smaller sub-heading all in the same font size but different styles. The reason that you should avoid making say, your h1 smaller than your h2, or your h2 smaller than your h3 is because the top-level headings are never supposed to be smaller than lower-level headings; it defies the purpose of using headings in the first place. So do what you want, but don't make your higher-level headings smaller than your lower-level headings.

Styling headings

To target a heading in CSS, you use the type selector that corresponds to the heading you want to style. For example, to style an h1 tag, you would do the following:

Style up an h1 tag

CSS Code:

        	h1 {
            	...insert styles here...
            }
        

Plain Headings

Here are the headings without any styles applied to them.

(X)HTML Code:

        	<h1>This is a top-level heading</h1>
        	<h2>This is a second-level heading</h2>
        	<h3>This is a third-level heading</h3>
        	<h4>This is a fourth-level heading</h4>
        

Result:

This is a top-level heading

This is a second-level heading

This is a third-level heading

This is a fourth-level heading

Alternative headings

Here are some alternative styles for headings, which use various CSS properties to emphasise each heading, rather than font-size — although, as expected, the h1 is bigger than the other headings.

CSS Code:

       	h1.exTwo {
            font:180% Verdana, Geneva, sans-serif;
            color:#396;
            font-weight:bold;
            border-bottom:1px dotted #66F;
        }
        
        h2.exTwo {
            text-transform:uppercase;
            color:#606;           
            border-bottom:1px solid #639;
            font:130% Verdana, Geneva, sans-serif;
        }
        
        h3.exTwo {
            font-weight:bold;
            font:130% Verdana, Geneva, sans-serif;
            background-color:#603;
            color:#3F6;
            padding:6px;
 		}
        
        h4.exTwo {
            font:130% Verdana, Geneva, sans-serif !Important;
            text-transform:lowercase;
            color:#009;	
        }
        

(X)HTML Code:

        <h1 class="exTwo">This is a top-level heading</h1>
        <h2 class="exTwo">This is a second-level heading</h2>
        <h3 class="exTwo">This is a third-level heading</h3>
        <h4 class="exTwo">This is a fourth-level heading</h4>
        

Result:

This is a top-level heading

This is a second-level heading

This is a third-level heading

This is a fourth-level heading

When to use headings

It's normally obvious what needs to be a heading: a heading is a brief piece of text that describes something on a page, be it text, a list, some images, sections in navigation, different parts of a page, etc.

When you're using headings to denote different sections of a page, you may have an h2 tag for each section, and then several h3 tags to further split up the content in these sections. You may even need an h4 if you have, say, an image or a list within the area marked by the h3 tag that needs to be labelled.

As noted above, you can only have one h1 on a page, followed by sub-headings in an ascending fashion, (h1, h2, h3 etc), or (h1, h2,h3, h3,h2, h3 etc), and there can be no other headings above the h1.