HTML Headings

Understanding heading levels and hierarchical structure.

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading, while <h6> defines the least important heading.

Heading Hierarchy

<h1>: Main Page Title / Subject
<h2>: Major Sections
<h3>: Sub-sections
<h4>, <h5>, <h6>: Granular sub-headings

Example

html

<h1>Main Title</h1>
<h2>Section</h2>
<h3>Sub Section</h3>

Interview questions

Why is it important to follow a logical heading hierarchy (H1 -> H2 -> H3)?

Screen readers use headings to construct a table of contents for navigation. Search engines also scan headings to parse the topic and structure of your page. Skipping heading levels breaks accessibility flow.

Practice

Write a document outline for an article with headings representing the title, two main sections, and sub-sections inside the first section.

Hint: Use one h1, two h2s, and one or two h3s.