Understanding Block vs Inline Elements

Using Semantic Tags & Including a Practice Form

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.

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 containsinline strong text that flows in line.

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

block element

inline element inline element inline element inline element inline element