If you’re building a DIY website or working on your website’s SEO, you’ve probably come across headings. Headings and subheadings are used to structure your content. They tell the reader (and search engines) what text is more important and less important on the page. Headings on websites go from 1-6. One is the most important, and six is the least important. Along with headings, there can also be just regular text, that we label as ‘paragraphs.’
Why label headings and subheadings on your website? It helps with organization and styling, They help the reader skim more quickly. Plus, they help search engines know what’s important content. If you have the time and bandwidth to do it, I highly recommend labeling your headings as you go along, especially if you’re writing blog posts. So, how do headings work on websites?
Where do website headings come from?
They come from HTML code. In the code for your page, all of the text will be labeled according to importance and priority. HTML is the code for the structure of the web page, kind of like the frame of a house. It’s what’s there before all of the styling (furniture and decorations!) is added in. The HTML code has the bare bones pieces of the web page. It’s mostly just text and images, with no styling or layout.
If you’re using WordPress, the default editor will automatically label your text for you. But, it might not label things the way you want them, so it’s important label your headings yourself. Luckily, WordPress also allows you to edit all of your headings so you can control the structure of your web pages and blog posts more carefully.
How do headings work on websites?
Headings are technically HTML code, so they are written in HTML in order to show up properly. But headings are a very basic piece of HTML code, and you can easily learn how to use them. Even if you don’t know anything at all about code (and don’t want to learn!), you can still use headings on your website.
The rules: In HTML, you open a piece of text, and then you close it. If you open it as a Heading 3, you need to close it as a Heading 3. If you don’t close it, then everything after that will continue to be styled as a heading. And believe me, you don’t want that!
To open text: Use <p> <h1> <h2><h3> <h4> <h5> <h6>
To close text: Use the same tag, but add a / before the tag name. So, <p> opens a paragraph, and </p> closes a paragraph. Also, <h4> opens a heading 4, and then </h4> closes it.
So, if you want to make a heading 5 that says ‘how to add headings to your website,’ this would be the code:
<h5>How to add headings to your website:</h5>
How to add headings in the default WordPress editor (for blog posts):
I usually do my headings in HTML code, even in the WordPress editor. It’s just easier for me to be able to see which tags I’m using. Instead of adding a paragraph, just add an HTML block. Write your same text, as you would normally. Then, just add the heading tags before and after your text.
Add <h2> (but change the number for the level of heading you want) at the beginning, before your text. Then, add </h2> (again, change the number) after the end of your text. Just make sure to use the same number at the beginning and end. Don’t open a heading 3 and close with a heading 4, because that’s not how code works, silly! You can add bold, italics, links, etc. as you would normally, inside those header tags.
How to add heading tags in the Divi visual builder:
The Divi builder also gives you the option to set the heading tags. Plus, if you use the visual builder, you won’t have to worry about coding the tags yourself. The theme will do all of that for you. Open any module with text and go to the design tab. There, you’ll find a section to edit the ‘heading text.’ You can assign different styles to each of the different levels of headings, one through six.
Some of the modules will automatically assign a heading to things that are listed as the titles, but you can almost alwasy adjust those if you’d like. You can do that in the style tab as well.
How do headings work on websites for SEO purposes?
Headers are used to structure your website. Google and other search engines read that structure to get a sense of what your site is about. So, if you have a disorganized structure to your blog posts or your web pages, search engines will be confused as to what that page is about and won’t know how to rank you.
Plus, using heading and subheadings makes your content easier to read. Your visitors can skim through the headings to find the part they want to read. Or they can more easily get an overview of the content by just reading only the headings and subheadings on your website.
H1 is the most important, and should only be used once on the page. The rest of the headings should be nested, like making an outline. H3 should only be under H2, H6 should only be under H5, etc. I mostly only use through H4, and I hardly ever make it all the way down to H5 or H6. But, sometimes, when I’m writing longer articles or going really in depth, I need to use all six levels of headings!
When I write blog posts in WordPress, the title will automatically be assigned an heading 1 tag. For the rest of the post, I use heading 2 for most of the subheadings. But sometimes there is too much content under one of my heading 2 subeadings. So, then I break it up into smaller chunks using level 3 headings. Usually that is enough to break up all the text into headings and subheadings.
Pssst… for more tips on how to build a website that’s seo-friendly, check out this post.
