Semantic HTML: Why <div> Is Not Enough

Title: Semantic HTML: Why <div> Is Not Enough

URL Source: https://medium.com/@emulodavid/semantic-html-why-div-is-not-enough-dcef52c530a7?source=rss------seo-5

Published Time: 2026-04-12T20:03:59Z

Markdown Content:
# Semantic HTML: Why <div> Is Not Enough | by David Emulo | Apr, 2026 | Medium

[Sitemap](https://medium.com/sitemap/sitemap.xml)

[Open in app](https://play.google.com/store/apps/details?id=com.medium.reader&referrer=utm_source%3DmobileNavBar&source=post_page---top_nav_layout_nav-----------------------------------------)

Sign up

[Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2F%40emulodavid%2Fsemantic-html-why-div-is-not-enough-dcef52c530a7&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)

[](https://medium.com/?source=post_page---top_nav_layout_nav-----------------------------------------)

Get app

[Write](https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------)

[Search](https://medium.com/search?source=post_page---top_nav_layout_nav-----------------------------------------)

Sign up

[Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2F%40emulodavid%2Fsemantic-html-why-div-is-not-enough-dcef52c530a7&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)


# Semantic HTML: Why `<div>` Is Not Enough

[](https://medium.com/@emulodavid?source=post_page---byline--dcef52c530a7---------------------------------------)

[David Emulo](https://medium.com/@emulodavid?source=post_page---byline--dcef52c530a7---------------------------------------)

Follow

3 min read

·

6 hours ago

[](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Fdcef52c530a7&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40emulodavid%2Fsemantic-html-why-div-is-not-enough-dcef52c530a7&user=David+Emulo&userId=4d37d3e59f61&source=---header_actions--dcef52c530a7---------------------clap_footer------------------)

[](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fdcef52c530a7&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40emulodavid%2Fsemantic-html-why-div-is-not-enough-dcef52c530a7&source=---header_actions--dcef52c530a7---------------------bookmark_footer------------------)

[Listen](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2Fplans%3Fdimension%3Dpost_audio_button%26postId%3Ddcef52c530a7&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40emulodavid%2Fsemantic-html-why-div-is-not-enough-dcef52c530a7&source=---header_actions--dcef52c530a7---------------------post_audio_button------------------)

Share

Press enter or click to view image in full size


Div soup (nested boxes, no meaning)

HTML semantics (or semantic markup) is basically the use of HTML tags to clearly describe the meaning or role of the content they wrap, instead of just using them for styling or layout.

For example:

**Non-semantic** elements like `<div>` and `<span>` don’t really tell you anything about the content. They’re just generic containers. A browser (and even another developer) can’t infer meaning from them alone.

But **Semantic elements** like `<article>`, `<table>`, `<img>`, `<header>`, `<nav>` these actually describe what the content _is_ and what role it plays on the page.

Let’s make it clearer with a simple comparison.

**Bad HTML (just**`<div>`**s everywhere, no meaning):**

<div class="container">

<div class="header">

My Blog

</div>

<div class="nav">

Home | About | Contact

</div>

<div class="content">

<d