Skip to main content

A Beginner's Guide to CSS | Part Eleven - CSS and Headings

Submitted by helen on Wednesday, July 28, 2010 - 22:14; Modified on Thursday, August 18, 2016 - 11:08

Headings add structure to your content, as well as denoting relevant sub-sections. Not only does this process make your content easier to read, but it also helps in situations where devices scan your HTML and break it up into regions of importance. Screen readers will do this (devices that that speak out the content on a website and rely on HTML being formatted correctly); to a lesser degree, so will read-only view in Safari and crawlers, such as Google.

The headings

There are six heading elements, from h1 to h6, with h1 being the most important and h6 the least important. Here are the headings, in ascending order:

h1
the overall page heading
h2
a second-level heading
h3
a third-level heading
h4
a fourth-level heading
h5
a fifth-level heading
h6
a sixth-level heading

Using headings

The title of your page should be placed within an h1 element, as this is the most important heading. Any other headings should start at h2 and cascade downwards, based on how your content is organised. It is worth mentioning that the h1 element will not make your heading appear in your navigation bar; you will need to use the title element for this, which goes in the head of the document.

As each heading denotes a decreasing level of importance, you should avoid making the font size of minor headings larger than that of more significant headings, because this can be confusing for the user.

Here is an example of a page that uses headings to breakup content and also denote the various regions on the page, such as the main content region and the sidebar.


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of headings</title>
</head>
<body>
<div id="pageContainer">
	<h1>This Page</h1>
	<p>This is a standard page that contains some text and headings. There is nothing fancy about this page.</p>
	<h2>Why visit this page?</h2>
	<p>You might want to visit this page to look at the basic markup. Or maybe not.</p>
	<h2>Questions about this page</h2>
	<p>If you are unsure of the purpose of a page, please get in touch.</p>
</div>
</body>
</html>

Headings in HTML5

Multiple h1 elements

Here, we are using the HTML5 article element to represent a page of news items and the section elements to represent news categories. There are two main categories: Top News Stories and Also in the news..., whose headings are both h1 elements. The title of each news item is surrounded by an h2 tag, as that is the next level of heading down from the h1 tag enclosing the news category titles.


<article>
<header>
<h1>News Stories</h1>
<p>All the latest news. 24/7</p>
</header>
<section id="topNews">
<h1>Top News Stories</h1>
<h2>String Theory Proven</h2>
<p>In a ground-breaking discovery, it has emerged that the fundamental building blocks of matter are, in fact, tiny vibrating strings.</p> 
<h2>Graviton Discovered</h2>
<p>The particle believed to mediate the force of gravity — known as the graviton — was discovered today.</p>
</section>
<section id="moreNews">
<h1>Also in the news...</h1>
<h2>Caffeine is addictive, say experts</h2>
<p>Huh. Go figure.</p>
</section>
</article>

This example, whilst valid, isn't recommended. I wanted to show you this so you can see that it isn't the best way to go about using headings. The reason being is that we're using three h1 elements, two of which are supposed to convey lower levels of content but, because they are h1s, they are treated as being on the same level as our page title and so the document loses structure and becomes less meaningful. This would also be bad for screen readers, who rely on the different level of headings to make sense of content. If there are multiple h1 elements within different sub-sections, this can cause issues and make content seem out of place.

If you jumped on the XHTMl bandwagon several years back, when everyone used XHTML 1.0 Strict (like me), then you will be very familiar with the practice of only using one h1 element. As long as you carry on in this fashion, you will know that you're creating web pages that screen readers and browsers alike can easily interpret.

One h1 element

Ideally, this is how you should make use of your headings: there is one h1 element for the page title and the remaining headings are nested appropriately, in an ascending fashion.


<article>
<header>
<h1>News Stories</h1>
<p>All the latest news. 24/7</p>
</header>
<section id="topNews">
<h2>Top News Stories</h2>
<h3>String Theory Proven</h3>
<p>In a ground-breaking discovery, it has emerged that the fundamental building blocks of matter are, in fact, tiny vibrating strings.</p> 
<h3>Graviton Discovered</h3>
<p>The particle believed to mediate the force of gravity — known as the graviton — was discovered today.</p>
</section>
<section id="moreNews">
<h2>Also in the news...</h2>
<h3>Caffeine is addictive, say experts</h3>
<p>Huh. Go figure.</p>
</section>
</article>

Headings in XHTML (but also valid for HTML5)

The code above would look a bit different in XHTML, as the header, section and article elements aren't used by XHTML so I have provided a version below that uses elements available to XHTML. This markup can also be validly used in HTML, it's just less semantic as it doesn't make use of the header, section and article elements.


<h1>News Stories</h1>
<div id="topNews">
<h2>Top News Stories</h2>
<h3>String Theory Proven</h3>
<p>In a ground-breaking discovery, it has emerged that the fundamental building blocks of matter are, in fact, tiny vibrating strings.</p> 
<h3>Graviton Discovered</h3>
<p>The particle believed to mediate the force of gravity — known as the graviton — was discovered today.</p>
</div>
<div id="moreNews">
<h2>Also in the news...</h2>
<h3>Caffeine is addictive, say experts</h3>
<p>Huh. Go figure.</p>
</div>

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 how the headings look, 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>
<h5>This is a fifth-level heading</h5>
<h6>This is a sixth-level heading</h6>

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

This is a fifth-level heading
This is a sixth-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;
  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

How do I know when to make something a heading?

I've seen a few examples whereby pieces of text that should be headings were surrounded by strong tags because the content author wanted to make the text represent the content below it but didn't know how. If you find yourself wanting to split your content up and provide a heading above it, then you should use an appropriate heading element, through (likely) h2 to h6.