How to create heading in html

HtmlHow-ToBeginner · 3 min read

How to Create Headings in HTML: Simple Guide

In HTML, you create headings using the <h1> to <h6> tags. The <h1> tag is the largest heading, and <h6> is the smallest. Place your heading text between these tags to display it as a heading.

📐

Syntax

HTML headings use tags from <h1> to <h6>. Each tag defines a heading level, where <h1> is the most important and largest, and <h6> is the least important and smallest.

<h1>...</h1>: Main heading
<h2>...</h2>: Subheading
<h3>...</h3>: Smaller subheading
... and so on until <h6>

html

<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>

Output

This is a level 1 heading This is a level 2 heading This is a level 3 heading

💻

Example

This example shows a simple HTML page with different heading levels. Each heading appears with decreasing size and importance from <h1> to <h6>.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Heading Example</title>
</head>
<body>
  <h1>Main Heading (H1)</h1>
  <h2>Subheading (H2)</h2>
  <h3>Section Heading (H3)</h3>
  <h4>Subsection Heading (H4)</h4>
  <h5>Minor Heading (H5)</h5>
  <h6>Smallest Heading (H6)</h6>
</body>
</html>

Output

Main Heading (H1) Subheading (H2) Section Heading (H3) Subsection Heading (H4) Minor Heading (H5) Smallest Heading (H6)

⚠️

Common Pitfalls

Some common mistakes when creating headings in HTML include:

Using headings only for styling instead of structure.
Skipping heading levels (like jumping from <h1> to <h4>), which can confuse screen readers and search engines.
Using other tags like <div> or <span> with styles instead of proper heading tags.

Always use heading tags to show the content structure clearly.

html

<!-- Wrong: Using div for heading -->
<div style="font-size: 2em; font-weight: bold;">Heading Text</div>

<!-- Right: Using proper heading tag -->
<h2>Heading Text</h2>

📊

Quick Reference

Use this quick guide to choose the right heading tag:

Tag	Use For	Visual Size
	Main page title or most important heading	Largest
	Section titles under	Second largest
	Subsections under	Medium
	Smaller subsections	Smaller
	Minor headings	Smaller still
	Least important headings	Smallest

✅

Key Takeaways

Use

to

tags to create headings with different importance and sizes.

Start with

for the main heading and use lower levels for subsections.

Avoid skipping heading levels to keep content structure clear.

Do not use other tags with styles to mimic headings; use proper heading tags.

Headings help both users and search engines understand your page structure.