Semantic HTML explained

Learn about semantic HTML for writing accessible, SEO and machine-readable friendly web content.

Semantic HTML. The term itself might sound technical and niche, but its impact on the web is anything but. It’s the foundation upon which accessible, maintainable, and search engine-friendly website content is built. Let’s dive into the core principles of semantic HTML, exploring its benefits, common pitfalls, and ultimately, why it’s a crucial skill for any web developer.

What is semantic in HTML?

Semantic HTML refers to using HTML markup that conveys the meaning or purpose of content, rather than just its appearance.

This approach enhances both human readability and machine understanding (like browsers, search engines, and assistive technologies) understand the structure and context of your web pages.

Instead of relying solely on generic HTML elements like div or span styled with CSS, semantic HTML utilizes elements like section, article, nav, aside, header, footer, or figure to clearly define the different parts of a webpage. This approach moves beyond purely visual presentation and focuses on the underlying content and its relationships.

The primary goal of using semantic HTML is to improve the clarity and structure of web content. By using elements that define their purpose, creators can create more meaningful and organized code, which improves significantly search engine optimization (SEO) and accessibility for users with disabilities.

Before using a generic HTML element, such as div or span, check the HTML documentation to determine if a more specific element exists that accurately describes the content you’re creating.

What is the difference between semantic HTML and traditional HTML?

The main difference between semantic HTML and traditional HTML is the way HTML elements are used to structure and provide meaning to the content of a web page.

Traditional HTML

In traditional HTML, generic elements like div or span are used to create the structure of a web page. These elements do not provide any inherent meaning to the content they contain.

Example:

<div class="header">Header</div>
<div class="nav">
  <div class="nav-item">Home</div>
  <div class="nav-item">About</div>
  <div class="nav-item">Contact</div>
</div>

In this example, the div elements are used to create a header and navigation menu, but the meaning of these elements is not clear from the HTML code alone.

Semantic HTML

In semantic HTML, elements that provide meaning to the content are used instead of generic elements.

Example:

<header>
  <nav>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html" aria-current="page">Contact</a></li>
    </ul>
  </nav>
</header>

Note, aria-current="page" indicates that the Contact link is the current page. This helps screen readers and other assistive technologies announcing that Contact is the current page, giving users better context.

Key differences

The key differences between semantic HTML and traditional HTML are:

• Meaningful elements: semantic HTML uses elements that provide meaning to the content, while traditional HTML uses generic elements.
• Structure: semantic HTML provides a clearer structure to the content, making it easier for browsers, search engines, and other web crawlers to understand.
• Accessibility: semantic HTML improves accessibility for users with disabilities by providing a clear and consistent structure to the content.

What is an example of a semantic code?

Several key elements form the foundation of semantic HTML. Understanding their purpose is crucial for effective implementation:

Examples of semantic HTML elements

