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 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.