Understanding Block vs Inline Elements

Using Sematic Tag & Including Pratice Form

What are Block Elements?

Block Elements take up the full width avaliable and always start on a new line

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

This is a block-level paragraph Element

What are Inline Elements?

Inline only ake 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

Comparison

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

Block element

Block element

Block element

Block element

Block element