HTML Div
The
is a generic block-level container with no semantic meaning. Use it when no semantic element fits.
div vs semantic elements
EXAMPLE
<!-- WRONG - everything is a div -->
<div class='header'>
<div class='logo'>MySite</div>
<div class='nav'>
<div class='link'><a href='/'>Home</a></div>
<div class='link'><a href='/about'>About</a></div>
</div>
</div>
<div class='main'>
<div class='article'>
<div class='title'>Hello</div>
<div class='body'>...</div>
</div>
</div>
<!-- RIGHT - semantic where possible, div where not -->
<header>
<a href='/' class='logo'>MySite</a>
<nav>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/about'>About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Hello</h1>
<p>...</p>
</article>
</main>
<!-- Use div for grouping that is purely visual -->
<div class='card'>
<h3>Pricing</h3>
<p>$10 / month</p>
<button>Buy</button>
</div>
<!-- Or for layout containers - flex/grid wrappers -->
<div class='grid grid-cols-3 gap-4'>
<article>One</article>
<article>Two</article>
<article>Three</article>
</div>
Why it matters
Reach for the semantic element first (header, nav, main, article, section, aside, footer). Use
when the meaning is purely visual (a card wrapper, a layout grid). Divs do not help users or search engines understand structure; semantic elements do.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Div</title>
</head>
<body>
<h1>HTML Div</h1>
<p>This is a demo page for the "HTML Div" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Wrap this section using the generic block-level container.
<
class="card">
<h2>Hello</h2>
</
>
Three letters. Block-level grouping element.
Discussion
Loading…