Beyond the Usual, Passive DEI Efforts in Tech

Blog: It's Just HTML

September 2019

This is a repost from a sample blog post I created last year for the Next.js Theme UI starter kit I've been maintaining. I thought it would be worth elevating as I believe semantic markup and accessibility is evergreen content.

Creating a webpage can seem like a daunting task, however, at it's core, a webpage is comprised of a basic structure, the trick is, keeping content meaningful and our ideas organized! 😜

Basic outline of a webpage

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Give your page a meaningful title right here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    Your content goes right here.
  </body>
</html>

The above example doesn't have any references to JavaScript or CSS for styling, it's just barebones HTML, which is all you really need for starters.

Unpacking the barebones

The lang attribute in the html tag lets screen readers know what language to read back your webpage's content in to a user. The title tag helps you give your webpage a title (the actual title, for instance, that one would see your page on a Google search result). The viewport meta setting helps you define your page as responsive or mobile-friendly.

Keep it Simple. Keep it Semantic.

Although the above example outlines the basics of creating a webpage, it's easy for one to deviate into a place where the HTML is not accessible, especially, if the markup becomes meaningless with the misuse of HTML tags.

Semantic Markup

Semantic markup is HTML that introduces meaning to a webpage rather than just the presentation of it. For example, you can display the text, Hello World, with either of the following HTML tags just fine:

<p>Hello world!</p>

and

<span>Hello world!</span>

However, the p tag and the span tag have different meanings to a screen reader, which is what someone with limited or no visual abilities would use to access your webpage's content.

Learn more about accessibility at the A11Y project.

Related:

I operate from a place of compassion, possibility and imagination. My work and efforts share a common goal: create a better, sustainable and equitable world by building inclusive communities, products & experiences.