Boxes with div
Group tags together in an invisible box.
1<div>
2 <h1>Today's Special</h1>
3 <p>Double cheese, half price.</p>
4</div>
5
6<div>
7 <p>Offer ends Friday.</p>
8</div>
Every line, explained
<div>- <div> is a division: an invisible box for grouping other tags. On its own it changes nothing you can see, but grouping is how pages get organised (and later styled and moved around as one unit). Things that belong together get one parent: a rule you will meet again and again.
<h1>Today's Special</h1>- The heading sits inside the box, so it is indented one level: the indent is a visual reminder of what lives inside what.
<p>Double cheese, half price.</p>- Its paragraph lives in the same box: if the box moves, both move.
</div>- </div> closes the box. Everything between <div> and </div> travels together.
<div>- A second box, completely separate from the first.
<p>Offer ends Friday.</p>- This paragraph belongs to box two.
</div>- </div> closes the box. Everything between <div> and </div> travels together.