The h3 tag defines a third-level heading on a webpage. It is used to create subsections under h2 headings, helping organize content into more detailed parts.
✅ Basic Syntax
<h3>Our Team Members</h3>
📍 Result:
A heading smaller than <h2>, indicating a subsection within a larger section.
📚 Heading Hierarchy
HTML headings go from <h1> (most important) down to <h6> (least important):
<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
<h3>to break content down into finer subtopics under<h2>.
🎯 Semantic Importance
- Improves document structure for both users and search engines.
- Assists screen readers in navigating content.
- Helps users quickly scan nested sections.
🎨 Styling Example (CSS)
h3 {
font-size: 1.5rem;
color: #2c3e50;
margin-top: 20px;
margin-bottom: 10px;
}
⚠️ Best Practices
| ✅ Use for | ❌ Avoid |
|---|---|
Subsections under <h2> | Skipping heading levels |
| Clear, descriptive titles | Using <h3> for unrelated content |
✅ Summary
| Feature | <h3> Tag |
|---|---|
| Purpose | Defines third-level headings |
| Usage | Subsections within <h2> sections |
| SEO Impact | Enhances content structure and clarity |
| Styling | Smaller than <h2>, customizable |