Detailed explanation
Semantic HTML means choosing elements that describe the purpose of their content, rather than choosing tags only for their appearance. For example, <nav> identifies a major navigation section, <main> contains the page’s primary content, and <article> represents a self-contained item such as a blog post. A <div> is a generic container with no inherent semantic meaning. Semantic elements can still be styled freely with CSS; meaning and visual presentation are separate concerns.
Browsers parse HTML into a document tree and use native element semantics, along with other information, to build an accessibility tree. Assistive technologies such as screen readers use this information to communicate structure and available actions. Landmarks such as navigation and main content let users move directly to important regions, while headings support navigation through sections. Native interactive elements also provide useful behaviour: a <button> supports keyboard activation by default, whereas a clickable <div> does not. However, semantic HTML alone does not guarantee accessibility; meaningful labels, alternative text, and sensible focus behaviour still matter.
In the example, <header> introduces the page, <nav> groups major navigation links, and <main> holds the central content. Inside it, <article> contains a post whose title is marked with <h1>, while <footer> contains closing information. Placement matters: a header or footer inside an article describes that article rather than the entire page. Choose <article> when the content makes sense independently, and use <section> for a thematic grouping, typically with a heading. Keep <div> for layout wrappers that have no more specific meaning.
Semantic markup matters because it makes pages easier for people and software to interpret. Search engines can use clear structure to understand content, but semantic tags do not guarantee higher rankings. Developers also benefit because meaningful elements communicate intent during reviews and maintenance. Interviewers usually look for correct element selection, an explanation of accessibility benefits, and an understanding that semantics come from content purpose—not from how an element looks.
Key points to remember
- Semantic elements describe content purpose; <div> and <span> are generic containers.
- Landmarks and logical headings help screen-reader users navigate a page.
- Native controls such as <button> provide semantics and built-in interaction behaviour.
- Clear document structure supports search-engine understanding without guaranteeing rankings.
- Meaningful markup improves readability and maintenance while CSS controls presentation.
Common mistakes candidates make
- Replacing every <div> with <section> or <article> without checking the content’s purpose.
- Assuming semantic elements automatically make a page fully accessible or improve its search ranking.
- Using headings for font size or clickable <div> elements instead of appropriate native controls.
Likely follow-up questions
What is the difference between <article>, <section>, and <div>?
<article> represents self-contained content, such as a post or review, while <section> groups content around a theme and typically has a heading. Use <div> when you need a generic wrapper without additional semantic meaning.
Should I add ARIA roles to semantic HTML elements?
Usually, an element’s implicit role is sufficient; for example, <nav> already identifies navigation. Use ARIA when necessary information cannot be expressed with native HTML, and remember that ARIA does not add keyboard behaviour.
Can a page have multiple headers and footers?
Yes: a page can have a site-level header and footer, while individual articles can have their own headers and footers. Their meaning depends on context, and nested article headers and footers do not serve as page-level landmarks.
Interview tip: Define semantic HTML, map two or three elements to their purposes, and explain accessibility and maintainability benefits using the example.