Element	Description	Use case example
a	Define a hyperlink that links to another web page, file, email address, or a specific location within the same page.	Linking to other web pages, creating email links, enabling file downloads, facilitating in-page navigation, generating social media links, and enhancing accessibility.
article	Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.	A blog post, a forum post, or a news story.
aside	Represents content that is tangentially related to the main content of the document. It often contains information that is separate but related, such as sidebars, pull quotes, or advertisements.	Displaying content like advertisements, related links, author biographies, or supplementary information that supports the main content but isn’t essential to understanding it. It helps structure the page semantically and can improve readability.
button	Used to define a clickable button within an HTML form or anywhere in a document. It allows users to interact with web pages by triggering actions.	Submitting forms, triggering JavaScript functions (e.g., opening a modal, toggling content), navigating to other pages, and providing interactive controls within a web application.
details and summary	Used to create a collapsible content section. When used together, the summary element provides a clickable header that, when clicked, toggles the visibility of the content section inside the details element.	Providing expandable sections for additional details, such as FAQs, product specifications, or show/hide content. It helps to declutter the main content and improve user experience by offering information on demand.
dl, dt and dd	The dl element is used to create a description list, which pairs terms with their corresponding descriptions. It is ideal for scenarios where you need to present glossaries, metadata terms, or any other content that benefits from a term-description format. The dt element defines a term within a dl element. It is used to specify the term that will be described by the following dd element. The dd element provides the description or definition of the term defined by the preceding dt element. It can contain text, images, or other HTML elements to fully describe the term.	Creating glossaries or dictionaries, displaying metadata information, structuring FAQ sections, presenting contact information, showing configuration settings, and explaining technical terms or jargon.
header	Represents introductory content, often containing a heading, logo, or introductory text. It can appear at the beginning of a document, or within sections like article.	Providing a header for a webpage, a section of a page, or an article. It is commonly used at the top of a page to display a website’s title, logo, and main navigation. It can also be used within other elements like article or section to introduce the content of that section.
figure and figcaption	Used to represent illustrations, diagrams, photos, and code listings. The figcaption element provides a caption for the figure.	Displaying images, illustrations, code snippets, or other visual or textual content along with a descriptive caption. The figcaption provides context and explanation for the content within the figure, improving the accessibility and understanding of the content.
footer	Represents a footer for its nearest sectioning content or sectioning root element. It typically contains information about the section, such as the author, copyright information, contact information, or related links.	Displaying the footer of a webpage or a section of a page. It is often used at the bottom of a page to provide copyright notices, contact details, sitemap links, or other relevant information. It can also be used within other elements like article or section to provide a footer for that specific section.
h1-h6	Heading elements with various levels.	Used to define headings on a web page. They are also known as heading elements or header elements.
label	Used to define a label for an input element, making it easier for users to understand the purpose of the input field. It associates a text label with a specific form control.	Improving the usability and accessibility of forms by providing clear descriptions for input fields (like text boxes, checkboxes, radio buttons, etc.). Activating the label will focus the associated input field, and screen readers can announce the label when the user focuses on the input.
main	Specifies the main content of a document. There should only be one main element per page.	Defining the primary content area of a webpage. It is used to wrap the main content of the page, such as articles, blog posts, or application content. There should only be one element per document, and it should not be a descendant of article, aside, nav, header, or footer.
mark	Used to highlight text that has been marked or highlighted for reference or contrast.	Typically used to indicate text that is relevant or of interest, such as a search term or a keyword, but it does not imply any specific importance or emphasis.
nav	Defines a section of navigation links. This typically includes links to other pages or sections within the current page.	Containing navigation menus, site navigation, table of contents, or other navigational elements that help users move around the website or application. It improves the semantic structure of a page and aids in accessibility.
ol	Used to define an ordered (numbered) list of items. It groups a collection of related items where the order is significant.	Presenting steps in a process, ranking items, creating a table of contents, or displaying a list where the sequence is important for understanding.
p	Represents a paragraph of text.	Used to wrap blocks of text that make up the main content of a web page, such as articles, blog posts, or product descriptions.
section	Represents a thematic grouping of content, typically with a heading. Note that the section element will be assigned the role of region if it has an accessible name. This can be achieved by using aria-labelledby to reference a heading element within the section. If no accessible name is provided, the section defaults to the generic role, which does not convey the same significance to assistive technologies. See the difference:	Dividing a document into thematic sections, such as chapters, introduction, or content areas. It’s used to group related content together, improving the document’s structure and semantics. It is generally used when you want to group content that has a specific theme or purpose.
time	Used to represent a specific point or period in time. It can include a datetime attribute, which converts dates into a machine-readable format.	Typically used to provide a machine-readable format for dates and times, making it easier for search engines, browsers, or enable custom functionalities, such as setting reminders, and other tools to understand and process the information.
ul	Used to define an unordered (bulleted) list of items. It groups a collection of related items where the order does not matter.	Displaying lists of items where the sequence isn’t important, such as a navigation menu, a list of features, or a collection of related topics.

Benefits of semantic HTML

The benefits of using semantic HTML include:

