Headings

Headings are block-level elements, ranging in size from h1 (the largest) down to h6 (the smallest).

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading

Writing a heading is easy. The examples above were written like this.

<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>

Note that a heading is a block-level element, so that the default behaviour is to expand to fill the horizontal space available. Here is another example with some background colour added.

Some random heading

Headings define the start of a section or sub section of a page. As such you need to respect the order they appear on the page. This page (the one you are reading) is an exception, as we are describing how to do it!

It is important to remember that while you can technically make any text look like a heading, the heading tag itself has special meaning.

The h1 tag is a special case even amongst other headings. You should only ever use one such tag per page, as it describes the page heading. Again this page (the one you are reading) is an exception for obvious reasons.

Underneath the h1 tag comes h2. Hot on the heals of h2 is h3 and so on. You can see what we mean in the example below. Border have been added for clarity.

h1 page heading

Some introductory text may go here.

h2 sub heading

Some content goes here.

h3 sub heading

Some detailed content goes here.

h2 sub heading

Some content goes here.

h3 sub heading

Some detailed content goes here.

h3 sub heading

Some detailed content goes here.

Search engines look for clearly defined sections to a page, to help them understand what a page is about. If you respect the proper order of headings you will be helping the search engines to index your pages appropriately and serve them up in search results.

If you break the order in any way, you risk the search engines ‘getting it wrong’.

Comments

Leave a Comment

Your email address will not be published. Required fields are marked *

Loading Disqus Comments ...