HTML <h1> - <h6> Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 15 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

The <h1>-<h6> element is used for headings of section/webpage. They define the structure and hierarchy of webpage which helps improve readability. They also play a vital role in SEO (Search Engine Optimization) and accessibility.

There are six levels of headings. H1 is the highest level (biggest in size) and H6 is lowest level (smallest in size). The <h1>-<h6> element are Block elements by default. So, they start on new line and take the full width of container.

Syntax: 
<h1> Heading_One </h1>

Example: 

<h1> Heading_One </h1> 
<h2> Heading_Two </h2> 
<h3> Heading_Three </h3> 
<h4> Heading_Four </h4> 
<h5> Heading_Five </h5> 
<h6> Heading_Six </h6>

Output:

Heading_One

Heading_Two

Heading_Three

Heading_Four

Heading_Five
Heading_Six

Attributes

The <h1>-<h6> elements only has global attributes.

Usage Guidelines

1. Single H1 Element

A page should have single H1 heading element which describe the contents of the webpage. This tag should be similar to the <title> element of webpage to avoid confusion.

2. Hierarchy and Nesting

Headings can be nested which represents subsections. So, Headings with equal rank start new section and lower rank represents subsection. Most screen readers generally generate an ordered list of all headings to determine hierarchy of webpage. You should start with <h1> then followed by <h2> and so on.

3. Navigation

Screen readers use headings to provide in-page navigation. They allow you to jump from heading to next heading.

4. Tag Omission

The <h1> - <h6> elements must have both start tag and end tag.


5. Do not use headings to resize text. Use CSS font-size property.


6. Headings are used by Browsers to generate table of contents for document automatically

Frequently Asked Questions (FAQ)

Is it possible to use multiple <h1> tags within a single HTML document?
Yes, you can use multiple <h1> tags in a single HTML document. For a traditional web page, the main <h1> should be the primary heading representing the page's main topic.
HTML5 allows multiple <h1> tags when using sections (<section>) and articles (<article>). Each section or article can have its own <h1> because they act as independent content blocks.

Can you have an <h2> element without having an <h1> element in your HTML document?
Yes, you can have an <h2> element without an <h1> in your HTML document, but it's not recommended for proper document structure and accessibility.

Headings should follow a logical hierarchy (<h1> → <h2> → <h3>, etc.), which helps both users and search engines understand the structure of the content. Skipping <h1> can make your document less accessible, especially for screen readers.

How many headings can you have in html?
In HTML, you can have as many heading elements as you want, but there are only six levels of predefined headings:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Is it valid to use a span element inside an h1 tag in HTML?
Yes, you can add a span inside an h1 tag in HTML. The span is an inline element used to style or target a specific part of the text. It's useful for applying CSS to part of the heading without affecting the entire h1.

Can the HTML <p> tag be placed within an HTML5 heading element like <h1>?
No, it is not valid to place paragraph(<p>) element inside a heading tag like h1 in HTML5. The

element is a block-level element. Heading tags (h1 to h6) are only allowed to contain phrasing content. Since <p> is not phrasing content, placing it inside a heading violates the HTML5 content model.


What HTML tags can be used inside HTML h1 and other heading tags?
In HTML, you can use a variety of inline elements inside h1 and other heading tags (h1, h2, h3, etc.). These tags are typically part of phrasing content. Here's a list of commonly used tags that can be included:
  • span
  • a
  • strong
  • em
  • i
  • b
  • small
  • sup
  • sub
  • code
  • q