If Heading Tags were a Nation State

I blogged about A Basic Outline of Heading Tags before, so this is just a recap, but it's happened again. I received designs from a designer with lots of notes saying what element was using what style. This is great - I love annotated designs, but many of the annotations said "this is h2; this is h4; this is h3; etc". What the designer actually meant was: "this should look like X; this should look like Y; and, this should look like Z".

Let's pretend that the heading structure for a HTML document was a nation state. Let's pretend it was Ireland. Here's what you'd have:

H1 - Heading 1 - Country - Ireland

There can only be one country of a particular name. There can only be one main heading on a page. There can only be one h1 tag. There can only be one Ireland in the United Nations.

H2 - Heading 2 - Provinces - Leinster, Connaught, etc

There can be as many provinces as you like. In Ireland, there are four. They are all at the same level.

H3 - Heading 3 - County - Galway, Laois, Dublin, Cork, etc

There can be as many counties as you like, but they must be placed within provinces. H3 must be placed inside H2; H2 cannot be placed inside H3. A province cannot be placed inside a county. All counties are at the same level within their respective province.

H4 - Heading 4 - Cities, Towns, and Villages - Dublin, Galway, Portlaoise, Portumna, etc

There can be as many cities, towns, and villages as you like, but they must be placed within a county, which must be placed within a province. A H3 cannot be placed in a H4. All cities, towns, and villages are at the same level within their county.

H5 - Heading 5 - Street, Housing Estate, Area - Main Street, Forest Glade, Parklands

There can be as many streets, estates, suburbs, etc as you want, but they must be placed within a city, town, or village. You can't place a city in a housing estate.

H6 - Heading 6 - Your House - 1 Main Street

You can have as many houses as you want, but they must be placed on a street, or in an estate, or in an area. And these streets and estates and areas must be placed within a city or town or village. You are probably getting the idea now.

An Outline

Here's what the above looks like in outline:

• Ireland
  • Leinster
    • Laois
      • Portlaoise
        • Beladd
          • 33 Beladd
          • 34 Beladd
          • 35 Beladd
          • etc
        • Kylebrook
          • 1 Kylebrook
          • 2 Kylebrook
          • etc
      • Abbeyleix
        • De Vescy Court
        • etc
    • Dublin
    • Carlow
    • Kilkenny
    • etc
  • Connaught
    • Galway
    • Mayo
    • etc
  • Ulster
  • Munster

It's like Russian dolls - a larger heading cannot be placed within a smaller one.

Filed Under:

1. Headings
2. HTML
3. Semantics