Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<h1>Most Important - Page Title
<h2>Major Sections
<h3>Subsections
<h4>Sub-subsections
<h5>Rarely Used
<h6>Least Important
<h1>2em (32px)<h2>1.5em (24px)<h3>1.17em (18.72px)<h4>1em (16px)<h5>0.83em (13.28px)<h6>0.67em (10.72px)See how all six heading levels look and behave in practice
<h1>Main Page Title (H1)</h1>
<p>This is the most important heading - use only once per page.</p>
<h2>Major Section (H2)</h2>
<p>Used for main sections of your content.</p>
<h3>Subsection (H3)</h3>
<p>For subsections within H2 sections.</p>
<h4>Sub-subsection (H4)</h4>
<p>For further nested content.</p>
<h5>Deep Nesting (H5)</h5>
<p>Rarely needed in most documents.</p>
<h6>Deepest Level (H6)</h6>
<p>The smallest heading level.</p>Loading preview...
Explore proper heading structure with nested sections and subsections
✓ Sequential Order<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>✓ One H1 per Page<h1>Page Title</h1> <p>Only one h1 element</p>
✗ Skipping Levels<h1>Title</h1>
<h3>Wrong!</h3>
<h5>Skipped h2, h4</h5>✗ Multiple H1s<h1>First Title</h1> <h1>Second Title</h1>
<p> Your text content goes here. It can be as long or short as needed. </p>Block-level element (starts on new line)
Default margin top and bottom
Can contain text and inline elements
Learn text alignment, indentation, line spacing, and paragraph formatting
aria-labelledbyReference heading IDs for sections
aria-labelledby="heading-id"aria-levelSpecify heading level for custom elements
role="heading" aria-level="2"Build accessible documents with ARIA labels, landmarks, and semantic structure
Structure
Content
Technical
Learn SEO best practices with proper heading hierarchy and keyword placement
Fluid typography that scales between min and max values
Scale based on screen size
| Element | Mobile | Tablet | Desktop |
|---|---|---|---|
| h1 | 1.75-2rem | 2.25-2.5rem | 2.5-3rem |
| h2 | 1.5-1.75rem | 1.875-2rem | 2-2.25rem |
| h3 | 1.25-1.5rem | 1.5-1.75rem | 1.75-2rem |
| p | 1rem | 1-1.125rem | 1.125rem |
| small | 0.875rem | 0.875rem | 0.875-1rem |
Create text that scales beautifully across all device sizes using CSS clamp()