A div inside a p gets split apart
One p was written, two exist. Inspect the preview: the second red strip is the empty <p></p> made from the stray </p>.
Some elements stack on top of each other as full-width boxes (block), others sit inside a line of text like words (inline); knowing which is which, and what may go inside what, is the base of every layout.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Mark the price in <p>Only 499 rupees today</p> so it can be styled bold and green, without giving it extra meaning.
This HTML is invalid: <p>Steps:<ol><li>Mix</li><li>Bake</li></ol></p>. Rewrite it correctly.
Make a link Read more that takes the full width of its container and has 12px padding, without changing it into a different element.
Explain it without notes
What is the difference between a block-level element and an inline element? Give two examples of each.
Why does <p>Intro <div>box</div></p> produce two paragraphs in the DOM?
When should you use div and span, and when should you avoid them?
Why does width have no effect on a <span>, but does on an <img>?
Preview
Console
Nothing logged yet.Expected console output
Paragraphs on the page: 2
First paragraph text: "Before "
Is the div inside a p? false