HTML5 Handbook

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> :