<h3>
The <h3> element represents a third-level heading in the document's heading hierarchy. It is used for subsections within an <h2> section, providing further organization and structure to your content. Use <h3> when you need to break down a major section into smaller, related topics.
This page was last updated on 2025-11-17
Syntax
<h3>Subsection Title</h3>
Attributes
- class - CSS class name
- id - Unique identifier for linking
- style - Inline CSS styles
- title - Advisory information
- lang - Language of the heading
Examples
Subsection within a major section:
<h2>Web Development</h2>
<h3>Frontend Technologies</h3>
<p>HTML, CSS, JavaScript...</p>
<h3>Backend Technologies</h3>
<p>PHP, Python, Node.js...</p>
Complete hierarchy example:
<h1>HTML Tutorial</h1>
<h2>Text Elements</h2>
<h3>Headings</h3>
<p>About headings...</p>
<h3>Paragraphs</h3>
<p>About paragraphs...</p>
<h2>Links</h2>
<p>About links...</p>
With further nesting:
<h3>CSS Selectors</h3>
<h4>Class Selectors</h4>
<p>Details about class selectors...</p>
<h4>ID Selectors</h4>
<p>Details about ID selectors...</p>
When to Use
Use <h3> to subdivide content within an <h2> section. This creates a clear content hierarchy that helps readers and search engines understand the relationship between topics. For example, if your <h2> is "Cooking Techniques," your <h3> elements might be "Grilling," "Roasting," and "Steaming."
Ideally, <h3> should appear within the context of an <h2> section. While skipping levels (like going from <h2> directly to <h4>) is technically valid HTML, it creates a confusing hierarchy for assistive technologies and is strongly discouraged. Similarly, avoid using <h3> immediately after <h1> without an intervening <h2> whenever possible.
For accessibility, screen readers announce heading levels, helping users understand document structure. Search engines use this hierarchy to determine content relationships and importance. Properly nested headings improve both user experience and SEO performance.
