Published: June 15, 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.
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.
Here's what the above looks like in outline:
- 33 Beladd
- 34 Beladd
- 35 Beladd
- 1 Kylebrook
- 2 Kylebrook
- De Vescy Court
It's like Russian dolls - a larger heading cannot be placed within a smaller one.