Are you using headers 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 header is, and how they help your website.
What exactly are website headers?
Without being overly technical, website headers 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.
One way some people like to think about headers, is to parallel them to items in an outline. If you are using a popular word processing program like Word or Google Sheets, these headers are sometimes called “titles”.
What do headers look like?
Header 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 headers stand out from regular paragraph text.
So what’s the difference between using headers 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. Headers 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 headers 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 header examples
One way to incorporate headers 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 header. Are you only tangentially changing topics? If so, this is a spot for a subheader.
So, what are examples of how headers and subheaders should look? Well, we are being a bit sneaky on this one. We’ve actually incorporated headers throughout this very blog post and within this very section.
As seen above, “So what’s the difference between using headers vs. bold or italic?” is an example of a header (H2). “Effective bold and italic examples” and “Effective header examples” are examples of subheaders (H3). We then shift back to a header (H2) with “Are there other reasons to use headers 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 headers rather than bold and italic?
There are several reasons why headers are valuable to your readers and your website as a whole:
- Headers 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.
- Headers help those with assistive devices browse your website. These devices use keyboard controls only and headers 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 headers.
Are there any rules with headers?
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 headers, others have many headers and subheaders. It really depends upon the type of content that is featured on that page.
Can someone on your staff help me with headers?
We are here to help. We can either fix your content to incorporate headers at our hourly rates, or we can train you and your staff to do it via a video teaching call. It’s all up to you. We are happy to work with you and your team to suit your learning styles. Existing clients can schedule a call here. New clients can contact us so we can better learn about your full needs before we dive in.