Lesson 20 of 30

HTML Div

2 min read · Free · No login needed

The <div> tag is the most used element in web design. It is a generic block-level container: it has no meaning of its own, it adds no styling by itself, and it simply groups other elements together so you can style them or move them as one unit.

What divs are for

Layout: dividing a page into header, sidebar, main content, and footer areas.
Grouping: wrapping a heading, a paragraph, and a button that belong together — for example, one course card.
Styling: giving a group a background, a border, padding, or a width through a class.
JavaScript: giving a group an id so a script can show it, hide it, or change it.

Divs and meaning

Because a div means nothing, use it only when no better tag exists. A page header should be a <header>, a navigation menu a <nav>, the main content a <main>, and an article an <article>. These semantic tags (you will learn them in the Semantics lesson) help search engines and screen readers understand your page. Divs fill in the gaps between them.

Tip: A page made only of divs is called "div soup". It works, but it is hard to read and bad for SEO. Use semantic tags for the big sections and divs for the small groups inside them.

Example

<!DOCTYPE html>
<html>
<head>
<title>Div</title>
<style>
.card { border: 1px solid #ccc; padding: 16px; border-radius: 8px; }
</style>
</head>
<body>

<div class="card">
<h2>HTML Course</h2>
<p>Learn HTML from scratch, free.</p>
<button>Start Learning</button>
</div>

</body>
</html>

Output

Output — how it looks in the browser

Try it yourself: copy the code above into a file named test.html, open it in your browser, and change the text to see what happens. That is how you learn — by changing things and watching the result.

HTML Block and Inline Elements HTML Classes