HTML Free Codes<h2>
Defines a level 2 heading (section heading)
Definition and Usage
The <h2> element establishes a level 2 heading in an HTML document. It represents major section headings that fall under the main <h1> title.
HTML headings are defined with the <h1> to <h6> tags, where <h1> is the most important and <h6> is the least important.
Tip: Use
<h2> tags to divide your content into major sections. Each major topic or section should have its own <h2> heading.
Best Practice: Always ensure an
<h1> exists before using <h2>. Don't skip heading levels in the hierarchy.
Browser Support
The <h2> tag is supported in all major browsers:
Chrome
Yes
Firefox
Yes
Safari
Yes
Edge
Yes
Opera
Yes
Examples
Basic H2 Heading
Create section headings with H2:
Example
<h1>Complete HTML Guide</h1>
<h2>Introduction to HTML</h2>
<p>HTML stands for HyperText Markup Language...</p>
<h2>HTML Elements</h2>
<p>HTML elements are the building blocks...</p>H2 with Styling
Style section headings with CSS:
Example
<style>
h2 {
color: #1f2937;
font-size: 32px;
font-weight: 600;
margin-top: 48px;
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 3px solid #3b82f6;
}
</style>
<h2>Features Overview</h2>Document Structure with H2
Create a well-structured document with proper heading hierarchy:
Example
<article>
<h1>Web Development Best Practices</h1>
<h2>HTML Best Practices</h2>
<p>Writing semantic HTML is crucial for accessibility...</p>
<h2>CSS Best Practices</h2>
<p>Use modern CSS techniques for better styling...</p>
<h2>JavaScript Best Practices</h2>
<p>Write clean and maintainable JavaScript code...</p>
</article>Semantic Hierarchy with H2 and H3
Combine H2 with H3 for deeper content structure:
Example
<article>
<h1>Getting Started with React</h1>
<h2>Installation</h2>
<h3>Using npm</h3>
<p>Install React using npm package manager...</p>
<h3>Using Create React App</h3>
<p>Use Create React App for quick setup...</p>
<h2>Your First Component</h2>
<h3>Functional Components</h3>
<p>Create components using functions...</p>
<h3>Class Components</h3>
<p>Traditional class-based components...</p>
</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> directly to <h3>.
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
- Multiple H2 Tags OK: Unlike H1, you can have multiple
<h2>tags per page - Descriptive Headings: Make H2 headings clearly describe the section content
- Include Keywords: Naturally incorporate relevant keywords in section headings
- Logical Order: H2 should come after H1, and before H3
- Content Division: Use H2 to break content into scannable sections
- User Experience: Help users quickly understand page structure
- Search Visibility: Search engines use H2 to understand page topics
Accessibility
Screen readers and assistive technologies rely on heading structure for navigation:
- Section Markers: H2 tags mark major sections for screen reader users
- Quick Navigation: Users can jump between H2 sections efficiently
- Content Outline: H2 helps create a logical document outline
- Hierarchical Structure: Maintain proper order (H1 → H2 → H3)
- Meaningful Content: H2 text should clearly indicate section content
- No Visual Styling Only: Don't use H2 just for size - use CSS instead
Accessibility Tip: Screen reader users often navigate by heading levels. Proper use of H2 tags helps them understand and navigate your content structure.
CSS Styling Examples
Modern H2 Design
Example
<style>
h2 {
font-size: 36px;
font-weight: 600;
color: #111827;
margin: 40px 0 20px 0;
position: relative;
padding-left: 20px;
}
h2::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 70%;
background: linear-gradient(180deg, #3b82f6, #2563eb);
border-radius: 3px;
}
</style>
<h2>Section Heading</h2>H2 with Icon
Example
<style>
.icon-heading {
display: flex;
align-items: center;
gap: 12px;
font-size: 28px;
font-weight: 600;
color: #1f2937;
margin: 32px 0 16px 0;
}
.icon-heading::before {
content: '📚';
font-size: 32px;
}
</style>
<h2 class="icon-heading">Learning Resources</h2>Numbered Section Headings
Example
<style>
body {
counter-reset: section;
}
h2 {
font-size: 32px;
font-weight: 600;
color: #111827;
counter-increment: section;
}
h2::before {
content: counter(section) ". ";
color: #3b82f6;
font-weight: 700;
}
</style>
<h2>Introduction</h2>
<h2>Getting Started</h2>
<h2>Advanced Topics</h2>Best Practices
DO:
- Use H2 for major section headings under your H1
- Have multiple H2 tags to divide content into sections
- Make H2 headings descriptive and relevant
- Follow proper hierarchy (H1 before H2, H2 before H3)
- Use CSS for styling, not heading choice
DON'T:
- Use H2 before establishing an H1
- Skip from H1 to H3 without H2
- Choose headings based on visual size alone
- Make H2 text too long (keep it concise)
- Overuse H2 tags (only for true section divisions)