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:
- Inclusive Design
- The Inclusion Principle
- Discoverability, Semantic Markup & Accessibility
- Creating a counter with React's useState hook
- More about Next.js Theme UI starter kit

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.