Overview

Our main goal with this tutorial is to learn about classes in HTML and CSS so that we can start taking advantage of the <div> tag. We’ll also learn a bit about how the <div> tag will work.

The <div> tag (and its related notion, the CSS class) is slightly more abstract in its function than what we’ve seen so far, so it takes a little more work to understand it. But mastering use of the <div> and the CSS class is an important step towards advanced HTML coding skills.

Tags

Recall that HTML5 tags are the backbone of webpage functionality. In most cases, these tags are about STRUCTURE. Metaphorically, you might think of tags as ways of labeling parts of speech and grammatical structure: E.g., “This is a noun,” “This is my thesis,” and so on.

Tags look like this:

<html>...</html>
<body>...</body>
<h1>...</h1>
<p>...</p>
<img />
<strong>...</strong>

Some of these, like the first two, are mostly involved in telling the browser how the whole page is structured: “The <html> part of this webpage begins here … and ends here,” for example. Or, for example: “This is where the <body> of my document begins… and this is where the <body> ends.”

Some of these tags, like <h1> and <p>, are more local in nature: They tend to describe a single line, or a single paragraph; they may display a single image, or a list of items. Whereas every HTML document will have a single <html> tag, and a single <body> tag, many HTML documents will have dozens of <p>, <h1>, and <img /> tags. These are called “block-level tags” because they create blocks of content on the page.

A third group of tags, like <strong> and <em>, are even more local than tags like <p>: These typically make more subtle changes to just a few characters or sentences. These are called “Inline” tags, because they cannot exist on their own: Inline tags can only exist inside Block tags.

Block tags, like <p> and <h1>, stack like bricks, one on top of the other. They are basically impregnable. Inline tags, on the other hand – tags like <em> and <strong> – can only exist inside a Block-level tag.

<p>Product status: <strong>backordered</strong></p>

The same will be true of an emphasized (italicized) word.

<p>The band's fifth album, <em>You Will Go To The Moon</em>, was well-received.</p>

As always, the key here is to remember that when we build HTML pages, we’re really just sorting information and mapping data hierarchies – no matter the particulars of our content. Just like the folders on your hard drive, or a table of contents in a book, or sections of a lab report, a web page is always first and foremost an exercise in sorting and ordering information.

There are any number of parallels we might point to:

A book contains parts; parts contain chapters; chapters contain sections; sections contain paragraphs; paragraphs contain sentences; sentences contain words.

A database contains files; files contain tables; tables contain records; records contain values.

A hard drive contains partitions; partitions contain systems; systems contain folders; folders contain files; files contain documents; documents contain paragraphs; paragraphs contain data.

DIVs are flexible ways to organize data

Quickly, we recognize that our current system, which is mostly built using <body> and <p> tags, and maybe the occasional <strong> tag, is not very deep. If we want to organize data, and use that organization to affect its presentation, we are going to need something more.

That thing is a <div> tag.

A <div> is largely the same as a <p>: They are both Block-level tags that create block-level elements. The main difference for us is that <p> already has been assigned a job: It is tasked with styling paragraphs. <p> is already very busy, and has no time for our foolishness.

But if <p> is like an overworked, middle-aged, mid-level manager at our company, then <div> is kind of like a very talented, energetic, and well-dressed intern. <p> keeps our company afloat, but <div> makes our company a more interesting place to work. And <div> has plenty of time to hang out.

Inside the DIV

HTML5 <p> tags were built to wrap around paragraphs, creating rectangular paragraph building-blocks. We’ve seen this before:

<p>The first version of Helvetica was created in 1957 by Max Miedinger, a Swiss typeface designer. His goal was to design a new, neutral sans-serif typeface that should give no additional meaning to the content it presented. Miedinger wanted a font that was clear to the eye and easily used. It was originally called Neue Hass Grotesk.  In 1960, the typeface’s name was changed to Helvetica, which means “Swiss” in Latin. (Adapted from Imagine-Express, Minneapolis.)</p>

The <p>...</p> element cannot be broken by another block-level element. Of course, you can put the far-squishier inline elements like <strong>...</strong> and <em>...</em> inside a <p>...</p> block element, like this:

<p>With its <em>sleek lines</em> and <em>modern look</em>, <strong>Helvetica is used in many company logos and other marketing materials</strong> that we see today. Corporations that use Helvetica include Apple, Microsoft, 3M, American Airline, Jeep, and Verizon.</p>

This makes sense: In our writing, we generally don’t put paragraphs inside other paragraphs. <p> reflects that reality. But if we need to organize data, then the fact is we’re going to need something more robust than a paragraph.

<div> is a great solution to the problem: It isn’t already tied to a thing like a <p> is tied to the idea of a paragraph; by default, it has almost no qualities of its own, but lets us assign qualities very easily; and it manages to be a block-level element that doesn’t break when we put other block-level elements inside it – very important if we’re going to use it to shape our data.

So this is great: <div> should become very useful to us. But there is one more thing we need to do before we can start using the <div>. We need to understand an equally powerful idea: That of class.

A Touch of Class

As I’ve suggested before, “classes” are a popular idea in throughout modern theories of computation; but that single word often means different things. So, for our purposes, let’s be reductive and simplistic at this point: A class is a way of customizing HTML tags for use as selectors in CSS.* We can use classes to customize almost any tag, including <p>, <h1>, and <div>, but also <img>, <footer>, and <strong>. The thing about classes is that they are a Do-It-Yourself technology: We have to define them ourselves. So they are seldom as neat-and-tidy as using plain-vanilla off-the-shelf HTML tags. But they give us a lot of extra flexibility.

Let me illustrate this idea with an excerpt from a recent magazine interview. I’ll work first on a fraction of the document; once we’ve established what is happening, I’ll include both documents (without classes and with classes) in their entirety.

Here’s an excerpt to focus on, beginning with the HTML:

<p>TRUMP: I could have told Sessions myself if I wanted to. Under Section II —</p>
<p>TIME: He testified under oath —</p>
<p>TRUMP: Excuse me —</p>
<p>TIME: — under threat of prison time, that that was the case Mr. President.</p>

It would probably look something like this on the page:


TRUMP: I could have told Sessions myself. Under Section II —

TIME: He testified under oath —

TRUMP: Excuse me —

TIME: — under threat of prison time, that was the case Mr. President.


That’s perfectly legible, of course, but perhaps not as legible as it could be. We could add some CSS overall and style the <p> tag if we wanted to improve the situation, of course. But the problem is this: This is an interview, featuring (at least) two voices… but we have only one tag to use: <p>. Now, in truth, we could add some styles to every tag along the way, so that it might look something like this:

<p style="color:blue; font-weight:800">TRUMP: I could have told Sessions myself if I wanted to. Under Section II —</p>
<p style="color:red;">TIME: He testified under oath —</p>
<p style="color:blue; font-weight:800">TRUMP: Excuse me —</p>
<p style="color:red">TIME: — under threat of prison time, that that was the case Mr. President.</p>

TRUMP: I could have told Sessions myself. Under Section II —

TIME: He testified under oath —

TRUMP: Excuse me —

TIME: — under threat of prison time, that was the case Mr. President.


So that isn’t terrible. But, meh: I’ve seen better. What’s more: Remember the mantra of computation: “Don’t repeat yourself” (in truth, probably a strange choice for a mantra, but there we are.) To make this work, we really need more than one <p>.

Classes

We need classes. Classes make that possible. Let’s create our first class, which we’ll call (predictably) “trump”. Here’s how that will look in our HTML, as we apply the class to a <p> tag:

<p class="trump">I could have told...</p>

Wonderbär. Let’s build that class in the CSS definition. I’ll define it immediately after I define an <h1> for contrast.

h1 {
	font-family:Georgia,Times,serif;
	}
.trump {
	color:blue;
	}

See the dot that precedes the word “trump” (and not the h1)? That’s important: It tells CSS that this is a custom class. Custom class names (1) always start with a period in their CSS definition and (2) never contain spaces. That period, however, is only used in the CSS definition: When we use the class in the HTML, we ignore the period.

<p class="trump">I could have told...</p>

I can create as many classes as I like. And those classes can be attached to as many different tags as I like. In the case above, I’ve attached my class to a <p>, but I can attach the same class to an <h1>. I can even attach it to an image or an <a href="">. The outcomes will vary, depending on which tag I choose, but I can use just about any tag I like.

<h1 class="trump">Part One</h1>

<a class="trump" href="new.html">Notes</a>

We’ll deal with the complexity this raises (complexity in the form of so-called ‘combinators’) later. For now, though, just remember that classes are great, as long as they are attached to an HTML tag of some kind. Without that tag, classes go nowhere. Here’s something that cannot work, for example, because there is no tag:

<class = "trump">Excuse me...</class>

Similarly, I cannot do this:

<trump>Excuse me...</trump>

And so: Let’s move forward by building this example (the interview) out using classes attached to <p> tags – for now. In the codepen below, please experiment with the provided class definitions and HTML tags in order to better understand the explanations I’ve offered above.


Plain-Vanilla HTML version


See the Pen interview plain HTML by Garrison LeMasters (@Garrison) on CodePen.


Version using custom classes


See the Pen styled interview by Garrison LeMasters (@Garrison) on CodePen.