With <h> tags, you give your HTML document or content the necessary basic structure. By using the different available types like <h1> or <h2>, you can make the hierarchy of your web pages more understandable for both search engines and users alike.

Web Hosting
Hosting that scales with your ambitions
  • Stay online with 99.99% uptime and robust security
  • Add performance with a click as traffic grows
  • Includes free domain, SSL, email, and 24/7 support

What are HTML heading tags and why are they important?

HTML heading tags are HTML elements that let you create headings in an HTML document. These HTML tags are both structurally and semantically significant for websites and serve the following purposes:

  • Hierarchy and structure: Heading tags help both visitors and search engines better understand your content and its structure.
  • Search engine optimization: Proper use of HTML heading tags like <h1> can positively influence your ranking in search engines. By using important keywords in the headings, you can gain significant advantages.
  • Layout and design: HTML heading tags are also indispensable for graphic design. In CSS style sheets, you can centrally define the appearance of the different types of headings. Doing so means that later design changes will automatically be applied to all headings marked with HTML <h> tags.
  • Accessibility: Screen readers rely on HTML headings to read your content in a meaningful and understandable way.
Note

The heading tag <h> for headings should not be confused with the header tag<header>. The latter is used to mark the header section of an HTML document or web page. This section usually contains elements like logos and brand names, navigation or CTA elements.

What types of HTML heading tags are there?

To mark HTML headings, the tags <h1> to <h6> are available. <h1> represents the most important heading, typically characterized in the layout by the largest font size. The <h6> type marks the least important heading, occupying the lowest level in the hierarchy:

  • HTML <h1>: The <h1> is the main heading of a web page. Therefore, it should always reflect the main topic or title of the entire page. Using keywords here is especially effective and important.
  • HTML <h2>: The <h2> tag defines the most important subheadings. They introduce sections that relate to the main topic mentioned in the <h1>.
  • HTML <h3> to <h6>: The <h3> to <h6> tags are used for subheadings that introduce subsections or nested content within an <h2> section.

With the exception of <h1>, you can use the different HTML heading types multiple times in a page. It’s important not to skip levels though. For example, if you have an <h2> heading and want to create a subsection, the heading for the section should be an <h3> heading, not an <h4>.

Domain Name Registration
Build your brand on a great domain
  • Free Wildcard SSL for safer data transfers 
  • Free private registration for more privacy
  • Free Domain Connect for easy DNS setup

What is the syntax of HTML <h> tags? (w/ a code example)

HTML headings are integrated into a document using the typical HTML tag pattern. With an opening tag, you define the start of a heading, and a closing tag marks the end of the heading. The numbers in both tags must be the same. Here’s an example of the syntax using an <h1> tag:

<h1>*TEXT*</h1>
html

Now, we’ll take a look at how to use HTML heading tags in an HTML document. We’re going to create a page for a cooking website and structure it using <h2> and <h3> subheadings. This will allow users to easily navigate between the various recipe categories:

<!DOCTYPE html>
<html>
<body>
<h1>Recipe Tips for Appetizers, Main Courses and Desserts</h1>
<p>Discover delicious recipes and culinary tips.</p>
	<h2>Snacks and Appetizers</h2>
	<p>Small dishes and appetizers for in between meals</p>
		<h3>Salads</h3>
		<p>Fresh and crunchy salad ideas</p>
		<h3>Dips and Spreads</h3>
		<p>Recipes for delicious dips and spreads</p>
	<h2>Main Courses</h2>
	<p>Delicious and hearty main dishes for any occasion</p>
		<h3>Vegetarian Dishes</h3>
		<p>Healthy and tasty vegetarian recipes</p>
		<h3>Meat Dishes</h3>
		<p>Recipes for juicy and flavorful meat dishes</p>
	<h2>Desserts</h2>
	<p>Sweet temptations and desserts for the perfect finish</p>
		<h3>Cakes and Pies</h3>
		<p>Baking recipes for delicious cakes and pies</p>
		<h3>Ice Cream and Sorbets</h3>
		<p>Refreshing and tasty ice cream recipes</p>
</body>
</html>
html
Was this article helpful?
Go to Main Menu