Hello dosto, in this post, we will discuss different types of Heading Tags in HTML that you can use on your website. Earlier, we discussed how to create a website without any coding knowledge.
Whether you use to create a website from scratch using programming or create using website builders and CMS, you have to take care of a few things. Using proper Heading Tags Structure is one of those things.
A proper heading structure makes your website’s content easily understandable and is loved by search engines. Hence, heading tags HTML can help to improve the website’s visibility. Before moving further to our main topic, let us first discuss what Heading Tags are and why you need to learn about those.
What are Heading Tags in HTML?
You can understand a heading as a title used on the top of the web page (in the header). It let the reader understand the content in detail. Suppose you have written a paragraph with nearly 300 words.
If you do not use a heading to describe its purpose, a reader will have to read the entire section to understand its meaning. That’s where a heading comes in handy.
The Heading Tags in HTML are helpful as they let the browser know how to display content. Heading Tags are also helpful in organizing the content of a web page. If you have different sections on your web page, headings tags are useful to separate those sections accordingly.
There are six Heading Tags in HTML, and they are denoted as H1, H2, H3, H4, H5, and H6. To make the content on your website reader-friendly, you must use these tags properly in a structure. Here is an example to help you better understand the HTML Heading Tags:
Suppose you are writing a blog post about dinner recipes. Your primary keyword is “Dinner Recipes,” so you will be focussing on that keyword overall. Here is how you can use Heading Tags to structure your post:
H1: Healthy Dinner Recipe You Can Try Easily
H2: Snacks
H3: Dip
H3: Cola
H2: Sides
H3: Baked Potatoes
H3: Mayo
H3: Salad
H2: Ingredients
H3: Basics
H3: Must Have
H3: Optional
H2: Methods
H3: Step 1
H3: Step 2
H3: Step 3
As you can see, headings made it really easy to understand the entire recipe post. Such a structure can be used on any post. All you need is a basic understanding of how Heading Tags HTML work.
Importance of Heading Tags
So now you know what Heading Tags are and why you should use those in your content. Here are some benefits of using Heading Tags to understand the importance of these HTML Tags better.
Add Structure to your content
Can you imagine reading a new article or blog post having more than 5000 words and no heading at all? Sounds boring right? I can bet you won’t even read past 1500 words (unless you love reading everything).
But if an article uses headings and sub-headings, it makes it easier to read by adding a structure.
When you have a proper structure in your article, you can highlight important points, facts, and the main point the author is trying to tell.
There are billions of web pages on the internet, and not every user reads all the web pages word-by-word. Whether it be a search engine bot or a normal human being, they scan the content.
The difference is search engine bots use it to understand the content and find information while humans use it to find something interesting.
Now, if your content is lagging behind others, it’s not the content’s fault. It’s the presentation! You may write so much worthy content, but you will not deliver your message if you do not represent it well in front of the audience.
That is why a structure is necessary for an article, post, or any other document having text. Heading Tags add that structure to your website.
Search Engine Friendly
Using a proper structure makes your website search engine friendly and eventually boosts SEO. H1 is most important for search engines to understand the central theme of your webpage.
Whenever a user puts a query on a search engine (Google, Bing, etc.), that search engine first examines the headings of a web page to find the keywords matching with the query.
Please note that Google does not consider keywords in the heading tags now. You can have multiple or no H1 tags on your website without affecting Google SEO. However, using proper heading structure improves the readability of the content.
Enhance Accessibility
You, me, and everyone else use a browser to visit a website. The displaying of the website on a browser depends upon the HTML code. The Heading Tags and other HTML tags tell the browser how to display the content.
Hence, it enhances accessibility as it helps the browsers organize the content to improve readability.
Heading Tags in HTML are not just useful for browsers, but for other software too. Screen readers are used by people who are visually impaired and can not read text on the screen.
At such time, having Heading Tags help a visually impaired reader to understand the content and skip to a specific heading.
Heading Tags also help readers to determine whether or not they want to continue reading the article.
Time Saving
Do you know that headings on a web page can save time? Yes, that’s true. Okay, let’s take an example; suppose you’re doing your regular work and then came across a new article having a weird headline prompting you to click on it.
And you click on that. Now, all you care about is that headline, and you start scrolling and scanning that article to find that information.
Instead of reading the complete article and going through it word-by-word, you see the headings. If you find the relevant title, you can continue reading the paper; otherwise, leave it. Hence, Heading Tags can actually save time if used properly.
How to use Headings properly in a blog post or an article
So far, you have understood what Headings Tags are and why they are necessary for HTML. Now, let us take a look at how you can use these Tags in your blog post.
Most of the users make a mistake by not using the headings properly in their articles. It might result in losing the ranking on SERPs and unreadable user experience.
I will tell you how you can use different Heading Tags in your blog post in the steps below. Would you mind that H1 and H2 Heading Tags are most important in a post, so today I will talk about using these Tags only?
You can use H3, H4, H5, and H6 accordingly. However, you can get in touch with me if you face any difficulty.
H1 Tag
H1 Tag is the most important heading tag in your text document. Please note that there is the standard to have only one main tag (H1 tag) on a web page because your web page can serve only one primary purpose.
For example, if you have created a post for Dinner Recipes, the main topic of that post will be Dinner Recipes. You cannot use another focused topic in the same post. However, you can further add sub-topics by using the sub-headings.
- Use H1 Tag only once
- Remove any duplicate H1 Tag you have in the post
- If the post does not have any H1 Tag, then add it.
- H1 Tag should be the first heading tag in a web page (i.e., you shouldn’t use any other tag before using H1 Tag)
If you are using WordPress, most of the time, the H1 tag will be the same as the title of your page. However, it might change in some themes. Please make sure to customize the Header accordingly.
H2 Tag
H2 Tag is used to describe the sub-topics of your article. Suppose you are writing an essay on a topic: “Use of Mobile Phones Among Young Adults.”
The article would have sub-topics such as Advantages of Mobile Phones, Disadvantages, Why, What, FAQs, etc. These sub-topics are put together in a document by using H2 Tag.
- Used as second-level heading
- Must not be used before H1 Tag
- Separate other sections using H2 Tags
- H2 Headings can have further sub-headings (i.e., H3, H4, H5, and H6)
Please note that there is no limitation on using H2 Heading Tags HTML in a post. However, it is recommended to use these tags a maximum of 10 times. Having more than 10 sub-topics in a single article might not be reader-friendly.
How to add Heading Tags in WordPress
You can easily add Heading Tags in WordPress by logging into the dashboard and editing a post using any of your editors’ editors. Follow this step-by-step guide to using Heading Tags HTML in WordPress using Gutenberg and Elementor editor:
Gutenberg
If you are using the default editor on WordPress, this guide is for you. You can skip to the Elementor guide if you use Elementor or any other visual editor on your WordPress website. Gutenberg is WordPress’s default visual editor and easy to use. Follow the below step to add Heading Tags in your post:
- Log in to your WordPress dashboard (Admin or Editor)
- From the left panel, click on the Posts or Pages tab in order to edit
- You can also create a new Page or Post
- Click on Edit in front of the Post/Page in which you want to add Headings
- Click on the Add Block button (Plus Sign) in the Editor screen and click on Headings
- By default, it uses the H2 Heading Tag, you can switch to other Heading Tags by clicking on the H2 button (view the image below).
- And that is it. You have successfully added Heading Tags to your post.
You can also convert any specific heading to a paragraph or any other element and vice versa.
Elementor
Elementor is an external WordPress visual editor that can create posts, pages, footer, and header. You can also use Elementor as a theme builder to completely customize the look of your website. Follow the steps below to add Headings on your WordPress page by using Elementor:
- Log in to the WordPress dashboard and open click on the edit button in front of a page/post (follow the steps 1-4 in the previous section)
- Now click on Edit with Elementor button on the top. It will open Elementor’s visual editor.
- From the left panel, click and hold the mouse key to drag the Headings element and drop it in the middle or editor where it says: Drag widget here.
- It will add a heading to your post; click on it and customize the Heading Tags from the left panel (refer to the image below).
- You can also change the alignment, HTML Tag, Size, and Link from there.
- Voila! You did what you want to do.
That’s how you can use Heading Tags on your WordPress website. If you are using any other website builder or editor, make sure to use proper heading structure. And always keep in mind to use only one H1 tag in your document.
Frequently Asked Questions (FAQs)
That was all from me today on this topic. I will update more details in the future. Thank you so much for reading it till the end. I hope you like the post; if you do so, please share it with others to help them.
However, if you did not like it, please share your feedback with me, and I will do my best to improve it and add more web guides for beginners and experts. Always remember, I am always available at hello@webcroni.com for any assistance you need.