HTML Headings

HTML headings, h# serve the same purpose as the heading styles available in wordprocessors. In using headings we cross the boundary between semantics and presentation that is generally imposed by using CSS to define the presentational aspects of a webpage. This happens every so often in HTML because of continued support for markup features that have been retained from the early days of HTML. Nevertheless, you should use the HTML heading styles - it is possible that search engine spiders assign extra weightage to text found in a <h#>...</h#> pair when ranking webpages. Quite apart from this, using headings will make webpages more accessible to blind or partially sighted viewers who use screen readers or other aids.

There are six predefined heading styles, h1..h6. As in a Word document it is best to begin at h1 and work your way downwards. Although browsers have an intrinsic definition for heading styles it is best to style headings to deliver a look and feel that is more consistent with the rest of the webpage. There are no attributes specific to headings. However, they do share a number of attributes in common with other HTML elements.

• The class attribute is discussed here. One can locally alter some aspects of the assigned style by defining an inline style using the code style="color:...". Needless to say, only those style attributes that require altering/adding need to be specified.
• The id attribute is discussed here.
• The events available across all three browsers - Firefox, Opera and IE - are discussed here.
• The style attribute is used to assign inline CSS styling information to the element. The specification takes the form style="color:...". Inline styling should be used sparingly to temporarily override CSS attributes inherited from a class specification.

The borders, margins and padding of heading elements - as indeed, most other style attributes - can be changed using CSS. However, there is rarely any good reason for doing so.

In a large HTML document with multiple headings you should consider using internal links to facilitate navigation between different parts of the page.