Table of Contents
Separating headings and subheadings on a webpage is done with header tags, also known as heading tags. According to their importance, they are generally arranged from H1 to H6, while H1 usually represents the title.
A webpage’s header tags make it easier to read and more search engine friendly.
What header tags are used for and how they can help you:
H1
A post’s title appears in the H1 section. Their primary purpose is to hold the reader’s attention, so they tend to be keyword-centric and focused on the “big idea” of a page or post.
H2
Your paragraphs and sections have subheaders that describe what they are about. In your H2, use semantically related keywords that will help the reader quickly locate the sections that interest them.
H3
These are subsections that describe in greater detail what is said in H2. If you would prefer, you could format bullet points and lists with them.
H4
This is a subsection that further clarifies what’s stated in H3. You can also use them to format bullet points and lists. The H in all the H1, H2, etc means heading element, whereas SEO “people” like to sometimes call it a header tag.
You can see from the guide above that the letter indicates the importance of each one (where H1 is the most significant, H2 is the second most significant, etc).
Let’s dive into the specifics of header tags with respect to the H1 tag, now that you have a basic understanding of how they provide structure to a page.
How do H1 tags work?
Among the heading tags on a page or post, an H1 is the first and most important. It typically identifies the title of the post or page.
Make sure header tags aren’t just visual elements. As structural elements they are important. Treat H1s like book titles. A book is usually titled only once, so your page or post should be titled only once as well.
You should also place your H1 tags before all of the rest of the writing, just as the title of the book appears on the outer cover before you begin your text.
What is the number of header tags supported by HTML?
With HTML, you can structure your page in a number of ways using the header tags (H1-H6). A page can have as many tags as you want, with the exception of the H1. Each tag can be styled visually to match your brand.
Headers should summarize what you’re writing about since they can aid in making the content easier to read (and easier to find for the search engines) and help guide the reader throughout the page. Formatting should be done according to how you see fit.
Search Engine Optimization and Header Tags
If you take a closer look at the bigger picture of website-related things, header tags may seem insignificant. In spite of this, header tags are important for structuring content and for highlighting key points, themes, and (in effect) keywords within it. In the end, header tags play an important role in keyword relevance and readability.
By crawling web pages, Google scours the web for content to present to its users. During this process, it analyzes texts, graphics, and other elements to determine what a page is about.
By including text into a header tag, you are signaling that it is important, and Google uses this context information to decide what should appear in search results, which helps it deliver results that are relevant to users’ queries.
Because of this, it is crucial to use header tags that appropriately match a keyword intent. Google will have a harder time understanding a page if the H1 tag has no keyword or if there is irrelevant content in the H2 and H3 tags. This will result in the page being less likely to rank well.
You don’t need to come up with your own keywords — instead, make use of software that helps you do the research like SEMRush or Ahrefs. You should make sure that your header tags are not only user friendly but also search engine friendly.
The use of headers also facilitates the easy reading of pages. Information can be organized and broken up in an understandable manner by sectioning off sections of a website. Readers and search engines alike can easily find information that they are looking for this way.
Your page might not rank if your sections do not make sense. Can you comment on how this post was broken up into sections? Do you think it is readable?
A heading structure example
Imagine you’re working on a blog post about a recipe. Your main keyword is “xyz recipes,” and in your post, you intend to describe a few popular festival dishes. For example, you could use heading tags as follows:
- H1: Delicious and easy festival recipes
- H2: Snacks to munch on
- H3: Charcuterie platter
- H3: Eggplant dip
- H3: Fried eggs
- H2: Snacks to munch on
- H2: Toppings
- H3: Filling
- H3: Vegetables
- H3: Cranberry Sauce
- H3: Additional options
- H2: Main courses
- H3: chicken
- H3: Paneer
Using a bullet list is a helpful way to plan and organize your content, if you aren’t sure how to create your heading tags.
Organize your content
As you scroll through your online news reader or blog feed, imagine you are scrolling through your normal daily news feed. The article link entices you to keep reading after reading the intriguing headline. Instead, you encounter an enormous amount of text. The article is quickly clicked away, and you turn to another article on the same subject.
It’s very likely you have come across this if you read a lot of internet content. The content may not be at fault, but how it was presented might be. The vast majority of web users don’t read websites line-by-line: most browse them.
When it comes to reading, they look for large, eye-catching text, high-quality images, and digestible text. So if you don’t break up your text with heading tags into smaller paragraphs, most of your readers aren’t going to read your text.
With heading tags, you can easily scan and follow your content. Clearly describe sections and paragraphs in each heading tag so that the reader knows what to expect. It should also be possible to get back on track with a quick glance at a heading tag if someone scrolls down too far or loses their place.
Accessibility should be improved
A heading tag is used to specify how content on a web page should be displayed through code. They do this by organizing your content in an easy-to-read format.
As well as improving readability, heading tags make screens more accessible to individuals who have difficulty reading.
Exactly how? In order to read text on a screen, visually impaired readers might use a screen reader.
Because headings are in HTML, visually impaired readers are able to quickly digest the gist of an article and decide whether they wish to continue reading it.
Screen readers also let you jump to the next heading when navigating through an article. If you include descriptive heading tags, it makes your site easier to read and navigate for blind or visually impaired users.
Boost your search engine ranking
It is important to note that while page titles appear in search results, H1 tags play a vital role when it comes to SEO.
Users’ searches are examined by search engines for relevant keywords in the headings. Generally, your content appears earlier in Google search results if your headings match what people are searching for.
Writing page titles and H1 headers well is still important for user experience, even though they don’t fool search engines as easily as they used to.
Readability and visibility are enhanced by heading tags
When it comes to grabbing readers’ attention and keeping their attention on your page, the way you arrange your content can make a huge impact.
Creating strong, descriptive headings helps readers follow your content. It can be especially helpful for visually impaired individuals who may have difficulty navigating your content.
You should start practicing creating unique, SEO-friendly headings with your content as soon as you can.
About the Author
My name’s Semil Shah, and I pride myself on being the last digital marketer that you’ll ever need. Having worked internationally across agile and disruptive teams from San Fransico to London, I can help you take what you are doing in digital to a whole next level.