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 un­der­stand­able for both search engines and users alike.

Web hosting
The hosting your website deserves at an un­beat­able price
  • Loading 3x faster for happier customers
  • Rock-solid 99.99% uptime and advanced pro­tec­tion
  • Only at IONOS: up to 500 GB included

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 struc­tur­ally and se­mantic­ally sig­ni­fic­ant for websites and serve the following purposes:

  • Hierarchy and structure: Heading tags help both visitors and search engines better un­der­stand your content and its structure.
  • Search engine op­tim­isa­tion: Proper use of HTML heading tags like <h1> can pos­it­ively influence your ranking in search engines. By using important keywords in the headings, you can gain sig­ni­fic­ant ad­vant­ages.
  • Layout and design: HTML heading tags are also in­dis­pens­able for graphic design. In CSS style sheets, you can centrally define the ap­pear­ance of the different types of headings. Doing so means that later design changes will auto­mat­ic­ally be applied to all headings marked with HTML <h> tags.
  • Ac­cess­ib­il­ity: Screen readers rely on HTML headings to read your content in a mean­ing­ful and un­der­stand­able 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, nav­ig­a­tion or CTA elements.

What types of HTML heading tags are there?

To mark HTML headings, the tags <h1> to <h6> are available. <h1> rep­res­ents the most important heading, typically char­ac­ter­ised 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 es­pe­cially effective and important.
  • HTML <h2>: The <h2> tag defines the most important sub­head­ings. 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 sub­head­ings that introduce sub­sec­tions 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 sub­sec­tion, the heading for the section should be an <h3> heading, not an <h4>.

Register your domain name
Launch your business on the right domain
  • Free WordPress with .co.uk
  • Free website pro­tec­tion with one Wildcard SSL
  • Free Domain Connect for easy DNS setup

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

HTML headings are in­teg­rated 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> sub­head­ings. This will allow users to easily navigate between the various recipe cat­egor­ies:

<!DOCTYPE html>
<html>
<body>
<h1>Recipe Tips for Starters, Main Courses and Desserts</h1>
<p>Discover delicious recipes and culinary tips.</p>
	<h2>Snacks and Starters</h2>
	<p>Small dishes and appetisers 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 flavourful 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
Go to Main Menu