Semantic HTML: Describe Meaning, Not Just Looks
Semantic HTML uses tags that describe the content's role (e.g., <article>), not just its appearance. This helps screen readers and search engines understand your page, improving accessibility and SEO. The footgun is using <div> for everything.
Why it exists
Early web pages often used HTML for visual presentation, like using <table> for page layouts. This created a problem: the markup described how content should look, not what it was. Semantic HTML was introduced to separate a document's meaning from its presentation, creating a more accessible and machine-readable web.
The mental model
Think of your webpage as a document you're handing to a robot. Using only tags is like giving it a stack of papers with no labels. Using semantic tags like <header>, <main>, and <footer> is like putting those papers in clearly labeled folders. The robot (a screen reader or search engine crawler) now instantly understands the document's structure and purpose.
How it works
Instead of using a generic container like , you use the specific <nav> element. Instead of , you use <article>. While a browser might render these similarly by default, other user agents gain crucial context. A screen reader can announce "main navigation" when it encounters a <nav> tag, and a search engine can identify the primary content of the page when it's wrapped in <main>.
When to use it
Use semantic elements as the primary tool for structuring any web page. It is the foundation for modern accessibility (a11y), allowing users with assistive technologies to navigate your site effectively. It also provides clear signals to search engines for better SEO, helping them rank your content accurately.
When not to use it
There is no case where you shouldn't use semantic elements for their intended purpose. However, for purely presentational grouping where no specific meaning applies, a generic or is the correct choice. The goal is not to eliminate s, but to use them for styling hooks or generic containers after semantic options have been exhausted.
One canonical example
A standard blog page structure. The masthead is wrapped in <header>. The main navigation links are in a <nav> element. The primary content of the page is inside <main>. The blog post itself is an <article>, and a related links section might be an <aside>. Finally, the copyright and contact info at the bottom are in a <footer>. This structure is perfectly understandable to machines even before any CSS is applied.
Interview question
What is the primary benefit of using semantic HTML elements like <article> and <nav> instead of generic <div> elements for page structure?
- a.They convey the content's meaning and role to browsers, assistive technologies, and search engines.Correct
- b.They simplify JavaScript interactions by providing built-in event listeners for common actions.
- c.They automatically apply visually distinct styles, reducing the need for custom CSS.
- d.They make the webpage load significantly faster due to optimized browser parsing.
Why? this is the answer
Semantic HTML's main purpose is to describe the content's role and meaning, which is essential for screen readers to interpret the page for users with disabilities and for search engines to understand and rank content. While some elements might have default styles, their primary benefit is not visual presentation or performance optimization.
Just read this? Test yourself on what you have been reading.
Read the original → en.wikipedia.org
- #html
- #accessibility
- #seo
- #web standards
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on html — each one lists the topics its interview covers.
See open roles