HTML5 Div Span

What are <div> and <span> in HTML5?

They are generic container elements used to group other HTML content.
They have no semantic meaning on their own — they’re purely structural, used mainly for styling with CSS or scripting with JavaScript.

<div> – Block-level Container

Definition: A block-level element.

• Starts on a new line and stretches to the full width of its parent container.
• Use it to group sections of a page, create layouts, or apply styles/scripts to blocks of content.

Example:

<div>
<h2>About Us</h2>
<p>We provide tech solutions for businesses.</p>
</div>

---

<span> – Inline Container

Definition: An inline element.

• Does not start on a new line.
• Only takes up as much width as its content.
• Use it to style or manipulate small pieces of text within a larger block.

Example:

<p>Our CEO is <span class="highlight">Jane Doe</span> and she loves innovation.</p>

Our CEO is Jane Doe and she loves innovation.

---

Comparison Table

Tag	Type	Starts on new line?	Typical use
<div>	Block-level	✅ Yes	Grouping larger blocks (like sections, layouts)
<span>	Inline	🚫 No	Wrapping small parts of text or inline elements