Heading Tags

Page headings are created with the <hn> tag, in which n is a number between 1 and 5. For example:

<h1>Heading</h1>

Unless otherwise specified, headings are displayed using a larger size of the default font. There are five levels of heading, each using a slightly smaller font size. The range of headings usually look something like this:

Using these variations, we can create a page with headings and sub-headings like so:

Heading tags can have many of the same attributes as paragraph tags, for example:

<h1 align="center">Main Heading</h1>

Why Use Heading Tags?

You may be wondering why heading tags are necessary at all since you could achieve the same effect by specifying a larger font or defining a css class. The main reasons are:

1. Heading tags will be recognised by browsers which don't recognise style sheets (or use a user-defined style sheet).
2. Heading tags are used by search engines to identify words which are more important than the rest of the page text. The theory is that headings will sum up the topic of the page, so they are counted as important keywords.
3. Screen readers and magnifiers (for the visually impaired) rely on headings to navigate the page.
4. Heading tags make it easy to make global changes to headings. Although you could theoretically achieve this by defining a new css class, it makes more sense and tends to be easier to define a style for heading tags.

Note: You may find that the default styles aren't exactly what you need. In particular, the default sizes can be quite large. You might like to define your heading styles using css.