Mastering Semantic HTML to Elevate Web Accessibility

HTML is a markup language that determines how content appears on a web page. 

However, the quality of your HTML plays a significant role in how well it functions and whether it displays content as it should. This is particularly true for semantic HTML. 

In this blog, we take a closer look at the function of semantic HTML and how you can use it to better comply with web accessibility guidelines. 

What is Semantic HTML?

Unlike non-semantic HTML, which doesn’t convey meaning, semantic HTML conveys meaning, or the semantics, of the content contained within specific tags. 

Semantic HTML can be understood by both developers and browsers. By adding these tags to your web pages, you help define the roles and relative importance of different elements on your pages. 

What About Semantic HTML Elements?

Semantic HTML elements can be linked to both the meaning and presentation of content.

An example of a non-semantic HTML element would be <div> or <span>. Neither of these tags tells you anything about the content within them.

Then there are semantic elements such as <article>, <form>, or <table>, all of which clearly explain what content is present on a page. 

Why Semantic HTML Is Important

At its core, semantic HTML is designed to neaten and simplify your code, making it more accessible to users and search engines. Here are some of the main reasons why it pays to focus on semantic HTML.

Improves Web Accessibility

Many of your website visitors rely on assistive technology to access and engage with your website. Technology such as screen readers use semantic HTML to understand, process, and relay online content.

A web page that only consists of non-semantic HTML elements won’t be able to explain the specific meaning of different sections on a page or how they relate to each other. This is where semantic HTML elements make a difference. 

For example, instead of enclosing your headers and navigation in basic <div> tags, semantic tags such as <header> and <nav> are used. This provides disabled users with more context.

What’s more, a number of semantic tags are linked to keyboard accessibility. So, when a screen reader sees a <button> element, it gives a user the option to click it using the Enter key. The same applies to <table> elements, which gives users the option to browse using the arrow keys on their keyboards. 

By implementing the correct semantic HTML elements, you’re one step closer to a compliant and accessible website. 

Boosts SEO Efforts

As much as semantic HTML can aid in ADA accessibility compliance, it can also have a positive impact on your SEO efforts. 

Semantic markup makes it easier for search engines to crawl, navigate, and understand your website. It shows crawlers exactly what they should index, ensuring time isn’t wasted on repeated page elements. 

Increases Readability

Developers prefer semantic HTML because it makes code easier to read. With the ability to search for specific HTML elements, developers can carry out updates and improvements more quickly and easily. 

Coding a site with semantic HTML right from the start will ensure you can easily work with different developers in the future if you need to. 

HTML Semantic Tags Examples

Semantic HTML tags generally fall into one of two categories:

Tags for structure:

• <header> & <footer>: A header tag contains the introductory information of a page or section while the footer would include contact and copyright details.

• <nav>: This tag is used for any navigation links and is often nested in the <header> and/or <footer> tag. 

• <main>: Only one of these tags is used per page and will highlight the body of your copy. 

• <article>: The article tag could define a blog post or even a self-contained item. <article> tags indicates an element/piece of content that can exist by itself and keep context and meaning, if placed anywhere else.

• <section>: Using the <section> tag will help group similar types of content together. The types of content need to be contextually related for the tag to have meaning.

• <aside>: If you want to highlight any non-essential content, you can use the <aside> tag. 

Tags for text:

• <H1 – H6>: Header tags mark the headings of content in order of importance, with <H1> being the most important. 

• <p>: This tag highlights a standalone paragraph of text.

• <a>: Hyperlink HTML tags help developers and search engines identify links within content. 

• <ol> & <ul>: These tags are used for lists, with <ol> indicating an ordered list (numbered) and <ul> indicating an unordered list (bullet points).

• <q>: For any content that has a quote, you would use the blockquote tag. 

• <em> & <strong>: These tags are used to emphasize important information. 

• <code>: A code tag will highlight a block of computer code.

Each of these tags tells browsers, developers, and assistive technology more about the content contained within them, provided they are used in the right order and scenarios. 

For example, <h1>, <h2>, and <h3> should always be used in the right order. Mistakenly using a header tag instead of a <p> can also reduce the effectiveness of semantic HTML and make your content less accessible to disabled users. 

How to Use Semantic HTML Tags Correctly

Now that you have a better understanding of semantic HTML, let’s look at some essential best practices.

• Always use tags for their intended purpose. Semantic HTML tags should always be used correctly for them to benefit your site and your users. For example, using a blockquote <q> tag to indent text means a screen reader would see this as a quote and read it out as such. 
• Be wary of non-breaking space elements. Web editors will often use &nbsp; to add an extra space between elements instead of defining actual paragraphs. It’s recommended that you only use the margin or padding style property to add spaces. 
• Use header tags correctly. Along with using header tags in the correct order <h1>, <h2>, <h3> etc, make sure you’re not using them to bold non-essential text. Instead, turn to CSS to adjust the font weight. 
• Construct your pages using HTML, not visuals. You cannot duplicate the visual layout of your site using HTML. Make sure that you’re using the correct semantic HTML tags to identify different types of content, their importance, and how they’re potentially linked to each other. 

Semantic HTML and Accessibility

Through the correct implementation of semantic HTML, you can create a visually appealing site that is accessible to all users and performs well in search results.

Semantic HTML simplifies and improves coding efforts to ensure all on-page elements can be correctly identified and updated with ease. It also provides full access to disabled users who rely on assistive technology to navigate the web.

By following these best practices and familiarizing yourself with the most common semantic HTML tags, you’ll be able to host a website that performs well on all fronts.

FAQs