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 |