Kelvin's Desk

So right now, we have enough knowledge to be dangerous with HTML, so to speak. But as a web developer, we still need to know how to properly position the elements on the page. Or maybe there are certain text we want to highlight in HTML. That’s where container elements come into play.

Containers are used to, well, contain specific elements we want to work with. There are two important tags that are often used: <div> and <span> elements.

A div is used when you want to layout an element a certain way. Think of them as a block container. The elements you want to position will be modified as a entire block on a page. However, anything else before and after this container will be separated.

Consider this bit of code as an example:

<p>I am a paragraph. Just an ordinary paragraph with nothing going on.....yay. But hey, we're learning right?</p>

We can use a div to grab some text and color it…

<p>I am a paragraph. Just an ordinary paragraph with nothing going on.....<div style="color:green">yay.</div> But hey, we're learning right?</p>

…or the entire paragraph if we wanted.

<div style="color:green"><p>I am a paragraph. Just an ordinary paragraph with nothing going on.....yay. But hey, we're learning right?</p></div>

But, notice on the second example how it separates everything around the div? Say if you want to manipulate or highlight specific areas inside an element. Well, using a span is the way to go. Spans are used to target specific areas, without interrupting the flow of the element.

<p>I am a paragraph. Just an ordinary paragraph with nothing going on.....<span style="color:green">yay.</span> But hey, we're learning right?</p>