The Ultimate Guide to Using WordPress Headings Throughout Your Website

Posted on January 30, 2018 by in Resources | 34 comments

The Ultimate Guide to Using WordPress Headings Throughout Your Website

Headings are easily one of the most important and most misunderstood features of a website. For most people, they’re just ways to break up their content. Instead of having walls of text and paragraph after paragraph of content, WordPress headings allow you to create chunks of content that give your readers easy breaks.

But that’s just the tip of the iceberg, really. There’s a lot more to using headings properly than just spacing out your content.

Headings All the Way Down

HTML headings are used with flags that range from H1 (representing the primary–and usually largest–heading of the page) all the way down to the almost-never-used H6.

When I first started to freelance as a web developer, one of my buddies gave me the skeleton CSS file he used as a base for every single site he built. At the very top were style for, you guessed it, headings 1-6.

h1, h2, h3, h4, h5, h6 {
    font-family: "PT Sans", arial, sans-serif;   
    color:  #000000;
}

h1 {
    font-size: 34px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 40px 0px;
}

h2 {
    font-size: 32px;
    line-height: 35px;
}

h3 {
    font-size: 24px;
    line-height: 32px;
}

h4 {
    font-size: 24px;
    line-height: 28px;
}

h5 {
    font-size: 10px;
    font-weight: normal;
    line-height: 16px;
}

h6 {
}

I bring this up for three reasons:

  • So you can steal it and have an easy time of styling yours
  • So you can see how unimportant H5 and H6 tend to be
  • And so that you can get an idea of the general WordPress headings heirarchy

You can play around with that and make sure that each of your headings is as pretty and perfect as you need them to be. Window dressing aside, the real important thing is how you make use of the headings.

H1, the Head Honcho

Remember in the movie Highlander where they constantly emphasize that “there can be only one!”? Well, that’s kind of the thing here, too. You can only use a single instance of H1 on each particular page or post.

Generally speaking, WordPress wraps your page/post title in H1 flags, so this isn’t really something you need to worry about adding yourself. (Divi doesn’t change this functionality, but some themes might, so keep that in mind.) You just need to not add them yourself.

There has been some waffling about this, too, as you can technically use H1 when you flag something as a new section, but search engines tend not to care, and the same aesthetic effect can be had by styling your H4-H6 to look like your H1.

You can read more about the head honcho heading in our total overview.

H2, the Work Horse

My fingers type out H2 flags on a daily basis more than probably anything else. These tend to be the WordPress heading that gets used most often because of how versatile it is. It’s not limited like H1 is, you can really break apart your content to make it easily scannable, and there are enough subheadings that you can nest any number of topics underneath it without fear of breaking the flow of your content.

Most of the headings that break apart the sections in this post, for instance, are H2. You can see the difference in the post title and the headings really easily. Like I said…H2 is the work horse of the headings, and it’s likely to become your new BFF as you start to up your WordPress headings game.

H3, the Sidekick

Think about H3 as the Robin to H2’s Batman. It’s always there when you need that little extra oomph to get you out of trouble or handle a tough situation.

Generally, H3 is a totally optional heading to include. Many posts I write don’t involve them at all, but when I need to really go in-depth for a topic (or multiple topics), using the tertiary heading gives me a lot of control on how I can present my information.

See? H3 Makes Subtopics!

I tend to think of H3 in much the same way as I do an unordered list (UL in HTML), only I can supplement them with paragraphs of detail that look a lot nicer and are easier to read.

If I were to have done this with a list, it would have looked pretty wacky. And there wasn’t enough extra information to include it as a major point in the overall discussion. Fancy, right?

H4 – H6, the Forgotten Ones

Aww, poor little H4, H5, and H6. You’re such good headings that want to be used so much, but most people don’t know how or have reason to use you at all. So you get forgotten by most designers and writers.

