Semantic HTML

Published Jul 30, 2021Updated Jul 18, 2023

Semantic HTML introduces meaning to the code we write. Developing with semantic HTML means using HTML tags that are representative of the content so that browsers can appropriately parse the content of the site.

Non-Semantic Tags

Tags such as a <div> or <span> represent non-semantic HTML: these tags do not convey any information about their content. These tags are multipurpose containers that can support a variety of content. The use of these tags obscures the contents of a page and does not capitalize on the inbuilt attributes available in the use of the appropriate semantic tags.

<!-- Non Semantic HTML -->
<div id="footer">
  <p>This is a footer</p>
</div>

Semantic Tags

Semantic tags, such as <header> or <footer>, are designated for a specific purpose, which is communicated by the tag name. In addition to providing better clarity to the organization and content of a page, semantic tags enable additional features for accessibility. For example, using the <button> tag for controlling any embedded media also allows for navigation, and use of the button via keyboard.

<!-- Semantic HTML -->
<footer>
  <p>This is a footer</p>
</footer>

Why Use Semantic HTML?

Accessibility: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well. This is because screen readers and browsers are better able to interpret the content of the site.
Readability: Semantic HTML also makes the website’s source code easier to read for other web developers.
SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit a webpage. With better SEO, search engines are better able to identify the content of a website and weigh the most important content appropriately.

Semantic HTML

<address>: Represents the contact information of a business or person.
<article>: Represents a part of a page which is self-contained and could be published elsewhere. Common uses include blog posts or magazine articles.
<aside>: Represents a part of a page which is relevant to the current content, but not a part of it directly. It can be used for related links, for clarifying a statement from the current article, or even for advertising meant for the current page.
<details>: Encapsulates the <summary> element and any additional details which are only visible when the element is in an open state.
<figcaption>: Describes the media encapsulated within the <figure> element.
<figure>: Encapsulates media such as an image, diagram, or code snippet.
<footer>: Represents a part of a page which is meant to be at the end of a completed block of content. Common uses include copyright information for the page or additional links to relevant pages.
<header>: Represents a part of a page which is meant to be introductory. It can include heading tags, a logo, a search bar, and navigation elements.
<main>: Represents the primary content within the body element of the web page.
<mark>: Represents part of a text that should be rendered as marked or highlighted.
<meter>: Represents either a fractional value or a scalar value within a known range.
<nav>: Defines a block of navigation links such as menus and tables of contents.
<progress>: Used to display a progress bar.
<rb>: Representing the base component in ruby annotations for East Asian text, its use has declined and is now deprecated.
<rt>: Provides support for East Asian typography such as translations, pronunciation, or transliteration.
<ruby>: Represents small annotations usually used for showing pronunciation of Japanese and East Asian characters.
<section>: Defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
<summary>: Acts as a label for the <details> element and reveals additional information when clicked.
<time>: Represents a time-related piece of information and can take a datetime attribute that makes it machine-readable.