Questions
8 of 8
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
Name 3 semantic tags introduced in HTML5?
Difficulty: 2/10
semantic HTML, accessibility, SEO
Semantic Tags Introduced in HTML5
HTML5 introduced several new semantic elements to give more meaning to web page structure. These elements help developers write cleaner, more accessible, and SEO-friendly code.
Examples of Semantic Tags from HTML5
- 1<article> – Represents self-contained, independent content such as a blog post or news article.
- 2<section> – Defines a thematic grouping of content, usually with a heading.
- 3<nav> – Represents a block of navigation links.
Example Usage
In short: Three common semantic elements introduced in HTML5 are <article>, <section>, and <nav>. They make web pages more meaningful and easier for both users and machines to understand.
Scenario Questions
0-2 years experience
- 1How would you markup a simple blog post page using three HTML5 semantic tags?
- 2If you replace a <div> that wraps your site header with a <header> element, what effect does that have for screen readers and SEO?
2-5 years experience
- 1During a sprint you need to add a navigation component that must be accessible; which semantic tag would you choose and why?
- 2Your team swapped a <section> for a <div> and noticed a drop in SEO rankings. Explain why that might happen and how you would fix it.
5-8 years experience
- 1Design a component library for a large e‑commerce site that enforces semantic HTML. What trade‑offs do you consider for backward compatibility and performance?
- 2How would you audit a legacy codebase of 200k pages to incrementally introduce semantic tags without breaking existing CSS or JavaScript?
8+ years experience
- 1Your organization plans a multi‑year migration from a monolithic template system to a component‑driven architecture emphasizing semantic HTML. How would you structure the rollout across teams while preserving SEO continuity?
- 2What governance model would you establish to standardize semantic tag usage across dozens of product squads and ensure long‑term maintainability?
Follow-up Questions
- Why would you prefer <nav> over a generic <div> for a navigation block?
- What are common accessibility pitfalls when semantic tags are misused?
- How do semantic tags influence search‑engine indexing?