The div Tag

The div Tag

The <div> tag is the most commonly used HTML element. It stands for "division" and is used as a container to group other elements together.

What Is a <div>?

A <div> is a block-level container with no semantic meaning. It doesn't affect the appearance of content by default — it simply groups elements for styling or layout purposes.

<div>
    <h2>About Us</h2>
    <p>We build educational tools for the web.</p>
</div>

Why Use <div>?

• Group related content — wrap a section of content together
• Apply CSS styles — style a group of elements at once
• Create layouts — use divs with CSS (Flexbox, Grid) for page layout
• JavaScript targeting — select a group of elements to manipulate

Block-Level Element

A <div> is a block-level element, meaning:

• It starts on a new line
• It takes up the full width available
• The next element starts below it

<div> vs <span>

Feature	<div>	<span>
Display	Block (takes full width)	Inline (wraps content only)
Line break?	Yes — starts a new line	No — stays in the text flow
Use case	Grouping sections, layout	Styling inline text

<div>This is a block container.</div>
<p>This has a <span style="color:red">red word</span> inline.</p>

Nesting Divs for Layout

<div class="page">
    <div class="header">
        <h1>My Website</h1>
    </div>
    <div class="content">
        <div class="sidebar">Navigation here</div>
        <div class="main">Main content here</div>
    </div>
    <div class="footer">
        <p>Footer content</p>
    </div>
</div>

Don't Overuse <div>

A common beginner mistake is using <div> for everything. When possible, use semantic HTML elements instead:

Instead of	Use
<div class="header">	<header>
<div class="nav">	<nav>
<div class="main">	<main>
<div class="footer">	<footer>
<div class="article">	<article>

Key Takeaways

• <div> is a generic block-level container
• Use it to group elements for CSS styling or JavaScript
• <div> is block-level; <span> is inline
• Prefer semantic elements (<header>, <nav>, <main>, etc.) over <div> when possible