Are you using headings in the body of what you write on your website? If you answered “No,” or “I’m not sure,” you’re not alone. Many people are unaware of what a heading is, and how they help your website.
What exactly are website headings?
Without being overly technical, website headings are text divisions in your website that take a reader on a journey on your webpage from section-to-section. There can be both sections and subsections on any given page.
What do headings look like?
One way some people like to think about headings is to parallel them to items in an outline. If you are using a popular word processing program like Word or Google Sheets, these headings are sometimes called “titles”.
Heading appearance is going to vary a bit from website-to-website. As a generality, your website designer has likely picked a series of fonts, sizes, and perhaps colors that make your headings stand out from regular paragraph text.
So what’s the difference between using headings vs. bold or italic?
This is a great question. Bold and italics or even bold-italics are best used sparingly within a given paragraph to emphasize a specific point within a sentence. Headings are best used as a title to introduce an area. They can be one word or a sentence, but they should be short and convey the point. You can also add bold and italics to your headings if applicable.
Effective bold and italic examples
A great usage of bold and italics is to emphasize a time, an exception to a policy, or an item where people routinely make a mistake. Again, it’s critical not to overuse these items because if everything is suddenly emphasized, nothing is actually emphasized. Overuse of bold and italics makes for a poor reading experience.
Here are a couple of great ways that demonstrate the effective use of bold and italics inspired by several clients we work with.
- The 21st annual carnival has moved its date this year to the third Friday in August. We changed this date due to concerns that the event was otherwise too close to Labor Day. Please mark your calendars for this annual event.
- Remember that before you submit your order, you need to finalize your color and size choices, and tell us if you have a coupon that you would like to apply.
- Tickets to this event are extremely limited as we can only host 25 attendees. Do not delay, and get your tickets today!
Effective heading examples
One way to incorporate headings is to see if your content falls into natural sections and subsections. Are you radically changing topics in a paragraph? If so, then this is the time for a heading. Are you only tangentially changing topics? If so, this is a spot for a subheading.
So, what are examples of how headings and subheadings should look? Well, we are being a bit sneaky on this one. We’ve actually incorporated headings throughout this very blog post and within this very section.
As seen above, “So what’s the difference between using headings vs. bold or italic?” is an example of a heading (H2). “Effective bold and italic examples” and “Effective heading examples” are examples of subheadings (H3). We then shift back to a heading (H2) with “Are there other reasons to use headings rather than bold or italics?” You can see how much more effective it is to use these items to visually skim an article and find what you are looking for rather than just using bold or italics.
Are there other reasons to use headings rather than bold and italic?
There are several reasons why headings are valuable to your readers and your website as a whole:
- Headings aid in search engine optimization (SEO). In other words, they help search engines like Google or Bing figure out what your page is about, and recommend it to folks who need the information on your page.
- Headings help those with assistive devices browse your website. These devices use keyboard controls only and headings help users to get to the section that they need. Check out this video to see an assistive devise user and how she navigates the web.
- How many of us ask Alexa, Cortana, or Siri to fetch us information? That information comes in via headings.
Are there any rules with headings?
Basically, there are two rules:
- Start with H1 and use it once. On WordPress websites pages and posts are automatically created with H1 being your post or page title. So, you never need to put manually put in an H1 assuming you have given your page/post a title.
- After that, everything has to stay in order. In other words, within your content container start with H2, then go to h3 , etc. Going out of order mangles your SEO, and makes your website very challenging for anyone using an assistive device.
Remember, on WordPress websites pages and posts are automatically created with H1 being your post or page title. So you never need to put in an H1. You will then want your body content to start with an H2. What’s even better, the new WordPress Block Editor (Gutenberg) that is pictured above makes this entire process really easy!
Some pages may have just one or two headings, others have many headings and subheadings. It really depends upon the type of content that is featured on that page.
Our Accessibility Maintenance Plans help you remove barriers for people with disabilities and meet legal requirements with confidence.