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 HTML5. 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. is about choosing the element that best presents the purpose of the content. Examples include using a button for a page 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 DOM. And the DOM must make sense.
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 for example quotes (<blockquote>) give meaning to the content.
  • Buttons(<button>) and links(<a>) add interaction with the 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.

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

If you are a developer, consider what ends up in the DOM, because that’s what your users and their technology will receive. Take the time to study and learn HTML5 thoroughly.

Top ↑

A good overview of all HTML5 elements

Top ↑

Style guides for Markup for WordPress

Top ↑

About the use of semantic HTML5

Top ↑

Screen reader text class

Last updated: