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 am human, a father, and a problem solver: an inclusive tech and people leader with a passion and proven track-record in recruiting and leading compassionate, productive teams—remote and on-site—within a continuous learning culture. My teams and I champion usable, accessible digital products and online experiences. My work, passion and values also intersect with advising small businesses and political campaigns, outdoor and education advocacy, community building, and amplifying voices from historically marginalized communities. Learn more about Manny

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.