Blog:It's Just HTML
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>
Unpacking the barebones
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 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 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.
- 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.