Divs and Spans

Look at Nadia's Wikipedia page for a moment.

It is not just one endless wall of text. It is divided into sections. Early Life. Career. Teaching. Recognition. Each section sits clearly on its own. Easy to find. Easy to read.

That kind of organization does not happen by accident. In HTML we use an element called div to create those divisions. And when we want to mark up just a small piece of text inside a line we use something called span.

These two elements do not add any visible structure on their own. But they are the foundation of how real webpages are organized and styled. By the end of this lesson you will understand exactly what they do and why they matter.

What is a Div

The word div is short for division. It is a container. You use it to wrap related elements together into one group.

Right now on Nadia's page the Early Life section has a heading and some paragraphs. They are just sitting there separately with nothing connecting them. Let us wrap them all inside a div:

Nothing looks different yet. That is completely normal. A div is invisible by default. It has no color, no border, no style of its own.

But something important just happened in your code. Those elements are now grouped together. They belong to one division. And that matters more than it looks right now.

Seeing the Div in Action

To actually see the div at work let us add a tiny bit of CSS. Do not worry about learning CSS right now. We will cover it properly in a later course. For now just follow along and see what happens.

CSS always goes inside a style tag. Add this to your page:

Now you can see it. The entire Early Life section has a light yellow background behind it. The heading, the paragraphs, all of it inside the div is highlighted together as one block.

That is what a div does. It groups things together so you can treat them as one unit. Later when you learn CSS you will be able to style an entire section in one go instead of targeting each element separately.

Adding Divs to Nadia's Page

Now let us organize the rest of Nadia's page properly. Each section gets its own div. This keeps the code clean and makes the page much easier to work with later.

Each section is now its own clearly defined block. Early Life. Career. Teaching. All organized. All grouped. All ready to be styled individually when you get to CSS.

What is a Span

Just like div groups blocks of content, span groups small pieces of text inside a line.

The difference is important. A div is for big chunks of content that sit on their own. A span is for a word or a phrase sitting inside a paragraph.

Here is an example. On Nadia's page there is a line that mentions the technologies she works with. We want to highlight just those words, not the whole paragraph. That is where span comes in:

Nothing looks different yet. Just like div, a span is invisible on its own. But now those two words are marked up separately from the rest of the text. We can target them with CSS and style just them.

Let us add a little CSS to see it:

Only React and Node.js are highlighted. The rest of the paragraph stays exactly the same. That is span. It lets you reach inside a line and mark up just the part you want.

Block and Inline Elements

Now that you have seen both div and span in action there is one important concept worth understanding. The difference between block and inline elements.

Block elements always take up the full width of the page even if the content inside is short. They always start on a new line and push everything else below them.

div is a block element. When you added the yellow background you could see it stretched all the way across the page, not just behind the text. That is block behavior.

p is also a block element. Every paragraph starts on a new line and pushes the next one below it.

Inline elements only take up as much space as the content inside them. They sit within the line of text without breaking it.

span is an inline element. When you highlighted React and Node.js the background only appeared behind those exact words. The rest of the sentence stayed on the same line. That is inline behavior.

Here is a simple way to remember it:

Block elements are like paragraphs in a book. Each one starts on its own line and takes up the full width.

Inline elements are like highlighting a word with a marker. Only that word gets highlighted. Everything around it stays exactly where it was.

Putting It All Together

Here is Nadia's page with everything from this lesson. Sections organized with div, key terms marked up with span, and a little CSS so you can see it all working:

Try editing it yourself. Add another div for a new section. Wrap a different word in a span and change its background color. The more you experiment the more it clicks.

Your page is really taking shape now. You have headings, paragraphs, images, links, lists, tables, forms, and now proper divisions.

In the next lesson we are going to give your page real meaningful structure using semantic HTML. Instead of just grouping things with div, you will learn how to tell the browser exactly what each part of the page actually is.

Next — Semantic HTML