Semantic HTML

Published Jul 30, 2021Updated Oct 15, 2023
Contribute to Docs

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>

Semantic Tags

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.

Testing and Validating for Browser Compatibility

Testing and validating for browser compatibility is essential in web development to ensure a consistent user experience. It is best practice to employ well-supported modern semantic HTML tags, and confirm their compatibility using resources like Can I use. Additionally, the use of validation tools like the W3C Markup Validation Service are valuable for maintaining code quality, identifying errors, and ensuring compliance with web standards. These practices can aid in supporting compatibility across various browsers and devices.

Semantic HTML Best Practices

It is important to choose tags that accurately convey the content’s meaning and purpose. Avoid common mistakes like using <article> and <section> tags interchangeably. In the following example, using <article> for each subsection correctly represents self-contained content (news articles), while <section> encapsulates the broader category ‘Technology News,’ aligning with their intended semantic purposes.

<section>
<h1>Technology News</h1>
<article>
<h2>Latest Smartphone Releases</h2>
<p>Discover the newest smartphones hitting the market...</p>
<!-- Article content here -->
</article>
<article>
<h2>Upcoming Tech Events</h2>
<p>Stay updated on the latest tech events & conferences...</p>
<!-- Article content here -->
</article>
</section>

Semantic Tag Visualization for Technology News

Proper nesting is a fundamental aspect of semantic HTML. So, it is crucial to structure content logically to reflect hierarchical relationships between semantic elements. For instance, avoid the common mistake of placing the <aside> element directly within the main content. The <aside> tag is intended for content that is to be positioned to the side, or flanking, separate from the primary content.

<main>
<article>
<!-- Main content -->
</article>
<aside>
<!-- Sidebar content -->
</aside>
</main>

Drawbacks of Using Semantic HTML

Using semantic HTML tags is generally recommended for creating accessible and well-structured web content, but there are potential challenges to consider, such as increased complexity, limited browser support, a learning curve for new developers, and the need for ongoing maintenance. Additionally, for very simple web pages or prototypes, using minimal HTML may be more efficient due to potential file size concerns in performance-sensitive applications.

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.

All contributors

Looking to contribute?

Learn HTML on Codecademy