The h4 tag defines a fourth-level heading on a webpage. It is used to create subsections beneath <h3> headings, allowing you to organize content in even finer detail.
✅ Basic Syntax
<h4>Project Timeline</h4>
📍 Result:
A heading smaller than <h3>, used for more granular sections within your content hierarchy.
📚 Heading Hierarchy
HTML provides six heading levels:
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Detail Heading</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading</h6>
- Use
<h4>for subsections under<h3>. - Helps keep complex documents well-structured.
🎯 Semantic Importance
- Provides clear document structure.
- Enhances accessibility for screen readers.
- Improves SEO by defining detailed content hierarchy.
🎨 Styling Example (CSS)
h4 {
font-size: 1.2rem;
color: #3c3c3c;
margin-top: 15px;
margin-bottom: 8px;
}
⚠️ Best Practices
| ✅ Use for | ❌ Avoid |
|---|---|
Subsections under <h3> | Skipping heading levels |
| Clear and meaningful titles | Using <h4> for decoration |
✅ Summary
| Feature | <h4> Tag |
|---|---|
| Purpose | Defines fourth-level headings |
| Usage | Subsections within <h3> sections |
| SEO Impact | Adds depth to content structure |
| Styling | Smaller and subtler than <h3> |