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
<!-- Example: These two paragraphs will stack vertically --> <p>I am a block element.</p> <p>I am also a block element, forced onto a new line.</p>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
<!-- Example: These spans will flow horizontally --> <p> This text contains an <span style="color: red;">inline element</span> and another <span style="color: blue;">inline element</span>. </p>Key Difference: You cannot place a block-level element inside another inline element. (E.g., you can't put a <p> inside an <em>).