<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Related Tags

<h1>
Level 1 heading (main title)
<h2>
Level 2 heading
<h3>
Level 3 heading
<h5>
Level 5 heading
<h6>
Level 6 heading