HTML Headings

Headings and sub-headings are a great way to split sections of text up within a web page. They help to break up large bodies of text, making them easier to read and allowing the user to see at a glance the different areas within the web page.

There are six HTML heading tags - <h1> to <h6> - with <h1> being the largest and most important, and <h6> being the smallest and least important. When I talk about their 'importance' I mean it in a literal sense - when search engines visit web pages, they not only look at what text is written on the web page, but also what HTML tags surround different sections. The search engines use these tags to identify the bits of the web page that are most important. The main heading, <h1>, is considered to be a very important part of the page, and so extra emphasis is given to it that to a heading with an <h2> tag. In turn <h2> is considered more important than <h3> and so on.

For this reason it is a good idea to use the heading HTML tags in order - use <h1> for your main page title, <h2> for any headings within the page, <h3> for any page sub-headings and so on. Chances are you won't ever need more than <h2> or <h3>, but it is nice to know that you have six heading tags available to you if you need them.

One thing worth noting is that you are only allowed one <h1> tag in each web page - this is reserved for the main page heading and should not be used anywhere else. However, you can use tags <h2> to <h6> as many times as you like.

HTML heading tags work in the same way as most other tags - with an opening and closing pair, for example <h1> and </h1>. Try out the following code to get an idea of how heading tags work:

<html>
<head>
<title>HTML heading tags</title>
</head>

<body>

<h1>This is heading one, the main page title</h1>

<h2>This is a page sub-heading</h2>

<p>We can put some paragraph text in here</p>

<h2>This is another h2 sub-heading</h2>

<h3>We can even include an h3 sub-heading within the h2</h3>

<p>And put some more paragraph text in</p>

</body>
</html>

Note that when you use a heading tag it forces a line break.

By default, HTML heading tags display larger as their importance increases. However, we can change their appearance to whatever we want; for example we could make <h2> text appear the same as the rest of the body text only bold, or orange, if we wanted. This will be covered later in the CSS guide.