Difficulty: Beginner
HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important). Headings define the hierarchical structure of your content, much like an outline in a book with chapters, sections, and subsections. They are block-level elements, meaning each heading starts on a new line and takes the full available width.
The <h1> element represents the main heading of the page and should typically appear only once per page. It tells both users and search engines what the page is primarily about. The <h2> elements represent major sections under the main topic, <h3> elements are subsections within an <h2>, and so on. You should not skip heading levels - going from <h1> directly to <h3> without an <h2> in between breaks the logical document outline and can confuse screen readers.
Headings play a critical role in Search Engine Optimization (SEO). Search engines like Google use headings to understand the content and structure of your page. The <h1> carries the most weight for ranking. Including relevant keywords naturally in your headings can improve your page's visibility in search results. However, stuffing keywords or using multiple <h1> tags is considered bad practice and can actually hurt your rankings.
Accessibility is another major reason to use headings correctly. Screen reader users often navigate pages by jumping between headings - it is one of the most common navigation strategies for people with visual impairments. The JAWS screen reader, for example, lets users press the H key to jump to the next heading, or press a specific number (1-6) to jump to headings of that level. If your headings are out of order or used only for visual sizing, this navigation breaks down.
Browsers apply default styles to headings - <h1> is the largest and boldest, decreasing in size through <h6>. However, you should never choose a heading level based on its default visual size. Always choose the semantically correct level for your content hierarchy, then use CSS to style the heading to the visual size you want. A common mistake is using <h3> everywhere because you like its default size - instead, use the correct heading level and apply CSS: h3 { font-size: 24px; }.
<h1>Main Page Title (h1)</h1>
<h2>Major Section (h2)</h2>
<h3>Subsection (h3)</h3>
<h4>Sub-subsection (h4)</h4>
<h5>Minor heading (h5)</h5>
<h6>Smallest heading (h6)</h6>Each heading level has a default size and boldness. h1 is the largest and most prominent, while h6 is the smallest. Browsers apply these default styles automatically.
<h1>Web Development Guide</h1>
<h2>1. HTML Basics</h2>
<h3>1.1 What is HTML?</h3>
<h3>1.2 Document Structure</h3>
<h2>2. CSS Fundamentals</h2>
<h3>2.1 Selectors</h3>
<h3>2.2 Box Model</h3>
<h4>2.2.1 Margin</h4>
<h4>2.2.2 Padding</h4>
<h2>3. JavaScript</h2>
<h3>3.1 Variables</h3>
<h3>3.2 Functions</h3>Headings create a logical outline. Each h2 is a major section under the h1 topic. Each h3 is a subsection within its parent h2. This hierarchy helps screen readers and search engines understand content structure.
<!-- WRONG: Skipping heading levels -->
<h1>My Blog</h1>
<h4>First Post</h4> <!-- Skipped h2 and h3! -->
<!-- WRONG: Using headings for visual size -->
<h5>This is not really a heading, I just wanted small bold text</h5>
<!-- CORRECT: Use CSS for styling instead -->
<h2>First Post</h2>
<p style="font-weight: bold; font-size: 14px;">Small bold text without using a heading</p>
<!-- WRONG: Multiple h1 tags -->
<h1>Main Title</h1>
<h1>Another Main Title</h1> <!-- Should be h2 -->
<!-- CORRECT -->
<h1>Main Title</h1>
<h2>Secondary Title</h2>Never skip heading levels, use headings just for visual styling, or have multiple h1 tags. Choose the semantically correct level and use CSS for visual adjustments.
h1-h6, Heading Hierarchy, SEO, Document Outline, Accessibility