Understanding Block vs Inline Elements

Using Semantic Tags &Including a Practice Form

Block elements take up the full width available and alwyas start on a new life

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

This is a block-level div element.This is a block-level div element.

This is a block-level paragraph element.

Inline elements only take asmuch width as necessary and do not start on a new life

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.

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

Block element

Inline 1 Inline 2 Inline 3 Inline 4