Lesson 3.2: Lay It Out! – Divs & Spans

In the last lesson you learned how to add images in a contextual format and we discussed using images in a decorative context.

Now, we’ll discuss the use of Divisions (Divs) and Spans, the two basic “container” elements used to lay out pages.

Container Elements

Container elements are elements which are simply meant to contain other elements. By default, they have no visual representation on their own, and are only meant for positioning other elements on the page. Divisions and spans are these type of elements. The two are actually very similar with one key difference: divisions are block-level elements and spans are inline elements.

Block-level versus Inline

Elements in web pages have two general behaviors: block-level or inline.

Block-level elements (like divisions), by default, will usually try to take up the entire width of whatever they are contained within and will force any other elements on the same line as them down below them. So, if you had this code:

<div>Something here</>
<div>Something else</>

The first div would take up 100% of the width of the line it is on, and push the second div down below it, which would also take up 100% of the width. Headers and paragraphs are also block-level elements.

Inline elements, like spans, are “inline”, meaning that they simply line-up where ever they are put, taking as little space as they can and trying not to move other things around. Images are another inline elements.

Usually, you would use inline elements within block-level elements.

Divisions

Divisions use the <div> tag. They have only two important attributes: id and class. Both of these are used as CSS hooks, which we’ll cover in our first CSS lesson. Whatever you want contained within a division, such as paragraphs and images, you would place between the <div> tag and it’s closing </div> tag.

Without CSS, divisions have little value. We’ll cover how to manipulate them with CSS in one of our CSS lessons very soon.

Spans

Spans use the <span> tag. Like divisions, they also only have two important attributes: id and class, both of which are used as CSS hooks. They also contain their information within their opening and closing tags (</span&gt).

And, also like divisions, without CSS, spans have little value.

While divisions can contain just about any element, including more divisions, spans have a much limited range and can only contain inline elements like simple text and images. These would be some valid uses of spans:

<h1><span>Something</span>&lt/h1>
<p>Something <span>else</span></p>
<div><span><img src="apic.png" alt="A pic"></span></div>

In our next HTML lesson, we’ll cover using tables, the last of our layout elements. Be cautious though, because tables aren’t meant to be used as layout for the entire page, even though it is sometimes easier than usual. Some sites may tell you to use tables, but don’t. Tables are only meant for tabular data, which is what we’ll discuss their use for: Lesson 3.3: Lay It Out – Tables

Now would be a good time to move on and complete the first several CSS lessons as well, so you can learn how to use divisions and spans to actually do something.