Webpage Workshop: Home » HTML » Headings


Headings 1-6. Heading 1 is displayed the biggest, and heading 6 is the smallest.Headings are an important part of any document, not only because they make a page easier to read but also because they split a page up into sections with varying degrees of importance. Think about when you read a newspaper, the bigger the headline, the more important the story is!

In HTML there are six different heading styles. Heading 1 is the most important, and heading 6 is the least important. In general, we tend only to use headings 1, 2 and 3 as most documents have little need for the other subsections. The diagram to the left shows a example of the six heading styles.

The example below shows how the diagram was produced. Note that there are no line breaks specified in the code; headings start on a new line automatically.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

As with most elements, the appearance of the heading styles can change depending on your Stylesheet. You can change the color, size and font of the heading with your CSS.

In the next tutorial we will discuss the different types of image that you can use on your webpages, and how your choice of image format can have serious effects on the quality and size of your pages.

<< Previous page | Next page >>