Semantic HTML describes what a part of a page means, not just how it looks. A heading identifies a section, navigation groups useful links, and the main element marks the page's main content. In an interview, explain the purpose of an element before discussing its appearance.

The following fragment represents a fictional public news page. Styling is deliberately omitted so the structure can be discussed on its own.

How would you organize a small article page?

<header>
  <a href="/">Town Notes</a>
  <nav aria-label="Main navigation">
    <a href="/news">News</a>
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <article>
    <h1>A new reading room opens</h1>
    <p>The fictional library now has a quiet room.</p>
    <section>
      <h2>What visitors can use</h2>
      <p>Desks and reference books are available.</p>
    </section>
    <section>
      <h2>How to find it</h2>
      <p>The room is beside the main desk.</p>
    </section>
  </article>
</main>
<footer><a href="/contact">Contact Town Notes</a></footer>

The outer header belongs to the site. The article can be understood as a separate piece of content. Its sections divide two different reader questions. Main identifies the main content of this particular page rather than every important-looking box.

When would you choose article instead of section?

An article represents a self-contained composition. A section groups a thematic part of a document when that grouping is useful. Neither element means “draw a card.” If a container exists only to apply layout or styling, a div may be the honest choice.

For the news page, the report is the article, while directions are one section within it. A collection of related reports might contain several articles. Explain the content relationship rather than replacing every div with a more impressive tag.

How should heading levels be chosen?

Use heading levels to express the visible hierarchy. This page has one main title and two sections directly under it. A subsection inside directions could use an h3. Choose a level for its role, not because the browser's default font size happens to match the design.

Do not rely on section nesting to turn a collection of h1 elements into a clear heading sequence. Make the intended levels explicit. A reader navigating headings should be able to understand the same structure as someone scanning the page visually.

Does every group of links need nav?

No. Nav is useful for major navigation groups. A paragraph containing one reference link does not automatically become a navigation region. When the page contains several navigation regions, useful labels can distinguish their purposes.

The example uses a short label for the main menu. A table of contents would serve a different purpose and could have a different label. Repeating “navigation” as every link's visible text would make the page less helpful.

What does semantic structure not prove?

It does not prove the text is correct, the page is accessible in every situation or a search engine will rank it highly. Native structure gives browsers and assistive technology useful information. You still need meaningful text, sensible focus behavior, contrast and working controls.

Likewise, an article element is not Article structured data. HTML structure and JSON-LD are separate mechanisms. Do not promise a rich result merely because an element has been renamed.

How would you check this answer?

  • Read the page with CSS disabled and check whether the order makes sense.
  • Inspect the heading list and identify the main title and sections.
  • Check that the main content region is not duplicated unnecessarily.
  • Use descriptive link text and test keyboard access.

For a follow-up exercise, add a related-reports area. Decide whether it is a section of the main story or supporting content with its own purpose. State that relationship before choosing a tag.

References and next practice

developer.mozilla.org — html structure

Browse interview topics · Practise a question in Interview Challenge · How to Answer Technical Interview Questions Out Loud