Understanding Block Vs Inline Elements

Using Semantic Tags & Inculding Pratice Form

What are Block Elements?

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

Examples include: div, p, header

This is a block
This is a block paragrapth

What are Inline elements?

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

Examples include: span, a, strong

This text contains an inline span element

This contains inline strong text

Comparison

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

Block element
Block element
Block element
Block element
Block element
Block element
Inline element Inline element Inline element Inline element Inline element

@ 2025 Block Vs Inline Element Tutorial