9. Block-Level vs. Inline Elements

Every HTML element falls into one of two major categories. Understanding this distinction is fundamental to structuring your layouts.

9.1 Block-Level Elements

Block elements always start on a new line and take up the full width available, pushing adjacent content below them. They create large structural divisions.

Examples: <h1> - <h6>, <p>, <div>, <section>, <ul>, <form>.

html

I am a block element.

I am also a block element, forced onto a new line.

9.2 Inline Elements

Inline elements only take up as much width as necessary (the size of their content). They flow naturally within the content of a block-level element, appearing side-by-side.

Examples: <a>, <span>, <strong>, <em>, <img>.

html

This text contains an inline element and another inline element.

Key Difference: You cannot place a block-level element inside another inline element. (E.g., you can't put a <p> inside an <em>).