HTML Tutorial

Block-level & Inline-level Elements

1 minute

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 : 

image

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

image

Key Difference Between <div> and <span> : 

Feature<div><span>
TypeBlock-levelInline
LayoutStarts on a new lineStays within text
UsageGrouping big sectionsHighlighting small text portions
ExampleLayout containersInline text styling

Previous
Article 8 of 14
Next