Why this is asked
This question probes a fundamental understanding of HTML beyond just putting content on a screen. It assesses a candidate's awareness of best practices, accessibility standards (WCAG), and search engine optimization (SEO), all of which are crucial for building robust, inclusive, and discoverable web applications. It differentiates engineers who build for humans and machines from those who only focus on visual output.
Semantic HTML involves using HTML tags for their intended meaning, rather than solely for their default visual presentation. For example, using <header> for introductory content, <nav> for navigation links, <article> for self-contained content, and <aside> for tangential content. This gives structure and meaning to web content, making it easier for browsers, screen readers, and search engines to interpret. It aids accessibility by providing a logical structure for assistive technologies, allowing users to navigate content efficiently. For SEO, search engine crawlers better understand the context and hierarchy of information, which can improve ranking.
<!-- Non-semantic approach (less accessible, harder for SEO) -->
<div class="header">
<div class="logo">My Site</div>
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</div>
<!-- Semantic approach (more accessible, better for SEO) -->
<header>
<h1>My Site</h1>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
<aside>
<h3>Related Content</h3>
<p>Links to other articles.</p>
</aside>
</main>
Gotchas: Misusing semantic tags or over-relying on ARIA attributes to fix poorly structured HTML. ARIA (Accessible Rich Internet Applications) should augment, not replace, semantic HTML. Using <div> for a button and then adding role="button" is less robust than using a <button> element directly, which comes with built-in keyboard accessibility and semantics.
References: MDN Web Docs: Semantic HTML, W3C ARIA Authoring Practices Guide