When I started on the web, way back when, I only had a few resources to go on. There was a thick CSS book that looked like a dictionary. And there were obscure blog articles online that wrote about buttons and h1 headings and divs.
That was it.
The first time I heard the word semantic, as in semantic HTML, was when I started looking into why a client got a complaint that their website didn't work. I imagine lots of developers today have the same experience for the first time.
So what the hell is semantic HTML anyway?
Semantic HTML means HTML elements that actually describe what your content is, not how it looks. If you want a title to describe the content of your page, use a heading. If you want things to click on and make stuff happen, use a button. If you want to go from page to page, use an anchor tag.
Seems simple. You don't even need to learn a bunch of new stuff. Most semantic elements work exactly like your divs and spans. They just have more meaning. Replace your header div with <header>. Use <main> for your main content area. Throw your sidebar content in an <aside>. When you're building a navigation menu, use <nav>. Use <section> and <article> where they make sense.
But where do things make sense?
Most developers don't know. They build websites that only work if you use a mouse and have perfect vision. Their div-heavy markup excludes millions of users, confuses search engines and becomes a maintenance nightmare.
Imagine writing HTML that works for everyone. Screen readers navigate effortlessly. Search rankings improve. And your code actually makes sense six months later.
Most developers either memorise every HTML5 element or stick with divs forever. Both approaches miss the point.
Practical semantic HTML solves real problems. It doesn't give you accessibility for free. That's a myth. But it does make things easier.
I've started to write an email course on semantic HTML. I want to teach you for free, among other things:
- how to pick the right HTML element for each situation
- simple techniques that make your websites work better with screen readers
- some CSS tricks that only work when you use proper semantic markup
I want to have the course done by the end of June, early July.
The course will be free for everyone.