Published: Fri 15 Jun 2018

If Heading Tags were a Nation State

Over and over again, I get designers telling me "this is a h4, and the following text is a h3". You cannot place a h3 inside a h4. Let's nation-build.

If Heading Tags were a Nation

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.

If you like what I write, you might like to follow me on Twitter @markconroy

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.