HTML <h...> tag

written Sept 2000 being revised May 2006

1 HTML Heading Tags and CSS

Firstly, some simple headings. If you are used to using only one browser, say Netscape and not IE, or IE and not Netscape, you may be surprised to find such big differences in how browsers interpret HTML and how these differences effect the impact your HTML has on the page.

Firstly the simple header tag. Here are the six header elements:

h1 Header

h2 Header

h3 Header

h4 Header

h5 Header

h6 Header

Hopefully no surprises here, but you might notice that some browsers only have 3 real levels of heading.

Now let us compare these with some that are adjusted:

<h1>h1 Header</h1>
h1 Header
h2 Header
h3 Header
h4 Header
h5 Header
h6 Header
<font size=+1><h1>h1 Header</h1></font>
h1 Header
h2 Header
h3 Header
h4 Header
h5 Header
h6 Header
<h1><font size=+1>h1 Header</font></h1>
h1 Header
h2 Header
h3 Header
h4 Header
h5 Header
h6 Header
<h1 style='font-size larger;' >h1 Header</h1>
h1 Header
h2 Header
h3 Header
h4 Header
h5 Header
h6 Header

OK, so that did not do what one might have expected. If you want to dress up your header in any way you should use the style attributes with the CSS specifications suitable for a heading. CSS offers border specifications (border-width , border-style, border-color), and also background specifications (background) and text colour (color).

Here is a first simple use of 'style':

<h1 style='border-width: 4;'>h1 Header</h1>

h1 Header

IE does not interpret style attributes in tags, you ask? The answer is not that simple. IE's rendering is in fact correct to the standard because the default border-style ought to be 'none'. Netscape 6 also conforms to the standard. If you designed your webpage using Netscape you might assume there would be a border showing on other browsers, but not so! So let us add a border-style of say double (for which a border-width of at least 3 is required).

<h1 style='border-width: 4; border-style: double;'>h1 Header</h1>

h1 Header

Now we can note three differences, the weight of the border, the padding of the text within the border, and the size of the box allocated to the header. IE gives a heavy formal impression suitable for a textbook, while the Netscape rendering is more immediately acceptable for general documents. Netscape 6 also looks the same as IE, conforming to the notion that headings occupy their whole line. Both needs to have their padding adjusted in any event. But now the question arises - is it even possible to get a header with a border that looks roughly the same on all browsers?

<h1 style='width: 50%; border-width: 4; border-style: double;'>h1 Header</h1>

h1 Header

The simple answer appears to be No! The width attribute confuses Netscape 4.7. The only attributes that can be assumed to be rendered consistently are text colour (color) and font attributes. Even within fonts only three of the five generic families produce reliable results. 'serif' maps to 'Times', 'sans-serif' maps to 'Helvetica', and 'monospace' maps to 'Courier'. The generic families, cursive and fantasy, do not map to anything reliably. Other font families that are popular and usually available are Arial and Verdana, which are both sans-serif type fonts. So we can safely use something like:

<h1 style='font-family: verdana, sans-serif;  font-style: italic; 
          color: red; text-decoration: underline;'>h1 Header</h1>

h1 Header

You have probably seen enough in this small exposition to appreciate the problems involved in writing HTML which will look like what you intend on different browsers (user agents). www.w3.org which develops the standards for HTML and CSS have a Test Suite which you can check out on your browsers. Microsoft claim to have implemented IE to be conformant to CSS1 to a large degree, however a check of the horizontal formatting test reveals that even this implementation is seriously flawed to the point that it determinedly produced wrong results. In the first test sample on this page the paragraph does not line up with the image template. This is because the Microsoft programmers has misread the specification and made the 'width' attribute span the content, padding and border areas. But according to the definition, 'width' refers to the width of the content only. However, view the same test using Netscape and you may wonder why you bother learning about Style Sheets.

To use borders and backgrounds in reliable ways in headings we must instead use the <table> element combined with the <div> element to align the table. Note that Netscape 6 uses a font scale that is smaller and looks a little more compact than IE and Netscape 4.7.

h1 Header

<div style='text-align: left'>
<table cellspacing=0 cellpadding=0 ><tr>
<td><p style='border-width: 4; border-color: red; border-style: ridge; 
         font-size: x-large; font-weight: bold; padding: 2 8 2 8; color: green'>h1 Header</p>
</td></tr></table>
</div>

Here is a centre-aligned version, but with a background colour added. The IE version is correct in this case, the background is defined to cover the area of the border, padding and content, excluding only the transparent margin. Netscape 4.7 applies the background only to the padding and content area and even then leaves a small gap. Netscape 6 corrects this error.

h1 Header

<div style='text-align: center'>
<table cellspacing=0 cellpadding=0><tr>
<td><p style='border-width: 6; border-color: red; border-style: double; 
          font-size: x-large; font-weight: bold; padding: 2 8 2 8; color: blue; 
          background-color: yellow; ' >h1 Header</p>
</td></tr></table>
</div>

Here is a right-aligned heading with an image background:

h1 Header

<div style='text-align: right'>
<table cellspacing=0 cellpadding=0><tr>
<td><p style='border-width: 8; border-color: red; border-style: groove; 
         font-size: x-large; font-weight: bold; padding: 2 8 2 8;  
         background: url(Cottcndy.jpg)  pink;  '>h1 Header</p></td></tr></table>
</div>

Shadow for headings is a nice effect and it is part of the CSS2 specification, but commonly used browsers dont implement it. Since even Netscape 6 is not implementing this attribute, it is safe to assume that this effect will have to be acheived some other way for a while yet. It can be fudged to some extent by using absolute positioning within a box which has relative position.

Shadow Heading

<div style='position: relative'>
<div style='position: absolute; top: 3; left: 3; font-size: x-large; 
          font-weight: bold; color: silver;'>Shadow Heading</div>
<div style='position: absolute; top: 0; left: 0; font-size: x-large; 
          font-weight: bold; '>Shadow Heading</div>
</div>

This makes use of the position attribute which was added as an extension to CSS1, and which was developed in CSS2. When a tag is given a position attribute it is considered to be a positioned block. Blocks with absolute positions are positioined with respect to their immediately enclosing block which has a position attribute, or the whole page by default. IE has implemented this to some extent but does not properly manage the space used. Netscape 4.7x has a bug in its handling of positioned blocks which means that seperate uses of this code wont work. Netscape 6 does work.

In this example the position attributes for the black heading are the default attributes. You might think you can leave them out, but then they get processed first and the 'silver shadow' ends up on top. This fudge of text-shadow does not provide for the blur effect which is described in CSS2.

One might expect that using <div style='position: relative; text-align: center'> would center the shadow heading, but not so. To do this reliably it must be set inside a centered table, just as for the border headings shown above.

Exercise

Write a Tcl procedure HTML::heading that produces plain, boxed and/or shadowed headings for h1 to h6. Its parameters may be expressed in HTML or CSS terms but the procedure produces reliably robust HTML that will look as good as possible.

©2000 - 2006 WEBSCOOL This page last updated 20 May 2006. All rights reserved - including copying or distribution of any portion of this document in any form or on any medium without authorisation. For more regarding the copyright.