Understanding headers

Everything you need to know about headers (H1, H2, H3, H4….)

This article will help you in two ways.

  1. You can learn why headers will save you so much time, and how to use them when you’re writing for your website
  2. You have a post on your website that you can use when experimenting with headers in the customizer

What are heading tags?

A heading tag (h1, h2, h3…) is used to define the formatting of a line of text. The text your reading now is the paragraph text. The heading above is using the H3 tag. Keep reading in the Maple helpdesk.


Quick tip! Go to typespiration.com to choose good fonts that you can use on your website.


Testing Headers

When you’re setting up heading and paragraph styles on your website you’ll want to be able to see the changes you’re making so you can get it just right.

First you need a test page or post where you can have all the heading and paragraph styles available to look at. Then, as you adjust the dial you can watch how they change.

Step 1. Copy and paste the sample text below into a new post on your website, and  in the next step you can test heading styles, fonts, sizes, and weight.

Step 2. Click the “customize” button in the top bar, then click “general” and then “headings”. You can click “text” when you’re ready to adjust paragraph (or body) text.

Here’s a demonstration on this exact blog post (no sound)

Here is the content you can copy/paste.


h1 is for the article title only, so don’t use it

Here is some placeholder text that you can use when testing the “text” area of your settings. Also, it’s helpful to see headings in the context of their accompanying body text. Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

h2 is only used when there are multiple sections with subheadings

Here is some placeholder text that you can use when testing the “text” area of your settings. Also, it’s helpful to see headings in the context of their accompanying body text.

h3 is for most subheadings

Here is some placeholder text that you can use when testing the “text” area of your settings. Also, it’s helpful to see headings in the context of their accompanying body text.

h4 if you need it

h5 if you need it
h6 if you need it

h7 if you need it


Now that you’ve tested and chosen headings, you can move on to editing other areas of your website. Remember, you can always make changes in real time, but those changes happen across your entire site. This is the best part about working with these settings.

Ryan Clover

Designer and founder of Maple Creative, providing technical wizardry for activists, educators, and small business owners who are out to change the world.