Heading Tags in XHTML

Explanation

There are six, descending levels of headings in XHTML 1.0 (just as there are in HTML 4.01 and 5.0).

<h1> ... </h1>
<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6>

We use them to create headings and sub-headings in the body of our documents:

• The first level, <h1>, defines and encloses the main heading in the body of the document.
• The descending levels define and enclose the sub-headings in logical order.

We can use as few or as many as we need:

• It is possible to use only the first level, <h1>, if the document does not require any more.
• It is possible to use two or three levels or all six levels in a page.
• It depends on the contents of the document.

We can repeat a level:

• We can use the same level more than once in a document.
• It is possible, on the other hand, never to repeat the same level of heading in a page.
• All depends on the contents of a page.

Example

Three levels are used in this document, our current web-page, as follows.

See how they create an outline of the page contents.

• <h1>Heading Tags in XHTML</h1>
  • <h2>Purpose</h2>
    • <h3>Explanation</h3>
    • <h3>Example</h3>
  • <h2>Misuse</h2>
  • <h2>Importance</h2>
    • <h3>Robust Structure</h3>
    • <h3>Specialized Devices</h3>
      • <h4>Text-only Browsers</h4>
      • <h4>Speaking Browsers</h4>
    • <h3>Popular Browsers of the Near Future</h3>
    • <h3>Search Engine Robots Today</h3>
  • <h2>Creativity with CSS</h2>
    • <h3>Explanation</h3>
    • <h3>Examples</h3>
  • <h2>Validate</h2>

Novices tend to select a heading tag because of its size instead of its purpose.

For instance, a novice might select the third-level heading tag <h3> to create the top heading of a page (instead of using the first-level heading tag <h1> for this purpose), because the third-level looks nice at its default 14-point size.

The novice is not aware yet about the purpose of the heading tags. Nor does the novice know enough yet about CSS, which can change the appearance of the tags.

The correct use of the heading tags is important for:

• Robust Structure:

  Our documents become well formed through our proper use of the header tags, as they represent the documents' structure and contents. That may be enough, the satisfiction of knowing that our construction is solid; but let's look at some further advantages.

• Specialized Browsers:

  • Text-only browsers

    People using a text-only browsers, and a significant number of people do, can see the underlying structure of a document when the heading tags are placed properly in our web-pages.

  • Speaking browsers

    Likewise, people using speaking -browsers (speech-synthesizers) can hear the structure as the heading tags are pronounced in certain ways to identify them as heading.

    Furthermore, some speaking -browsers already allow people to scan through a document by jumping from heading to heading.

• Popular Graphical Browsers of the Near Future:

  Popular graphical browsers may soon offer their users the option to scan through the headings of a web-page. They may even allow the page divisions to collapse under the headings, so that only the headings show in sequence as a list from which a viewer may choose.

• Search Engine Robots Today:

  Headings contain words of particular relevance in a document (keywords), or they ought to. Search engine robots, or spiders, may seek out the heading tags in a document and give special weight to the words in headings as the spiders process the web-pages for the search engines.

  When we construct our header tags properly, we help the spiders to focus on our little piece of meat in the vast web.

  However, a misuse of header tags might upset a spider. The misuse might even appear to be abuse, spamming, and might anger a spider.

  So, let's use header tags properly.

Explanation

We can change the appearance of the headings with CSS.

• We can make them larger or smaller.
• We can decorate them and make them colorful.
• Yes, we can adjust the headings with CSS for appearance sake. The underlying structure of the headers remains proper, correct, nevertheless.

Examples.

The W3C will check your work to help you.

Just do this:

1. Go to the W3C Markup Validation Service.
2. Choose "More Options".
3. Select "Show Outline".
4. Submit your web-page — and click to "Check".
5. Then in parse results, find the "Outline".

   There, the validator will have reproduced the sequence of your heading tags.

   The validator will alert you if you have omitted a level or otherwise confused the sequence of these tags.

Notice: XHTML validation first!

• The validator will not produce an outline of heading tags until your XHTML is valid.

  Yes, you must validate your XHTML first, correcting its errors until it is errorless through the validator. Only then will the validator produce the outline of your header tags.

• Help.
  • XHTML Validator.
  • XHTML Specs Part 1.
  • Validation Exercises Part 1.
  • XHTML Specs Part 2.
  • Validation Exercises Part 2.