Skip to main content

What is semantic markup?

SEOMiddle~1 min read
Suggest an edit

Semantic markup is the use of HTML tags according to their meaning, not just for visual appearance.

Example:

Instead of:

html
<div id="header">...</div> <div id="menu">...</div>

They write:

html
<header>...</header> <nav>...</nav>

Main semantic tags:

  • <header> - the header of a page or section
  • <nav> - the navigation menu
  • <main> - the main content
  • <section> - a logical section
  • <article> - a self-contained piece of content (a post, a news item)
  • <aside> - side information
  • <footer> - the footer

Why this matters:

  1. Clearer for search engines It improves SEO - the crawler sees what is located where.
  2. Accessibility (a11y) Screen readers understand the structure - a visually impaired user navigates more easily.
  3. Maintainability of code A developer understands faster what a block is and why it is there.
  4. Future resilience Semantic markup stays relevant in standards for longer.

Conclusion: Semantic markup is about meaningful structure, not just appearance. It makes code readable not only for browsers, but also for people, robots, and assistive technologies.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit