Understanding Block vs Inline Elements

Using Sematic Tags & Including a Practice Form

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

Exapmles 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>, <stong>

This is a paragraph with an inline span element inside

This text contains inline strong text that flows in line.

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

block element
block element
block element
block element
block element

inline elementinline elementinline elementinline elementinline element