I mean, most CSS files don’t even include you in styling. (As you can see in my example above, there’s a placeholder spot for H6, but it’s empty. Cue sad trombone noise.

From what Moz and other SEO folks tell us, the use of these minor headings are totally and completely optional. Including or not including them shouldn’t hurt your web rankings (or help them, honestly). Like I said under H1, these WordPress headings are great for styling and CSS experimentation.

WordPress Headings and SEO

First off, if you’re not using the Yoast SEO plugin, you should be. With that out of the way, the use of headings are a major player in how well you rank for organic searches.

That’s not to say you should use them for keyword stuffing, but if you want the search engine crawlers to easily parse your site, then making sure your keyword is in the most easily searchable part is a pretty smart move. You just don’t want it in every heading.

Take a look at these guidelines that Yoast gives you for headings to see some of what it’s looking for, and how much weight it puts on each element.

wordpress headings h1 to h6

The focus keyword appears only in 1 (out of 7) subheadings in your copy. Try to use it in at least one more subheading

Even though the keyword has been used once, the number of subheadings means that it’s percentage needs to be higher for it to really rank. So I would want to probably add the keyword in the concluding header to make sure I keep to best practices, despite being given the green light by the plugin.

But as you can see, it’s already green, so as long as you use it in a heading (preferably H2), you’re okay.

The SEO title is wider than the viewable limit

Basically, length plays a big part in headings, too. You want them to be seen in their entirety by not just the search engine crawlers, but by the real-life human beings doing the searches. So if your SEO title (generally your H1) is too wordy, folks may not see what your whole topic, and they’ll scoot on by.

That’s why it’s orange. It’s not bad to have this too long, but it ain’t necessarily a good thing, either.

1 subheading is followed by more than the recommended maximum of 300 words. Try to insert another subheading

Now, to be fair, this is in the Yoast readability analysis not the SEO, but it’s still mega important.

Why? Because of being scannable. There’s a reason there are memes everywhere on the internet about walls of text and why folks who talk a lot constantly include a TLDR snippet in their posts on Reddit.

People need digestible chunks of information, and 300 words is the high end of that limit. That’s not saying that those 300 words have to be dumbed down or overly simple, but it means you need to be able to break your ideas down to their constituent parts and discuss them individually…between H2 or H3 headings, preferably.

Oh, and One More Thing

See what I did there? I used H3 tags to break down those points for you so that I could discuss each of them more. Initially, I wrote out shorter, bulleted list. But I knew I needed to break down the info more, and went to using subheadings. Practicing what I preach and all that, I guess.

Additionally, the only required headings are H1 and H2. Well, even H2 is only recommended because 300 words is the minimum for being considered worthy of inclusion in Googles ranks these days. But you’re going to want to write more than that.

So you gotta use both. Remember that H1 is added automatically by WordPress.

So…How About Them WordPress Headings?

Eventually, appropriate use of headings should come naturally to you as a web content creator. You’ll find your voice, get your flow, and learn how to break down the content you’re writing into chunks. I won’t lie–it can be pretty tough to get the hang of.

But when you do, your articles will shine, both for your readers and for the machines that scan over them.

TLDR: No H1 because it’s already there, bunches of H2, some H3 to get yourself out of tight spots, and H4-H6 when you need to pretty something up.

What are some tips you’ve picked up that you can share for using WordPress headings across your site?

Article featured image by Visual Generation / shutterstock.com

Premade Layouts

Check Out These Related Posts

9 Non-Profit Child Themes for Divi

9 Non-Profit Child Themes for Divi

Posted on July 27, 2019 by in Resources

There are lots of nonprofit organizations across the globe. Just about every one of them needs a well-designed website to tell their story and receive donations to help their causes. Divi is an excellent theme for nonprofits such as charities. Fortunately, you don’t have to start from scratch for...

View Full Post
55 Web Design Blogs to Follow in 2019

55 Web Design Blogs to Follow in 2019

Posted on January 6, 2019 by in Resources

Inspiration comes in many forms and professional development never ends. With that in mind, we have put together a massive list of web design blogs that can keep your brain fed for the entire year. But don’t worry. You won’t find any duds on this list. We respect your time and feel like...

View Full Post

34 Comments

  1. Extremely aggregate data you’ve shared particularly that coding is here to improve header.

    By the way thanks for sharing.

  2. Thank you for sharing! Where do you add these HTML codes in DIVI?

    • Cori,

      The title is done automatically – just enter your title, Dviv adds the tags.

      In the text editor you either enter them yourself as you are typing:
      Here Is An Example Header

      In the visual editor you use the drop down list at the top left that shows “Paragraph” by default. Just select the header level you want and start typing, or select the text you want to change to a header and select the header level from the drop-down.

      Hope that helps,

      Ian

      • Hmmm. Can’t seem to get the info to display correctly. When typing the tags yourself start with: “” and end the title with “”.

        Hope that’s clear!

      • Final try … if this doesn’t work I am giving up!

        less than symbol + h2 + greater than symbol Your Heading Here. less than symbol + /h2 + greater than symbol.

    • I use them in the Text module. You can click on the Paragraph drop down and select Heading 2, etc.

      You can also enter them manually as < h2> < /h2> (with no spaces) if you use the plaintext tab instead of visual.

  3. With the headings it’s the same as writing books. H1 is the title of the book, H2 are the chapters and H3 the sub-chapter. Just make sure that each time you use a higher heading level you end up with at least two of them because it logically makes no sense to just have one.

    Structure like h1-h2-h3-h2-h2-h2 should not be used. Either have 2 times h3 under the h2 or remove the h3. I don’t know if it’s actually SEO relevant but from a writers point of view having single standing sub-headings are a no-go 😛

    • I agree. The formatting and structure isn’t any different than the model used for creating traditional outlines. You need to have at least two subheadings for a heading/sub-heading to justify using them.

      Maybe I missed it, but I didn’t see any reference to the HTML document title. Usually it’s close to or the same as the h1 in value. Which makes me think that the Title is really the highest level “heading” and h1’s would be the first level of subheadings, therefore, having multiple h1s would be not only acceptable, but more common like h2s are being used. But I’ve been hearing both sides of the coin forever.

      I’m just not sure how Google treats h1s and why it would assume the document’s main topic is based on the h1, not the HTML document title.

  4. You should maybe add media queries to your CSS file. Especially with Divi.

    • That was just the very top of it. The media queries are at the bottom in a separate section. 🙂

  5. It’s great to see proper heading structure being promoted. I’m always surprised that the free layouts that Elegant themes offers, though beautiful often don’t use proper heading structure.

  6. Always a good idea to view the page source and do a search for or tags to see how many you have on your page!

  7. Someone needs to tell us beginners how to use text in Divi. I have trouble as the spacing keeps expanding or contracting at ramdom. Just something simple. I know you think all of use know how to do this but some of us are struggling just learning the basics.

  8. and of course you can change the size of your font (45px) for each heading if you really want to go after a certain look.. H1 – H3 is our fav, but H4 is very common with us still.

    • I am using H4 a lot more these days on personal projects, myself. They tend to be for more one-off, aesthetic reasons, but they’re happening more and more. (Easier to style an H4 than use a different module, etc.)

  9. Great, clear article! I’d add this: when you have your business or practice website built, talk with your web designer and blogger about how you want the headings to work. Then they’ll do exactly what you want them to.

    This is often an easy customization if you’re using a pre-made theme, too. The designer of the theme has ideas about how to use those headers, but his or her idea might not match yours.That can lead to frustration.

    Either way, it’s worth thinking about it before you launch your site.

  10. As a visual beginner, I would really like to see an example of what this would look like on the back side and the front side of the site.

    The CSS file you included is helpful but I would still like to see what this looks like as a finished product.

    • Kathy, each of the headings in this article is an H2 and the subheadings are H3. (with no H4-H6).

      Using them on the backend is simply wrapping your text in < h2> flags or selecting Heading 2 from the dropdown in the text module.

  11. Thanks some great tips.

  12. When you say h1 is added automatically by WordPress – where, at what point is that added or am I missing something here?

    • It’s just straight-up there in your post. If you inspect the page, the .post-title is wrapped in H1 tags. You’d have to edit single.php to change it, or use a plugin, etc.

  13. I believe that it is helpful to mention the Wave add-on tool aimed to help programming for ADA compliance. Although there is a Chrome extension, it works best in Firefox. It will clearly show you where your headings are, and what level they are.

    • Oh, that’s cool! I will check that out–I’ve never used it!

  14. Really a complete guide to build headings, I have bookmarked your page so that will follow same on my personal blog to make it look my stylish. Thanks again for your well-explained article.

  15. Very useful,

    thank you.

    Ismail

  16. Thanks for sharing this informative idea

  17. Considering that Divi still does not have a way of setting this up in the WordPress Customizer, I find this post to be, I think the word is, ironic. I will admit that having all the bells and whistles available for fonts and decorations in a module is very enticing, however, sometimes it is nice just to keep it simple. Why on earth should we have to add code or install a plugin, hint, google font, to do what should be available in the customizer, instead of the lame options that are currently provided by Divi.

    • Hi, Preston. You can set the site defaults for these in the Customizer, but you get far more options for module/layout-specifics within the Visual Builder or module ‘Design’ tabs. We’ve had a recent update to the builder modules where you don’t have to add in any Google Fonts–they exist within the Design tabs of the individual modules for your convenience.

  18. Nice. Very useful tips as always.

  19. Thanks admin for these tips

  20. Thanks, B.J., that’s one heck of an important subject. I just feel you scratched the surface of working with headings/text in Divi. There are a bunch of hard to understand things like when you are in the Design tab, you have a choice of styling your “Text” in this sequence: First you give your text a color. THAN you choose a font. Below that it says all of a sudden: Text Text Size and after that “Text Text Color”. Huuh? And why is the section for Headings BELOW the Text Text-section? A heading is always used above text?

    And how does the text and the formatting you enter in the “Content” Tab reflect what’s entered in the “Design” tab?

    If I select H1 for my Text in “Content”, what is happening in “Design”? Please straighten out these inconsistensies, that’s very puzzling where in a place where logic would be helpful.

    Thanks!

  21. Hello,
    When using Divi builder, how can we automatically have h1 on page title (like for post title or like it’s usually by default with WP)? Thanks

    • It’s the default in WP, beatrice. We haven’t changed that with Divi, so whenever your post title is displayed at the top of the page, it’s an H1.

  22. Hi BJ! Thank you for the great article. My confusion is On my home page I want to make sure I choose the right words for SEO. Which one is most important as people search: Your SEO title and slug, the text in the sliders if specified as H1 or H2 OR the headline on the actual page? I had this idea that was fun but might attract pregnant women instead of startups needing branding LOL:

    BRING YOUR BABY TO LIFE
    (Without all that hard labor and screaming)

Join To Download Today

Pin It on Pinterest

CryptoBalance hyip

здесь kapli.kiev.ua

http://nissan-ask.com.ua/