HTML Free Codes<h3>
Defines a level 3 heading (subsection heading)
Definition and Usage
The <h3> element establishes a level 3 heading in an HTML document. It represents subsection headings that fall under <h2> sections.
HTML headings are defined with the <h1> to <h6> tags, where <h1> is the most important and <h6> is the least important.
Tip: Use
<h3> tags to divide content within <h2> sections into smaller, more specific subsections.
Best Practice: Only use
<h3> after establishing both <h1> and <h2>. Don't skip heading levels.
Browser Support
The <h3> tag is supported in all major browsers:
Chrome
Yes
Firefox
Yes
Safari
Yes
Edge
Yes
Opera
Yes
Examples
Basic H3 Heading
Create subsection headings with H3:
Example
<h1>Web Development Tutorial</h1>
<h2>Frontend Development</h2>
<h3>HTML Basics</h3>
<p>Learn the fundamentals of HTML...</p>
<h3>CSS Styling</h3>
<p>Style your web pages with CSS...</p>
<h3>JavaScript Programming</h3>
<p>Add interactivity with JavaScript...</p>H3 with Styling
Style subsection headings with CSS:
Example
<style>
h3 {
color: #374151;
font-size: 24px;
font-weight: 600;
margin-top: 32px;
margin-bottom: 16px;
padding-left: 12px;
border-left: 4px solid #3b82f6;
}
</style>
<h3>Important Subsection</h3>Document Structure with H3
Create detailed content hierarchy with H3:
Example
<article>
<h1>Complete CSS Guide</h1>
<h2>CSS Selectors</h2>
<h3>Element Selectors</h3>
<p>Target HTML elements by tag name...</p>
<h3>Class Selectors</h3>
<p>Target elements by class attribute...</p>
<h3>ID Selectors</h3>
<p>Target unique elements by ID...</p>
<h2>CSS Properties</h2>
<h3>Color Properties</h3>
<p>Set text and background colors...</p>
<h3>Layout Properties</h3>
<p>Control element positioning...</p>
</article>Semantic Hierarchy with H3 and H4
Combine H3 with H4 for even deeper structure:
Example
<article>
<h1>JavaScript ES6+ Features</h1>
<h2>Modern Syntax</h2>
<h3>Arrow Functions</h3>
<p>Concise function syntax introduced in ES6...</p>
<h4>Basic Arrow Function</h4>
<p>Simple arrow function examples...</p>
<h4>Arrow Functions with Parameters</h4>
<p>Passing parameters to arrow functions...</p>
<h3>Template Literals</h3>
<p>String interpolation with backticks...</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: Never use
<h3> before establishing <h1> and <h2>. Always maintain proper heading order.
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 H3 Tags OK: You can have multiple
<h3>tags under each<h2>section - Descriptive Content: Make H3 headings clearly describe subsection content
- Natural Keywords: Include relevant keywords naturally in headings
- Proper Hierarchy: H3 should come after H2 and before H4
- Content Organization: Use H3 to break down H2 sections into logical parts
- Readability: Help users scan and understand content structure
- Topic Relevance: Ensure H3 relates to parent H2 section
Accessibility
Screen readers and assistive technologies rely on heading structure for navigation:
- Subsection Markers: H3 tags mark subsections within H2 sections
- Detail Navigation: Users can navigate to specific subsections
- Content Outline: H3 adds detail to document outline
- Hierarchical Order: Maintain H1 → H2 → H3 sequence
- Clear Descriptions: H3 text should indicate subsection content
- Semantic Structure: Don't use H3 for styling purposes only
Accessibility Tip: Proper H3 usage helps screen reader users understand the relationship between subsections and their parent sections.
CSS Styling Examples
Modern H3 Design
Example
<style>
h3 {
font-size: 22px;
font-weight: 600;
color: #1f2937;
margin: 28px 0 16px 0;
padding-bottom: 8px;
border-bottom: 2px solid #e5e7eb;
}
h3:hover {
color: #3b82f6;
border-bottom-color: #3b82f6;
transition: all 0.3s ease;
}
</style>
<h3>Subsection Title</h3>H3 with Bullet Point
Example
<style>
h3 {
font-size: 20px;
font-weight: 600;
color: #374151;
margin: 24px 0 12px 0;
display: flex;
align-items: center;
gap: 10px;
}
h3::before {
content: '▸';
color: #3b82f6;
font-size: 18px;
}
</style>
<h3>Key Point</h3>Numbered Subsections
Example
<style>
h2 {
counter-reset: subsection;
}
h3 {
font-size: 20px;
font-weight: 600;
color: #1f2937;
counter-increment: subsection;
margin: 20px 0 12px 0;
}
h3::before {
content: counter(section) "." counter(subsection) " ";
color: #3b82f6;
}
</style>
<h2>Main Section</h2>
<h3>First Subsection</h3>
<h3>Second Subsection</h3>Best Practices
DO:
- Use H3 for subsections within H2 sections
- Ensure H3 content relates to its parent H2
- Make H3 headings specific and descriptive
- Follow the hierarchy: H1 → H2 → H3
- Use multiple H3 tags when needed
DON'T:
- Use H3 before establishing H1 and H2
- Skip from H2 to H4 without H3
- Choose H3 based on visual size alone
- Make H3 too long (keep it concise)
- Use H3 for styling purposes only