Skip to main content

Heading Tags

In HTML, heading tags ranging from <h1> to <h6> are used to define the structure and layout of text on a web page. These tags help create a hierarchical organization of content, making it easier for both users and search engines to understand the page's content.

The <h1> tag is generally used for the main title and is the largest and most prominent, while <h2> to <h6> tags are used for subheadings, further subheadings, and so on. Proper use of heading tags not only improves the readability of a web page but also optimizes it for search engine ranking in Google.

<h1> Tag: First-Level Heading​

The <h1> tag defines the first-level heading and is typically the largest and boldest among all the heading tags. It is often used for the main title of the page.

<h1>
  <!-- Heading content -->
</h1>

<h2> Tag: Second-Level Heading​

The <h2> tag is used for second-level headings and is slightly smaller than the <h1> tag. This is commonly used for section titles.

<h2>
  <!-- Heading content -->
</h2>

<h3> Tag: Third-Level Heading​

The <h3> tag is used for third-level headings. These are smaller than <h2> tags and are often used for sub-sections within an <h2> section.

<h3>
  <!-- Heading content -->
</h3>

<h4> Tag: Fourth-Level Heading​

The <h4> tag defines a fourth-level heading, which is smaller than the <h3> tag. It's often used for sub-sections within an <h3> section.

<h4>
  <!-- Heading content -->
</h4>

<h5> Tag: Fifth-Level Heading​

The <h5> tag is used for fifth-level headings and is smaller than <h4> tags. These are rarely used but can be helpful for deeply nested sections.

<h5>
  <!-- Heading content -->
</h5>

<h6> Tag: Sixth-Level Heading​

The <h6> tag defines the sixth-level heading and is the smallest among all the heading tags. It's rarely used but can serve specific formatting needs.

<h6>
  <!-- Heading content -->
</h6>

Summary​

  • <h1> Tag: Used for the main title of the page; largest and most prominent heading.
  • <h2> Tag: Used for major section headings; smaller than <h1> but still quite prominent.
  • <h3> Tag: Used for sub-sections within an <h2> section; smaller than <h2> but larger than <h4>.
  • <h4> Tag: Often used for headings within an <h3> section; useful for further breaking down content.
  • <h5> Tag: Rarely used; suitable for deeply nested sections or less important headings.
  • <h6> Tag: The smallest heading tag; used for very specific or minor headings, rarely seen in general usage.