Writing semantically can be simply described as "writing code with meaning."
Writing Code with Meaning
In the early days of the web, developers used <table> or <div> for wrapping every content. Semantic HTML fixes this by choosing tags based on what the content is, and not just how you want it to look.
This means instead of wrapping HTML elements in tags that have no meaning, HTML elements are wrapped in tags that describe the content they are wrapping — so developers, search engines, and screen readers can have a better understanding of the content and know how to use it.
For example, a website comprises different components like the navigation bar, main content, header, and so on. To accurately describe these components to other developers and technology that will use them, it is best to use HTML tags that correctly describe the content being wrapped. If a content is for navigating the website then it should be wrapped in the <nav> tag, if it's footer content then use the <footer> tag. This is for the sake of accessibility, collaboration, and Search Engine Optimization (SEO).
| Tag | Semantic Purpose |
|---|---|
<header> | Contains introductory content, logos, or navigation for a page or section. |
<nav> | Defines a set of navigation links (menus, table of contents). |
<main> | Specifies the unique, primary content of the document. Only one per page. |
<article> | Represents a self-contained composition (like a blog post, news story, or comment). |
<section> | Groups related content together under a specific theme or heading. |
<aside> | Content indirectly related to the main content (sidebars, callouts, ads). |
<footer> | Contains end of page information like copyright, contact info, or site maps. |
<figure> | Used for self-contained content like images, diagrams, or code snippets. |
<figcaption> | Provides a caption or description for a <figure> element. |
<time> | Represents a specific period in time or a precise date. |
<mark> | Highlights text that is relevant in a specific context (like search results). |
Why Semantic HTML Matters
-
Accessibility — Screen readers (used by people with visual impairments) use semantic tags as "landmarks." A user can press a key to skip directly to the
<nav>or the<main>content. Without these tags, they have to listen to the whole page from top to bottom just to find what they want. -
SEO (Search Engine Optimization) — Semantic tags help search engines understand the structure and context of a page, which can positively influence how content is indexed and ranked. For example, a search engine can infer that content inside a
<main>tag is more central to the page's purpose than content inside an<aside>. -
Future-Proofing — As browsers and devices (like smartwatches or voice assistants) evolve, they rely on semantic HTML to understand how to display content on tiny screens or read it aloud.