📌 What Are HTML Headings?

In HTML, headings are used to define titles and subtitles on a web page. They help organize content and make the structure of the page clear and easy to understand.

Headings are defined using tags from <h1> to <h6>:

  • <h1> represents the most important heading
  • <h6> represents the least important heading

For example:

HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Features and Usage of Headings

1. Automatic Spacing (Margin)

Browsers automatically add space above and below heading elements. This creates a clear visual separation between headings and other content.

2. Hierarchy and Importance

Headings should be used in a logical order:

  • <h1> is the main heading of the page (usually used once)
  • <h2> is used for main sections
  • <h3> and lower levels are used for sub-sections

This hierarchical structure helps both users and browsers understand the organization of the content.

3. Importance for SEO and Readability

Headings play an important role in:

  • Helping search engines understand the structure and key topics of a page
  • Allowing users to quickly scan and navigate the content

A well-structured heading system improves both SEO and user experience.

4. Styling Headings with CSS

Headings come with default sizes, but you can customize them using CSS:

HTML
<h1 style="font-size:60px;">Heading 1</h1>
  • Summary

  • Headings define the structure of a web page
  • <h1> is the most important, <h6> is the least important
  • They should be used in order (hierarchically)
  • They are important for SEO and readability
  • Use them for structure, not just for styling