Get that in your head: headings are hierarchical

Once upon a time, I was a web designer. I ran my own business from 2010 to 2017.

I kept saying – and drove Italian developer dudes nuts – that WordPress was like Word in terms of text editing. Of course, that is not true: WordPress is a content management system, and it lives online, but by saying that, I was making things easier for users.

The majority of end-users couldn’t care less about what’s under the hood. But for search engines and screen readers, HTML is very important.

How do you make these realities coexist?

I believe it’s our responsibility, as suppliers of web-related services, to educate users about how to use the software in a way they care. Educate and empower.

Instead of being all high and mighty and start a navel-gazing monologue about semantic HTML, I suggest we keep it simple:

  • WordPress, for its end-users, is just another way to push content into The Web. Period.
  • Each part of the content means something. So you have paragraphs for, well, paragraphs lists for lists, and images for images.
  • Headings are used for titles and subtitles. They go from 1 to 6. That order is hierarchical and it must be used like that.
  • Heading 1 rules them all. So you have only one, you know, like the one ring.
  • A user that prefers how H4 looks on screen will use that instead of the others, so make sure you tell them that headings are hierarchical and work with them, not against them, to find a font-size and font-family that they like and that you, as a professional, know it’s a good match.

When I was freelancing, I saw a website that was all written in H4s instead of paragraphs because the owner “liked it better.” Was that their fault? No.

The WordPress dashboard and other screens are littered with notifications: maybe it wouldn’t be such a bad idea to show a modal that educates users about headings? I have no clue if that is doable and it can be accessible. So in the meantime, spread the word and make it simple.

2 comments

  1. I’m not a woman, age is relative but I can absolutely relate to the grumpiness, especially when it comes to this topic. 🙂

    With your idea of notifications you got me curious so I did some research and…

    …it seems that the document outline (the i Icon top left) already does warn about invalid heading levels. But yeah, very hidden.

    Also there seems to be work on improving this further: https://github.com/WordPress/gutenberg/pull/22650

    Thought you might be interested.

  2. Notifications can be easily ignored. In my opinion the best way to avoid mistakes is to not allow them to happen at all :).

    I would make it impossible to add a heading that skips a heading level.

    E.g. when a post contains a H2 and a H3, do not allow H5’s or H6’s to be added at all. Only H2-4s. That should avoid any obviously invalid heading hierarchies.

    For hierarchies that are valid but not what a user meant I think visualizing the hierarchy could help. In a similar way as in a Google Doc, where the hierarchy is shown in the left margin. That should give the user a feel of how the document is interpreted by the browser (and search engines). It would take up some precious real estate in the editor though.

Leave a comment

Your email address will not be published. Required fields are marked *