• Improved accessibility. Semantic HTML makes web content more accessible to users with disabilities. Screen readers and other assistive technologies can easily interpret the structure and meaning of the content, as semantic HTML elements are exposed to these technologies with specific roles, properties, and states, allowing users to navigate and understand the page more effectively.
• Better search engine optimization (SEO). Search engines rely on HTML tags to understand the content and structure of a webpage. Semantic HTML provides clear signals, helping search engines index and rank content more accurately. This can lead to higher visibility in search results.
• Easier maintenance and updates of web pages. Semantic HTML makes code easier to understand and maintain. The descriptive element names clearly communicate the purpose of each section, making it simpler for developers to navigate and modify the code.
• Improved mobile behavior. Semantic HTML allow the browsers to provide native behavior and styling for specific elements, which can vary depending on the device type. For example, when using the select element, browsers will automatically provide a dropdown menu on desktop devices, while on mobile devices, it will often be displayed as a native select menu or a dialog box. Similarly, on tablet devices, it may be displayed as a popover or a modal window.
• Enhanced support for web crawlers and other automated tools. Semantic HTML help crawlers understand the organization and hierarchy of the content, making it easier for them to index the information accurately.
• Interoperability. Devices like smart speakers or bots can extract meaningful data.
• Built-in functionality. Some semantic elements come with default behaviors, such as keyboard navigation in forms, which reduces the need for extra coding.
• Styling. Browsers apply default CSS styles to many semantic elements, which can enhance the presentation of web pages without requiring additional effort from developers. These default styles are often referred to as user agent styles or browser styles. For example, the h1 element is often rendered with a large font size and bold font weight, while the p element is typically rendered with a standard font size and style.

What is semantic HTML in accessibility?

One of the most significant advantages of semantic HTML is its impact on accessibility by giving meaningful structure and context to web content, helping assistive technologies better interpret and navigate the page.

Meaningful structure for assistive technologies

Imagine navigating a website where everything is a div. The screen reader would have no way of knowing what constitutes the main content, the navigation menu, or the footer. Semantic elements provide crucial context, allowing screen readers to present information in a coherent and understandable manner.

For instance, using nav clearly identifies a navigation section, enabling screen readers to provide specific navigation-related functionalities. Similarly, using article to encapsulate a self-contained piece of content like a blog post allows screen readers to understand and navigate individual articles within a larger page.

Improved content understanding

Using semantic tags (e.g., h1 to h6 for headings, p for paragraphs, ul/ol for lists) communicates the hierarchy and organization of content. This allows users who rely on screen readers to understand the relationship between pieces of content, follow the logical flow, and get an overview of the page structure.

Enhanced keyboard navigation

Semantic HTML often comes with built-in keyboard accessibility support. For example, form elements such as label, input, and button provide clear relationships between form controls and their labels, improving usability for keyboard-only users and those using assistive devices.

Compatibility with ARIA attributes

Semantic elements reduce the need for excessive ARIA (Accessible Rich Internet Applications) roles and attributes, which can sometimes be complex and error-prone. Correct semantic markup paired with ARIA enhances accessibility without confusion.

Does semantic HTML improve SEO?

Beyond accessibility, semantic HTML significantly improves search engine optimization (SEO). Search engine crawlers use HTML structure to understand the content and relevance of a webpage. Semantic HTML elements provide clear signals to search engines about the page’s organization and key topics.

For example, using article with a clear header containing an h1 HTML element signals the main topic of the article, helping search engines index and rank the page appropriately. This structured approach allows search engines to better understand the hierarchy and relationships within the content, leading to improved search rankings.

Better content structure

• Search engines use semantic tags to understand the hierarchy and relationships between content.
• For example, article signals a self-contained piece of content, while section groups related content.

Enhanced crawling and indexing

• Semantic tags make it easier for crawlers to parse and index your site efficiently.
• nav helps bots identify navigation links, while main highlights the core content.

Rich snippets and featured results

• HTML tags like time, address, and figure can help search engines generate rich snippets, increasing click-through rates.

Keyword context

• Proper use of headings (h1 to h6) helps search engines understand keyword relevance and content structure.

Semantic HTML enhances maintainability and code readability

When code is structured semantically, it becomes much easier for developers (including those who didn’t write the original code) to understand the purpose of different sections and make necessary modifications. Instead of deciphering a complex chain of nested div tags with cryptic class names, developers can quickly identify and work with specific elements based on their semantic meaning.

This clarity reduces the risk of introducing errors during maintenance and makes collaboration between developers much smoother. The self-documenting nature of semantic HTML also contributes to long-term project sustainability, as the code remains understandable even after extended periods.

Web components

Another area where semantic HTML shines is in the context of web components. As web development increasingly embraces component-based architectures, semantic HTML plays a crucial role in defining the structure and meaning of individual components.

By using semantic elements within components, developers can create reusable and accessible UI elements that seamlessly integrate into larger applications. This approach promotes code reusability, maintainability, and accessibility across entire web projects.

Challenges and traps

The adoption of semantic HTML isn’t without its challenges. One common pitfall is over-reliance on semantic elements without proper consideration for their meaning. For instance, using article for every section of content, regardless of whether it’s truly a self-contained, independent piece, defeats the purpose. It’s crucial to understand the specific meaning and intended use of each semantic element to ensure they are applied correctly.

