
In HTML, headers usually refer to heading elements that define titles or section headings in a webpage.
1. HTML Heading Tags
HTML provides six levels of headings:
<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>
Meaning:
<h1>
→ Main page title (most important)<h2>
→ Section headings<h3>
→ Subsection headings<h4>
→ Smaller subheadings<h5>
and<h6>
→ Least important headings
Example Structure:
<h1>My Website</h1>
<h2>About Us</h2>
<p>We are a tech company...</p>
<h2>Services</h2>
<h3>Web Development</h3>
<p>We build websites...</p>
2. SEO & Accessibility Notes
- Search engines use headings to understand content hierarchy.
- Use only one
<h1>
per page for the main title. - Don’t skip heading levels for style reasons (e.g., jump from
<h1>
to<h4>
without logical order). - Screen readers rely on heading structure for navigation.
3. Styling Headings
Headings have default sizes, but you can change them with CSS:
<h2 style="color: blue; font-size: 30px;">Custom Heading</h2>
4. Not to Confuse with <header>
Tag
<header>
is a semantic section element in HTML5 used to group introductory content or navigation.- It can contain
<h1>
–<h6>
, logos, menus, etc.
Example:
<header>
<h1>My Blog</h1>
<nav>
<a href="#">Home</a> | <a href="#">About</a>
</nav>
</header>