Further Structuring with XHTML: DIV

  1. DIV
  2. Leveraging DIV with CLASS
  3. Applying DIV Effectively

So far we've structured my client's Web page using a handful of common XHTML elements. We've also learned that we can use unique IDs and grouped CLASSes to further identify our elements. We've seen that these IDs and CLASSes can be quite useful when we apply CSS to our Web page as we can differentiate between normal elements and elements with certain IDs or CLASSes.

Let's look at how I applied these to my client's XHTML document. I've included the whole thing for reference, so scan through and spot all the uses of IDs and CLASSes:

Note: I've applied a CLASS called "product" to a bunch of H3s, and a CLASS called "prod_desc" to a bunch of Ps that sort of go along with those H3s. But there's a more efficient way to go about identifying these H3s and Ps as collectively referring to products. In the last lesson we looked at how XHTML elements relate to each other according to their parents and descendents:

A document tree like this shows that XHTML elements inherit the properties of their ancestors, including any references to the parents' CLASS and ID attributes. Looking at our example, if we can wrap all of those H3s and Ps inside of a single parent element that has a specific class, we're basically accomplishing the same thing. That's where the DIV element comes in.

DIV

In XHTML the DIV element is used to signify divisions. This is intentionally abstract, allowing us to apply the DIV element to a broad range of information types, include groups, or divisions, of other XHTML elements.

Since I have a bunch of H3s and Ps that all relate to products, why not wrap all of those in a single DIV, and give that DIV a CLASS or ID? The DIV element is a block-level element, and thus it's allowed to contain any number of block-level (such as H2, H3, or P) or inline-level elements.

That's a great way to further organize and structure our XHTML! But that's not all it does. It can also be the doorway to tidier, more efficient XHTML and CSS.

Leveraging DIV with CLASS

And because I've given my DIV the CLASS of "products" there's really no need to have a CLASS for all the H3s and Ps inside of my DIV. It doesn't hurt to keep them, but to illustrate the point we could eliminate them like so:

Before I removed those CLASSes I could apply a CSS rule to those H3 elements by targeting that H3 element's CLASS, like this:

We used that "prod_desc" CLASS to specify only a select group of Ps. Now that we've removed that "prod_desc" CLASS we can't refer to these special Ps in the same way, can we? Not exactly; but we can refer to them via a parent element, i.e. the DIV we've just added. Check this out:

This CSS rule basically says, "Apply these declarations to any P that happens to be a descendent of a DIV with a CLASS 'products'." That little space (  below) means "any descendent" element.

Applying DIV Effectively

DIV is an extremely useful XHTML element. Coupled with ID or CLASS it can provide an infinite amount of additional descriptive information about our Web page elements. One must be cautious, however, to not go overboard. In applying DIV to the rest of my page I could justify the following, but probably not much more:

I added a DIV that encloses everything on my page with the ID "page_copy", which is my way of identifying all the visible copy (content) of the page. I've also added a couple of comments near the opening and closing "page_copy" DIV tags to remind me what those tags are for!

I add a parent DIV for all my elements to nearly every Web page I make; though it may seem redundant in turns of XHTML structuring (that's what BODY is for, right?) this DIV does serve a purpose and gives me a little needed flexibility to control the layout of my page with CSS.

And that's what you're really reading this lesson for: to figure out how to control the layout of your page elements using CSS. Let's get it on!