So far, every tag we've used has a clear purpose, like <p> for paragraphs. But what if you just need a simple "box" to group elements together for styling or layout?

Engagement Message

Why might you want to group a heading and a paragraph together?

For this, we use the <div> tag. Think of it as a generic container with no special meaning.

A <div> is a block-level element, meaning it takes up the full width of the page and starts on a new line, creating a "block."

Engagement Message

What does "block-level" suggest about how a <div> will appear?

Here's how you might use a <div> to group a title and text into a single "card":

Later, you can use CSS to add a border or background to this entire <div> block.

Engagement Message

How does this grouping make styling multiple elements easier?

But what if you don't want to group a big block, and just want to style a small piece of text inside a line? For that, we use the <span> tag.

A <span> is an element, wrapping text without breaking the flow of the line.