Semantic HTML

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) isn’t dark magic. Most of it comes down to using semantic HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites.. Semantic HTML is about choosing the element that best presents the purpose of the content. Examples include using a button for an action, an a element for a link, and an h1 heading for the main page content.

Why semantic HTML?

All technology interacting with a website depends on what’s in the DOM (or Document Object Model.) The DOM is the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. that is produced by all the PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php., HTML, CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. and JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. in WordPress’s code. If the DOM is built with meaningful HTML5, browsers and other technology can figure out how to use and understand the website.

This includes browsers, screen readers, voice recognition software, your iWatch, and an almost infinite variety of other tools. Search engines also benefit if you use semantic HTML, so they better understand the content.

If you inspect a page with the inspector of your browser you can see the rendered DOM. The DOM is what your HTML looks like after it has been manipulated using JavaScript and interpreted by the browser.

The DOM in the browser inspector

Top ↑

HTML is a markup language

Most HTML elements have specific meanings:

  • HTML5 landmarks like <header><nav><main><aside> and <footer> give structure to a page.
  • Headings (<h1> up to <h6>), paragraphs (<p>), images (<img>), lists (<ul> and <ol>), and quotes (<blockquote>) tell the interpreter what this content is for.
  • Buttons (<button>) and links(<a href="link">) add interactions on a page.

When you use the right elements for the job, your site works better on all devices. You can always change the way they look by using CSS if the native look of an element is not to your liking.

The semantics of every element is defined in the HTML specifications. Some elements, such as span, are specifically defined as having no semantics. Not having semantics is also a valid choice: some text is only intended to be presentational, and is not intended to be interpreted in any significant way.

Not all semantic elements are directly interpreted by assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/Assistive_technology, strong and em are considered semantic, but don’t have any direct impact on how screen readers behave using default settings. However, many elements can optionally be interpreted by screen readers, and are still well worth using.

Note: Adding <h1>s to every <section> in a page, as proposed in early HTML5, is not valid, because no browser supports the HTML5 outline. Use of this model hinders screen reader users in understanding the web page. If you’re not convinced, read Computer says NO to HTML5 document outline by Steve Faulkner.

Top ↑

Examples

Top ↑

Incorrect use of HTML

// Incorrect, a div doesn’t get keyboard focus.
<div class="menu-toggle"></div>

// Also incorrect. You should use <a> only for a change of location, not to invoke an action.
<a class="menu-toggle" href="#">Menu</a>

Top ↑

Correct use of HTML

// Correct, works on every device.
<button class="menu-toggle">menu</button>

// Also correct: If you want to hide text 
// from vision, use the screen-reader-text class.
<button class="menu-toggle">
    <span class="screen-reader-text">menu</span>
</button>

Read more on the screen-reader-text class.

Top ↑

Test Tools

How do you test if the HTML you are using is valid? There are several tools for this:

It’s harder to check if your HTML is meaningful, because this highly depends on the content of your web page. Use common sense: search for the right element for the content and don’t suffer from Divitis.

Top ↑

Resources

HTML is the foundation all web output. Take the time to study and learn HTML thoroughly. If you’re using a library that generates output for you, make sure you know what it is doing.

Top ↑

A good overview of all HTML elements

Top ↑

Style guides for Markup for WordPress

Top ↑

About the use of semantic HTML5

Top ↑

Screen reader text class

Last updated: