div At Last

According to the developers at the Mozilla Foundation, the full name of the <div> tag is “content division element.” That doesn’t really roll off the tongue, though, does it? It really ought to have a shorter name, since we’re going to be using it all the time.

The <div> element is among the most commonly used elements in contemporary web design, in part because it is also the most generic. As I suggested (above), <p> is pretty much limited to paragraph and paragraph-like blocks. Yes, you can create many different classes of <p>, but in the end, all of those classes are just so many solid, colorful bricks. Where <div> gets interesting is when it does something other tags like <p> cannot do: It transforms from a solid brick of content into a container – one that can hold regular content, but one which can also hold other containers and their contents, too. A <div> works to create discrete internal hierarchies of information.
We’ll worry about styling the <div> tag in a moment. But for the time being, let’s review some hypothetical ways <div> may be deployed.

Code Samples

Organize an online version of a final paper by using <div>:

<div class="finalPaper">
	<div class="intro"> ... </div>
	<div class="body"> ... </div>
	<div class="bibliography"> ... </div>
</div>

Using <div> to organize and print part of a student transcript:

<div class="transcriptUndergrad">
	<div class="courses">
		<div class="complete">
			<div class="class">CCTP399 History and Technology B+</div>
			<div class="class">MODL401 Speculative Realism A-</div>
		</div>
		<div class="pending">
			<div class="class">MATH689 Numeracy and Ontology</div>
		</div>
	</div>
</div>

Using <div> to give shape to a cookbook by identifying the kinds of information it is presenting to a reader.

<div class="cookbook">
	<div class="recipe">
		<div class="ingredients">
			<ul>
				<li>1 lb. butter</li>
				<li>2 cups sugar</li>
			</ul>
		</div>
		<div class="process">
			<p>Heat a heavy iron pan to...</p>
		</div>
	</div>
</div>

Imagine that we extended the code above by copying the <div class="recipe"> and pasting it, three more times, inside the <div class="cookbook">. Here’s a graphic representation of the result.

In this case, the biggest container is called (“classed”) as a “cookbook”; inside it, we can find four additional containers called “recipe”; and inside those, we can find a few blocks of text.

Of course, the illustration isn’t literal – the HTML did not actually render this PNG file (not this time, at least). But it reminds us of the most important thing to remember about the “content division element” we’ve been discussing: Because it functions as a kind of digital container, the <div> element gives structure to websites by categorizing… well, everything. These digital containers are tools for grouping, defining, and specifying data. They are tools for class-ifying information.

CSS augments that capability by allowing us to selective change the appearance of things on the screen based on how the <div> has classified them. It doesn’t have to be this way, but it makes it very easy to do so. And as we’ll see in the next part, we can make the relationships between different categories of data render meaningfully on the page. “Color every class on an undergraduate transcript blue, but if they are still ‘pending’, then give them a yellow background, too.”

That’s next.