Understanding Block vs Inline Elements

Using Semantic Tags & Including a Practice Form

What are Block Elements?

Block elements take up the full width available and always start on a new line.

Examples include: <div>, <p>, <header>

This is a block-level div element.

This is a block-level paragraph element.

What are Inline Elements?

Inline elements only take up as much width as necessary and do not start on a new line.

Examples include: <span>, <a>, <strong>

This is a paragraph with an inline span element inside.

This text contains inline strong text that flows in line.

Comparison

Block elements stack vertically, while inline elements flow horizontally in the same line.

block element
block element
block element
block element
block element
inline element inline element inline element inline element inline element inline element