Block-level Container
Both <div>
and <span>
are container elements, but they are used differently.
<div>
(Block-level Container)
- Stands for Division.
- A block-level element → always starts on a new line.
- Used to group larger sections of HTML (like paragraphs, images, forms).
- Commonly used with CSS for layout and styling.
Example:
<div style="background: lightblue; padding: 10px;">
<h2>About Me</h2>
<p>Hello, I am a web developer.</p>
</div>
Output :

<span>
(Inline Container)
- An inline element → does not start on a new line.
- Used to style or group small pieces of text inside other elements.
- Best for applying CSS styles to part of a sentence.
Example:
<p>My favorite color is <span style="color: red;">Red</span>.</p>
Output :
Key Difference Between <div> and <span> :
Feature | <div> | <span> |
---|---|---|
Type | Block-level | Inline |
Layout | Starts on a new line | Stays within text |
Usage | Grouping big sections | Highlighting small text portions |
Example | Layout containers | Inline text styling |