How to implement Semantic HTML

MrDavis25 — Mon, 01 Sep 2025 17:24:54 +0000

Implementing Semantic HTML: What I Learned

Tags: Web development, Semantic html, SEO, Accessibility, A11y

This is my blog on implementing semantic html . Before this I just used

and everywhere without thinking much. But now I learned about semantic HTML and I see it makes a difference not only for the browser but also for SEO and accessibility.

What I Think Semantic HTML Means

Semantic HTML is just using tags that describe what they are.

Some examples I wrote down:

= top of the page or section = the main content = links for navigation = one piece of content = a group of things that go together = side content = bottom of the page or section Before I didn’t care about this. I just wanted the page to show something. But then I noticed with semantic tags it looks cleaner and also easier to understand. --- My Example Before (non semantic) Home About Learning Semantic HTML This is my second assignment in programming.

This works but it looks messy to me now. --- After (semantic) Home About

Learning Semantic HTML

This is my blog in implementing semantic html .

This looks much clearer. When I just read the code I can tell where the header, main content and footer are.

Why It Matters

SEO: search engines can tell what’s important on the page.

Accessibility: people with screen readers can skip around to or quickly.

Readability: even I can read my own code better.

Mistakes I Made

I tried to add 2 tags (but there should only be one).

I used without putting a heading inside it.

I also wrote extra ARIA roles when I didn’t need to.

How I Tested

I used Lighthouse in Chrome and it gave me SEO and accessibility scores.

I used Tab on the keyboard to move through links and check the flow.

I also checked my HTML in the W3C Validator.

My Takeaway

I thought HTML was just about putting things on the page, but now I see structure matters a lot. Using semantic HTML makes the page better for search engines, for accessibility, and for me when I come back later.

I’m still a beginner but I feel like I’m starting to write code the “right” way.
Here is my GitHub link https://github.com/MrDavis25

DEV Community: MrDavis25

How to implement Semantic HTML

Learning Semantic HTML