HTML provides six levels of headings,
<h1>through<h6>, to define content hierarchy and structure.
<h1>is the largest and most important heading.<h6>is the smallest and least important heading.
Headings help browsers, search engines, and screen readers understand the structure of a page.
Syntax
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Attributes
| Attribute | Description |
|---|---|
class | Assigns one or more class names for styling. |
id | Assigns a unique identifier to the heading. |
style | Adds inline CSS styles. |
title | Provides additional information as a tooltip. |
Example
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>Output
Browser Output
Use our TryIt Editor to see the output.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
Headings are visible and structured from largest (<h1>) to smallest (<h6>), helping organize content on the page.
Notes
- Headings are block-level elements by default.
- Always use headings in order (
<h1>→<h2>→<h3>) for proper semantic structure. - Headings improve SEO and accessibility.
- Styles can be modified with CSS, but the semantic meaning remains.
Conclusion
HTML headings <h1> to <h6> define content hierarchy and page structure.
Using them correctly ensures better readability, SEO optimization, and accessibility for all users.
