Practical HTML for Bloggers begins today! In this series, I'm going to focus on HTML elements you can use in your blog posts right away. All you need to use this series is your blog and its HTML post editor. On most blogging platforms, you can get to the HTML editor with one click on the HTML button, link, or tab in your post editor.
All set? Let's start right at the top, with headings!
Three Uses for Headings
Useful, relevant HTML headings in your blog posts make it easier for your readers to enjoy your posts, and help search engines accurately categorize your posts. Here's how:
- Skim-ability: I bet you used this heading-enabled ability when you first landed on this post! Section headings make it easier for your readers to skim through a post to find out what it's about at a glance. Also, skipping sections and re-reading are easier with headings.
- Accessibility: HTML headings make it possible for visitors who use screen readers to skim and skip through your post with the same ease as a sighted visitor.
- Searchability: Search engines use the headings within a post to determine what the post is about and measure its relevance to search terms.
How to Make an HTML Heading
HTML headings look like this:
<h3>Heading Here</h3>
In your HTML post editor, you "wrap" your heading with an opening heading tag in front of the heading, and a closing heading tag after the end of the heading (the slash in front of the element name makes it a closing tag).
By now I'm sure you're wondering what the numbers in heading tags mean, and why I showed you an <h3> instead of an <h1>. So, let's talk about the hierarchy of HTML headings!
Six Levels of Headings
Now that you know what headings are good for and how they're written, let me explain what those numbers in the tag mean.
There are six heading levels in HTML, <h1> through <h6>. The numbers indicate importance: <h1> is the most important, <h6> is the least important.
For bloggers, this hierarchy can be a little bit confusing, since you're not writing your page from scratch. To determine which heading level you should start with in your posts, first you'll need to find out what heading level your blogging platform has assigned to your post titles.
There are two ways to find out:
- If you're using Firefox, you can hover your cursor over a post title on your blog and right click "Inspect Element". In this image you can see that my post titles are <h3> elements.
- Alternatively, you can use your browser's source view to check your blog's source code and find your post title and the heading tags wrapping it. In this image you can see my post title in source view.
Your in-post subheadings should start at the next heading level below your post title's heading level. So, for example, if your blogging software assigns a heading level of <h3> to your post titles, you should give the subheadings within your post a heading level of <h4>. Any sub-subheads (it happens!) should be <h5>, and if you subhead even further, those should be <h6>.
It's ok to stay at one heading level throughout your post as long as that level is below your post title, and all of the subheadings in your post are of equal importance. For example, this post's title heading is an <h3>, and all the subheadings in the post are <h4> because they're equally important.
Heading Sizes
The six heading levels all have a different font size by default. An <h1> heading is the largest, and an <h6> heading is the smallest. The actual font size of your heading will vary depending on your blog's CSS styling. But, don't be tempted to use heading tags just for the size — that wrecks the experience for screen reader users, and confuses search engines. There are other ways to add emphasis to non-heading elements, and I will fill you in on that later in this series. Promise!
How Many Headings to a Post?
Use a light touch with headings — too many headings on a page are just as confusing to readers (and search engines) as no headings at all.
The perfect amount of headings for your post varies based on the length and content of the post. The post title is often all a short post needs. Lengthy or complicated posts may need several headings and/or nested subheadings.
Give it a Try!
Next time you write a long blog post, switch over to your HTML editor and add HTML headings. You'll give your readers a quick way to scan through your post, and tell the search engines what your post is all about.
What's Next?
Now that you're familiar with headings, you're ready to learn about HTML paragraphs in Practical HTML for Bloggers - Paragraphs
Title cards for this series designed by the absolutely wonderful Jenna from Little Bit Heart.
