Search this site...

XHTML Headings

Creating headings in XHTML is the same as in HTML. Headings, in general, are used organize information in logical hierarchy. With headings, you can break up large chunk of text of information and similarly announce to the readers the topics that follow. XHTML, like HTML, has six levels of headings. The six levels of headings are numbered from 1 through 6, where <h1> signifies the most importance and h6 signifies least importance. Most browsers render h1 in larger and/or bolder font than normal text. Conversely, h6 is rendered in smallest and/or bold font than normal text. These heading levels convey the logical meaning about a particular part of the web document. The physical structure (or characteristics such as color, font size, font-type, and so on) can be specified in a Cascaded Style Sheet (CSS).

The followings shows the code for creating six different levels of headings:

<h1>First level heading with h1</h1>
<h2>Second level heading with h2</h2>
<h3>Third level heading with h3</h3>
<h4>Fourth level heading with h4</h4>
<h5>Fifth level heading with h5</h5>
<h6>Sixth level heading with h6</h6>

The followings shows the headings created with the above code:

First level heading with h1

Second level heading with h2

Third level heading with h3

Fourth level heading with h4

Fifth level heading with h5
Sixth level heading with h6

It is possible that you may always need all these headings for all of your XHTML documents. Generally speaking, first level heading is probably the most used for the main heading of a web page document. A typical document may have two or three heading levels. More headings a document has, more difficult it becomes for readers of that document to keep track of the hierarchy of the document. If you have too many heading levels in use for a particular web document, you may consider dividing that document into multiple documents or reorganize the document content to clarify its organization or hierarchy. As mentioned earlier, headings should be used for emphasizing headings or for announcing topics that follow on the page but not, for example, for graphic captions or emphasizing other information within text.


Aligning headings

By default, headings are left-aligned as you may have already noticed. However, this can be easily changed using the align attribute or using style sheet specification. If you decide to use the align attribute, make sure your document is using the transitional version of XHTML (or HTML).

The following shows the four possibilities of alignment of headings using the align attribute:

<h5 align="left">Heading aligned left</h5>
<h5 align="center">Heading aligned center</h5>
<h5 align="right">Heading aligned right</h5>
<h5 align="justify">Heading aligned justify</h5>

The following shows the output of the above alignment code:

Heading aligned left
Heading aligned center
Heading aligned right
Heading aligned justify

In the following example, we use CSS to control the alignment of the headings:

<style type="text/css">
h1.left {text-align:left;} {text-align:center;}
h1.right {text-align:right;}
h1.justify {text-align:justify;}

Remember this CSS specification must be placed between the <head> and </head> elements. Inside the body structure of the document, simply replace align with the keyword class as shown here:

<h5 class="left">Heading aligned left</h5>
<h5 class="center">Heading aligned center</h5>
<h5 class="right">Heading aligned right</h5>
<h5 class="justify">Heading aligned justify</h5>

The output of this code is same as shown for the above example.