Document Structure and Semantic HTML: Interview Q&A

Semantic HTML is about describing what content means, not choosing a tag because its default appearance looks convenient. These questions test whether you can build a page that remains understandable beyond its visual styling.

1. What is semantic HTML?#

Semantic HTML uses elements that communicate the role of their content. A nav identifies a navigation area, main identifies the page's primary content, and article represents a self-contained composition. The browser exposes this meaning through the document structure, which helps assistive technology and makes code easier for another developer to maintain.

2. What is the difference between div and section?#

A div is a generic container with no particular semantic meaning. A section represents a thematic grouping of content, usually with a heading. Use div when grouping is needed for styling or scripting but no more specific element fits. Do not replace every div with section; that creates meaningless structure rather than better semantics.

3. What is the difference between article and section?#

An article is a self-contained piece that could make sense on its own, such as a news story, forum post, or product review. A section groups related material within a larger page or article. An article may contain sections, and a page may contain several articles. Choose based on the content's relationship, not on the desired layout.

4. What are the main page landmarks?#

Common landmarks include header, nav, main, aside, and footer, with form and section sometimes exposed as landmarks when they have accessible names. They help assistive-technology users move between important regions. A page can have several headers or footers for different sections, but it should normally have one primary main region.

5. Can a page contain more than one header or footer?#

Yes. A page can have a document header and separate headers for articles or sections. The same applies to footers. Their meaning depends on their nearest sectioning context. They are not simply synonyms for the top and bottom of the browser window.

6. How should heading levels be used?#

Choose heading levels to express the hierarchy of the content. A page title is commonly an h1, followed by h2 headings for major sections and h3 headings for subsections. Do not select a heading level because its default font size looks right; use CSS for size. A section does not automatically reset the heading outline, so maintain a clear hierarchy yourself.

7. Does every page have to contain exactly one h1?#

A single clear page-level h1 is a useful convention because it makes the main subject easy to identify. HTML does not require exactly one h1, however. More important is a coherent heading structure that reflects the content and does not skip levels without a reason.

8. When should you use aside?#

Use aside for content related to the surrounding content but not part of its main flow, such as a related-links panel, author information, or a glossary note. A sidebar is often an aside, but visual position alone does not make something an aside. A primary navigation menu should use nav.

9. What is the purpose of figure and figcaption?#

figure groups self-contained content such as an image, code example, diagram, or chart. figcaption supplies its caption. A figure can be moved or referenced separately without breaking the surrounding text. Not every image needs a figure; use it when a caption or grouped reference is useful.

10. Why should tables not be used for page layout?#

Tables describe data with row-and-column relationships. Using them for general page layout gives assistive technology a false impression that the content is tabular data and makes responsive layout harder. Use CSS Grid or Flexbox for layout and table elements when the relationship between values is genuinely tabular.