What are H1, H2 & so on in web design?

A short, practical primer that ties the replies together and adds concrete guidance.

@Hugers asked what H1–H6 mean; @rajarajan2017 showed the raw tags, @HI2Japan made the helpful Word-heading analogy, and @Coleman correctly noted search engines look at headings for signals. Headings are semantic elements: they mark the document outline so browsers, screen readers, and crawlers know which text is a title, which are section headings, and how the page is organized. They are about structure first, appearance second.

Practical rules and cautions: use an H1 for the page or article title and H2 for top-level sections, H3 for subsections, etc. Keep headings short and descriptive, avoid using them solely to change font size (use CSS for styling), and do not stuff keywords into headings. HTML5 allows H1 inside sectioning elements (multiple H1s are valid in some patterns), but for clarity and broad compatibility most sites use one clear H1 per page. Screen readers let users jump by headings, so logical order matters — avoid jumping straight from H2 to H4.

A simple semantic pattern (for reference):

<header>
  <h1>Article or Page Title</h1>
  <nav>...</nav>
</header>

<main>
  <article>
    <h2>Section heading</h2>
    <h3>Subsection</h3>
  </article>
</main>

Brief troubleshooting tip: if navigation or accessibility tools seem confused, open the page in a browser inspector and review the heading order in the DOM — that usually reveals misplaced headings or headings used for visual styling instead of structure.