HTML Free Codes<h1>
Defines the most important heading (Level 1)
Definition and Usage
The <h1> element establishes the most important heading in an HTML document. It represents the main topic or title of the page.
HTML headings are defined with the <h1> to <h6> tags, where <h1> is the most important and <h6> is the least important.
Important: Use only ONE
<h1> per page. This is critical for SEO and accessibility. The <h1> should describe the main purpose or topic of the page.
Tip: Search engines use headings to index the structure and content of your web pages. Use headings to make your content easier to read and understand.
Browser Support
The <h1> tag is supported in all major browsers:
Chrome
Yes
Firefox
Yes
Safari
Yes
Edge
Yes
Opera
Yes
Examples
Basic H1 Heading
Create a main page heading:
Example
<h1>Welcome to HTML Free Codes</h1>
<p>Learn HTML with our comprehensive tutorials and examples.</p>H1 with Styling
Style your main heading with CSS:
Example
<style>
h1 {
color: #2563eb;
font-size: 48px;
font-weight: 700;
text-align: center;
margin-bottom: 24px;
}
</style>
<h1>Professional Website Design</h1>Document Structure with H1
Use H1 as the main page title with proper hierarchy:
Example
<article>
<h1>Complete Guide to HTML Headings</h1>
<h2>What are HTML Headings?</h2>
<p>HTML headings define the structure of your content...</p>
<h2>Best Practices</h2>
<h3>SEO Considerations</h3>
<p>Search engines use headings to understand content...</p>
<h3>Accessibility Guidelines</h3>
<p>Screen readers navigate using headings...</p>
</article>Semantic Hierarchy
Proper heading hierarchy for a blog post:
Example
<article>
<h1>10 Tips for Better Web Design</h1>
<section>
<h2>Design Principles</h2>
<h3>1. Use White Space Effectively</h3>
<p>White space improves readability...</p>
<h3>2. Choose Colors Carefully</h3>
<p>Color psychology matters...</p>
</section>
<section>
<h2>Typography Tips</h2>
<h3>3. Select Readable Fonts</h3>
<p>Font choice affects user experience...</p>
</section>
</article>Heading Hierarchy
HTML headings follow a hierarchical structure from <h1> to <h6>:
H1 - Main Page Title
H2 - Major Section
H3 - Subsection
H4 - Sub-subsection
H5 - Minor heading
H6 - Least important
Warning: Don't skip heading levels. Always go from
<h1> → <h2> → <h3>, etc. Never jump from <h1> to <h3> without an <h2> in between.
Default Heading Sizes
Comparison of default sizes for all heading tags:
| Tag | Default Size | Importance | Usage |
|---|---|---|---|
| <h1> | 2em (32px) | Most Important | Main page title (one per page) |
| <h2> | 1.5em (24px) | High | Major section headings |
| <h3> | 1.17em (18.72px) | Medium-High | Subsection headings |
| <h4> | 1em (16px) | Medium | Sub-subsection headings |
| <h5> | 0.83em (13.28px) | Low | Minor headings |
| <h6> | 0.67em (10.72px) | Least Important | Lowest level headings |
SEO Best Practices
- One H1 Per Page: Use only one
<h1>tag per page for the main title - Descriptive Content: Make your H1 clearly describe the page's main topic
- Include Keywords: Naturally incorporate relevant keywords in your H1
- Keep it Concise: H1 should be 20-70 characters for optimal SEO
- Match Page Title: H1 should align with your page's
<title>tag - Logical Hierarchy: Follow proper heading order (don't skip levels)
- Unique H1: Each page should have a unique H1 tag
- Avoid Over-Styling: Don't hide H1 with CSS or make it invisible
Accessibility
Screen readers and assistive technologies rely on heading structure for navigation:
- Navigation Aid: Screen readers use headings to create a page outline
- Skip Navigation: Users can jump between headings to find content quickly
- Logical Order: Maintain proper hierarchy for screen reader users
- Semantic Meaning: Headings convey document structure and importance
- Never Skip Levels: Always use headings in sequential order
- Don't Use for Styling: Use CSS for visual styling, not heading tags
Accessibility Tip: Many screen reader users navigate by headings. A well-structured heading hierarchy greatly improves accessibility and user experience.
CSS Styling Examples
Modern H1 Design
Example
<style>
h1 {
font-size: 48px;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 24px;
}
</style>
<h1>Beautiful Gradient Heading</h1>H1 with Underline Effect
Example
<style>
h1 {
font-size: 42px;
font-weight: 700;
color: #1f2937;
position: relative;
display: inline-block;
padding-bottom: 16px;
}
h1::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #2563eb);
border-radius: 2px;
}
</style>
<h1>Heading with Underline</h1>Responsive H1 Sizing
Example
<style>
h1 {
font-size: clamp(28px, 5vw, 56px);
font-weight: 700;
color: #111827;
line-height: 1.2;
margin: 0 0 24px 0;
}
@media (max-width: 768px) {
h1 {
font-size: 32px;
}
}
</style>
<h1>Responsive Main Heading</h1>Common Mistakes to Avoid
DON'T:
- Use multiple
<h1>tags on a single page - Skip heading levels (e.g., H1 → H3 without H2)
- Use headings just to make text bold or large
- Hide H1 tags with CSS (display: none or visibility: hidden)
- Stuff H1 with too many keywords (keyword stuffing)
DO:
- Use one descriptive
<h1>that summarizes the page - Follow proper heading hierarchy (H1 → H2 → H3...)
- Make H1 clear, concise, and relevant
- Use CSS for styling instead of choosing headings by size
- Ensure H1 is visible and meaningful to users