HTML
Why semantic tags matter
Learn why semantic tags matter for accessibility and SEO.
What is a semantic tag?
You can build a page with <div> and <span>, but those tags say nothing about what the content means. Semantic tags wear their role in their name: <article> is a piece of writing, <nav> a menu, <footer> the bottom of the page.
Semantic HTML explains content by structure and meaning. The browser, search engines and screen readers grasp the page's purpose faster. People reading the code also see at once what each part does.
Accessibility and SEO
Semantic tags help both sides. Accessibility lets screen-reader users make sense of the page; when they meet a <nav>, they hear 'menu'. SEO (search engine optimisation) helps the page show up in the right searches; search engines weigh the importance of content through its semantic structure.
So a single <header> tag aids both people and machines. That is why semantic tags are not just decoration; they truly raise the quality of a page.
What we saw in this lesson
Keep these points in mind:
<div> is a container's name; it carries no meaning.- Semantic tags wear their role in their name.
- Accessibility and SEO grow stronger with semantic tags.
Now we are ready to learn the semantic tags one by one: <header>, <footer>, <nav>, <main>, <article>, <section>, <aside>, <address>.
Test yourself
-
What is the core goal of semantic HTML?
- Give content meaning
- Colour the page
- Insert images
- Submit a form
Show answer
Give content meaning — Correct. Semantic HTML gives content clarity in structure and meaning.
-
Complete the goal of a semantic tag
<p>Semantic tags describe the ____ of the content.</p>
Show answer
<p>Semantic tags describe the meaning of the content.</p>
-
Match each concept to its role
- Semantic HTML
- Adds meaning to content
- Accessibility
- Helps screen readers
- SEO
- Ranks in search
- div
- Carries no meaning
Next lesson: Header and footer
