• Hi!

    I’m trying to understand how to use headings on my sites. Over 15 years or so I’ve never had a consistent style. I love the new theme but I can’t figure out a consistent concept here either. Found this documentation

    https://make.www.ads-software.com/docs/style-guide/formatting/headings/

    but it doesn’t address the topic. With that, using twenty twenty three:

    1. How are h1, h2, etc. used? Obviously the number indicates sub (sub (sub))) but where do you start?
    2. Using developer tools, a blog post title seems to be h2. Is this always the case?
    3. Then, all main headings with in a blog post should probably be h3? A bit weird given that to me as the author it feels like it should be h1.
    4. Is the use of this consistent across themes or do other themes structure headings differently? (Asking only for automattic themes.)
    5. If the post title is h2, what is h1 used for?
    6. Are there tools to make a site consistent with respect to this? Different posts over time used different patterns.

    Thank you!

    Dirk

Viewing 3 replies - 1 through 3 (of 3 total)
  • I don’t know what your background is, but try to think of a website as an article. Maybe an article that describes a recipe for a cake.

    This article has a main title and several sections that subdivide the text thematically. The main title is the h1. This is the top heading of the currently viewed page. It specifies the topic. For example, in the case of a recipe for a cake, “Apple pie”. The first subsections are then labeled as h2. E.g. “Ingredients” and “Procedure”. If there are sub-headings underneath, then these are h3-headings.

    In this way, a text is subdivided by content. This is primarily necessary for the reader, but nowadays it also plays an important role for search engines. The h1 must define the topic of the page. You should not write about “wordpress plugins” in a title “apple pie” in the text then – this is counterproductive, confuses not only the human readers but also the bots that try to interpret the text for the search engine index.

    If you have pages without h1, you should change it. How to change it sometimes depends on the theme you use. Often you can set it somewhere, sometimes you can overload it with a child theme. Check the help of the theme you are using or ask their support. How you then build the content is absolutely up to you.

    By the way, the appearance of the headlines is not important. An h1 can be smaller than an h2, even if it might confuse your human visitor. This is completely up to you. The semantic labeling of the headings is important, as I said.

    Thread Starter dirkriehle

    (@dirkriehle)

    Thank you for sharing your approach.

    I really would like to understand though what the theme writers had in mind. (And whether there is some consistency across themes.)

    Looking at twenty twenty three HTML tags translate this way

    • title -> blog post or page title as entered through WP
    • h1 -> site title (hence fixed across all posts / pages)
    • h2 -> blog post or page title, same as title
    • h3 not used, this is what I can choose then

    This does not match your description. Are you sure about your allocation of headings to meaning? Or did I make a mistake digging through the HTML of a page?

    Assuming there is value in the HTML tags, as an author, I should never use h1 or h2 as this is used by WP, and start my own headings with h3.

    I have described this theoretically optimal according to the standardized specifications of the W3C for HTML. Unfortunately, some themes may not follow this and do their own thing. If you have questions about TwentyTwentyThree, you can also contact their support forum: https://www.ads-software.com/support/theme/twentytwentythree/ – but you can always adapt the templates to your own needs and wishes, which is now particularly easy with FSE themes like TwentyTwentyThree compared to the past.

    By the way, the basics for HTML headings are described in the W3C guidelines and are not my doing: https://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html#headings-and-sections

    By the way, the correct order also plays a role for accessibility: https://www.w3.org/WAI/tutorials/page-structure/headings/

    Starting with a h3 destroys the basic structure and makes it difficult to read your page accessibly. I would advise against it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Headings concept?’ is closed to new replies.