🧱 Chapter Roadmap
1 How Elements Display
This is one of the most important concepts in web design! Every single HTML element has a default "Display Behavior". This behavior dictates how the element sits next to other elements on the screen.
The two main behaviors are Block and Inline.
2 Block-Level Elements
Think of Block-level elements as Heavy Bricks. When you place a brick down, nothing else can sit next to it. The next brick MUST go underneath it.
Core Rules of Block Elements:
- ✔️ They ALWAYS start on a brand new line.
- ✔️ They stretch out as far as possible to the left and right (100% width).
- 💡 Examples:
<div>,<p>,<h1>,<ul>
3 Inline Elements
Think of Inline elements like Beads on a String. They flow naturally next to each other in a line. They do not force new lines.
Core Rules of Inline Elements:
- ✔️ They DO NOT start on a new line.
- ✔️ They only take up exactly as much width as their content needs.
- 💡 Examples:
<span>,<a>,<strong>,<img>
4 The Ultimate Battle: <div> vs <span>
Both <div> and <span> are "Non-Semantic" tags. This means they are completely blank, empty boxes used purely to group things together so you can design them with CSS later. But they behave very differently!
<div>
BLOCK
The <div> (Division) is a generic Block-level container. You use it to group large chunks of your website together (like wrapping an image, a heading, and a paragraph into one "Card").
<span>
INLINE
The <span> is a generic Inline container. You use it to wrap a tiny piece of text inside a paragraph so you can change the color of just that one specific word.