topic title

Headings are a small, close family of six tags. They are block-level tags, so text within them is formatted with blank space before and afterwards. Heading tags are numbered from 1 to 6, with 1 being the largest, and 6 the smallest: indeed, heading styles 5 and 6 are often rendered smaller than normal text! Though the number looks like an attribute, it isn't: therefore, being part of the tag name, the number should also appear in the closing tag.

Follow this link for a representation of all 6 heading styles. The reason I have made this a separate page is in order to show you how your browser will render each tag in its default configuration. Throughout this site, as previously mentioned, the heading styles in use (H1 through to h4) have been redefined through the style sheet, in ways we've already explored (as it's the same way you define the <P> tag).

The four heading types mentioned are therefore defined in the style sheet as follows; see if you can work out which of these definitions correspond to particular heading styles on the actual page you're reading. (The only one missing from this page is <h4> - there are examples of it on the page, how text is handled, if you're interested.)

h1   {   color: #006600;
         background-color: #ffffff;
         font-family: Garamond, Times New Roman, serif;
         font-size: 24pt;
         font-weight: bold;
         margin-left: 60px;}

h2   {  color: #006600;
        background-color: #e5ffe5;
        font-family: Garamond, Times New Roman, serif;
        font-size: 20pt;
        font-weight: bold;
        text-decoration: underline;
        font-style: italic;}

h3   {  color: #006600;
        background-color: #90ee90;
        font-family: Garamond, Times New Roman, serif;
        font-size: 12pt;
        font-weight: bold;}

h4   {  color: #006600;
        background-color: #e5ffe5;
        font-family: Garamond, Times New Roman, serif;
        font-size: 14pt;
        font-weight: bold;
        text-decoration: underline;}

Incidentally, defining absolute rather than relative sizes is less of a no-no with headings than it is with normal text. You will generally not have long passages of text within these tags, and on the whole the text within them will be larger anyway.

Headings can also take the ALIGN attribute. The default is left. Or do it in the style sheet with the text-align property.

One final note: don't confuse headings with page titles. Titles appear in the blue bar at the top of the screen. Headings appear in the main browser window, being part of the page body. You can put headings anywhere you like, as well - you are not restricted to having them only at the top of text, or used as headings for subsections (though that's how I've used them on this site). Note also that the search engine Google will give a higher ranking to words found in heading tags.

On the other hand if you think this a good reason to make all your text into headings, please don't! Proper headings give a page structure, and some of the more sophisticated browsers can make proper use of them: in Opera, for instance, you can type S to skip to the next heading, and W to skip back one. Used properly and well, therefore, headings can provide both visual and structural depth to your page.

Back to the top

Back to the menu for lesson 2