Another challenge is the temptation to use semantic elements solely for styling purposes. For example, using strong HTML element to make font weight bold. While semantic elements can be styled with CSS, their primary purpose is to convey meaning, not to replace CSS classes for purely visual effects. Combining semantic elements with appropriate CSS classes ensures both semantic correctness and visual appeal.

Considerations and best practices

When implementing semantic HTML, there are several considerations and best practices to keep in mind:

• Use semantic elements correctly. Make sure to use semantic elements in a way that accurately reflects their meaning and purpose.
• Avoid overusing semantic elements. While semantic elements are useful, overusing them can lead to cluttered and confusing code.
• Test for accessibility. Regularly test your website for accessibility using tools like screen readers and accessibility validators.

Structured data (JSON-LD)

In addition to semantic HTML, structured data (JSON-LD) can also be used to provide additional context and meaning to web content. Structured data is particularly useful when there are no HTML tags available to provide a meaningful description of the context. For example, if you’re describing a complex piece of data, such as a recipe or a product review, structured data can provide a way to describe the different components of that data in a machine-readable way.

Structured data is a standardized way of describing data on the web, and it can be used to provide information about things like:

• Events: dates, times, locations, and descriptions of events.
• People: names, addresses, phone numbers, and other contact information.
• Products: names, descriptions, prices, and reviews of products.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "Conference",
  "startDate": "2023-03-01T10:00:00",
  "endDate": "2023-03-01T18:00:00",
  "location": {
    "@type": "Place",
    "name": "New York",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "123 Main St",
      "addressLocality": "New York",
      "addressRegion": "NY",
      "postalCode": "10001",
      "addressCountry": "USA"
    }
  }
}
</script>

By using structured data and semantic HTML together, developers can provide a rich and meaningful representation of web content that can be easily understood by both humans and machines.

This web page uses also structured and you can see it in its source code.

Using ARIA and role attributes

ARIA (Accessible Rich Internet Applications) and role attributes are used to provide additional context and meaning to web content, especially when semantic HTML elements are not sufficient.

ARIA is a set of attributes that can be added to HTML elements to provide additional information about their role, properties, and state. This information can be used by assistive technologies, such as screen readers, to provide a more accurate and meaningful experience for users with disabilities.

Role attributes are used to specify the role of an HTML element, such as a button, link, or menu. This information can be used by assistive technologies to provide a more accurate and meaningful experience for users with disabilities.

Semantic HTML provides a way to add meaning to web content using HTML elements, such as header, nav, or main. However, sometimes semantic HTML elements are not sufficient to provide the level of detail and context needed for assistive technologies.

This is where ARIA and role attributes come in. By adding ARIA and role attributes to HTML elements, developers can provide additional context and meaning to web content, making it more accessible and usable for users with disabilities.

<button role="menuitem" aria-haspopup="true" aria-expanded="false">Menu Item</button>

In this example, the role attribute specifies that the button has a role of menuitem, while the aria-haspopup attribute indicates that the button has a popup menu associated with it. The aria-expanded attribute indicates whether the popup menu is currently expanded or collapsed.

By using semantic HTML, ARIA, and role attributes together, developers can provide a rich and meaningful representation of web content that can be easily understood by both humans and machines.

Frequently asked questions

See how HTML select element appears on mobile and desktop devices:

Summary

HTML standard changes and continues to introduce new semantic elements and attributes, further enhancing the ability to structure web content meaningfully. Elements like main, details, summary, and dialog provide even more granular control over the semantic structure of a page, allowing developers to create increasingly accessible and user-friendly web experiences. Staying up-to-date with the latest HTML specifications and best practices is essential for leveraging the full potential of semantic HTML.

In conclusion, semantic HTML is not just a coding best practice, but it’s a fundamental principle of responsible web development. By embracing semantic elements, developers can create websites that are more accessible, search engine-friendly, maintainable, and ultimately, more user-friendly.

While the initial learning curve might seem daunting, the long-term benefits of semantic HTML far outweigh the effort. It’s an investment in the future of the web, ensuring that websites are not only visually appealing but also semantically rich and accessible to everyone. The move towards semantic HTML is a move towards a more inclusive and understandable web, and it’s a direction all web developers should embrace.