This goes down to "h6" and indicates the level (importance) of the heading. It is always good to start with h1, and then go down, so that you won’t have a document with an h3 where there is no h2, and so on (ISO-HTML even makes this mandatory).

If you ever need more than 6 levels of headings, you’ve hit a limit in HTML. But there was another problem as well: if you have a server-side scripting language such as PHP or Python, and different modules churn out different HTML fragments, you would always need to know the level you’re in and adjust heading depth accordingly (I’m doing this with my blogging software as well, and writing posts I always need to remind myself of the current heading level I’m in). This also prevents easy copy & paste of HTML fragments which contain headings, as their level would need to be adjusted within the context of the new document. As a small additional annoyance with regular HTML headings, you’ve often found yourself repeating the document title in the h1 as well (rather redundant).

In XHTML2, on the other hand, these problems have been solved. Now there is a more general "h" element. It works like this:

<h>My Life</h>

<p>I was born in ...</p>

And if you need a deeper heading, you will wrap the content with a "section" element:

<h>My Life</h>

<section>

    <h>My childhood</h>
    <section>
        <h>My toys</h>
        <p>I had a teddy bear ...</p>

        <h>My candy</h>

    </section>

    <h>My youth</h>

    <p>...</p>

</section>

The more section elements surrounding an "h" (the deeper it is nested), the lower its importance – and the higher its "h" number in terms of old HTML (h1 has no section, h2 has one section, h3 has two sections surrounding it and so on).

Can you still access this via stylesheets? The direct "h2" or "h3" doesn’t work, naturally. What does work however is making use of cascadance:

h
{
    /* some style */
}

section h
{
    /* some more style */
}

section section h
{
    /* some more style */
}

In other words, a simple "h" gets a specific style; an "h" within a section another; an "h" within a section within a section another, and so on. As bonus, all lower elements will automatically be styled as well – the "section section h" selector covers nestings of two levels and higher.

To avoid repeating the title of a document in the h1, as is often done, XHTML 2 now allows the following:

    <h property="title">My life</h>

Comments