HTML Free Codes<h4>
Defines a level 4 heading (sub-subsection heading)
Definition and Usage
The <h4> element establishes a level 4 heading in an HTML document. It represents detailed sub-subsection headings that fall under <h3> subsections.
HTML headings are defined with the <h1> to <h6> tags, where <h1> is the most important and <h6> is the least important.
Tip: Use
<h4> tags for detailed subdivisions within <h3> subsections. This is useful for highly detailed documentation or technical content.
Best Practice: Only use
<h4> after establishing <h1>, <h2>, and <h3>. Don't skip heading levels.
Browser Support
The <h4> tag is supported in all major browsers:
Chrome
Yes
Firefox
Yes
Safari
Yes
Edge
Yes
Opera
Yes
Examples
Basic H4 Heading
Create detailed sub-subsection headings with H4:
Example
<h1>Complete Programming Guide</h1>
<h2>Python Programming</h2>
<h3>Data Structures</h3>
<h4>Lists</h4>
<p>Learn about Python lists and operations...</p>
<h4>Dictionaries</h4>
<p>Working with key-value pairs in Python...</p>
<h4>Sets</h4>
<p>Understanding unique collections in Python...</p>H4 with Styling
Style detailed headings with CSS:
Example
<style>
h4 {
color: #4b5563;
font-size: 18px;
font-weight: 600;
margin-top: 24px;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
</style>
<h4>Detailed Topic</h4>Document Structure with H4
Create deeply nested content structure:
Example
<article>
<h1>Web API Reference</h1>
<h2>Fetch API</h2>
<h3>Making Requests</h3>
<h4>GET Requests</h4>
<p>Retrieve data from a server...</p>
<h4>POST Requests</h4>
<p>Send data to a server...</p>
<h4>PUT Requests</h4>
<p>Update existing data...</p>
<h3>Handling Responses</h3>
<h4>JSON Responses</h4>
<p>Parse JSON data from API...</p>
<h4>Error Handling</h4>
<p>Handle network errors gracefully...</p>
</article>Semantic Hierarchy with All Levels
Complete heading structure from H1 to H4:
Example
<article>
<h1>Advanced CSS Techniques</h1>
<h2>Flexbox Layout</h2>
<h3>Flex Container Properties</h3>
<h4>justify-content</h4>
<p>Align items along the main axis...</p>
<h4>align-items</h4>
<p>Align items along the cross axis...</p>
<h4>flex-direction</h4>
<p>Define the direction of flex items...</p>
<h3>Flex Item Properties</h3>
<h4>flex-grow</h4>
<p>Control how items grow...</p>
<h4>flex-shrink</h4>
<p>Control how items shrink...</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: Always maintain proper heading order. Never use
<h4> before establishing H1, H2, and 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
- Detailed Structure: H4 adds granular detail to content organization
- Clear Descriptions: Make H4 headings specific and descriptive
- Natural Keywords: Include relevant terms naturally
- Proper Order: H4 should follow H3 in the hierarchy
- Content Depth: Use H4 for comprehensive, detailed content
- User Navigation: Help users find specific information quickly
- Technical Docs: Especially useful in API documentation and guides
Accessibility
Screen readers and assistive technologies rely on heading structure for navigation:
- Detailed Navigation: H4 provides specific navigation points
- Content Depth: Indicates detailed, nested information
- Document Structure: Adds depth to content outline
- Proper Hierarchy: Follow H1 → H2 → H3 → H4 order
- Meaningful Text: H4 should clearly describe content
- Not for Styling: Don't use H4 for visual effects only
Accessibility Tip: H4 headings help users navigate complex, detailed content by providing specific anchor points within subsections.
CSS Styling Examples
Modern H4 Design
Example
<style>
h4 {
font-size: 17px;
font-weight: 600;
color: #374151;
margin: 20px 0 12px 0;
padding: 8px 12px;
background: #f3f4f6;
border-radius: 6px;
display: inline-block;
}
</style>
<h4>Detailed Point</h4>H4 with Small Icon
Example
<style>
h4 {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin: 18px 0 10px 0;
display: flex;
align-items: center;
gap: 8px;
}
h4::before {
content: '•';
color: #3b82f6;
font-size: 20px;
}
</style>
<h4>Specific Detail</h4>Minimal H4 Style
Example
<style>
h4 {
font-size: 16px;
font-weight: 600;
color: #6b7280;
margin: 16px 0 10px 0;
font-style: italic;
}
</style>
<h4>Minor Detail</h4>Best Practices
DO:
- Use H4 for detailed subdivisions within H3
- Ensure H4 relates to its parent H3 section
- Keep H4 headings concise and specific
- Maintain hierarchy: H1 → H2 → H3 → H4
- Use H4 in technical or detailed documentation
DON'T:
- Use H4 before establishing H1, H2, and H3
- Skip from H3 to H5 without H4
- Choose H4 based on visual size alone
- Overuse H4 in simple content
- Use H4 for styling purposes only