Looking for the lessons? Get started!
Basic information about the DIV and SPAN elements.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
Placeholder for pithy quote.
DIV
To me, learning to use the div element means you’ve moved from beginner’s status to at least the entry level of intermediate Web design. People have, and still do, code entire Web sites that look nice and serve their purpose without using the div element and the capabilities that element gives, but to kick your design up to the next level, the div element gets you going.
This is classified as an HTML element, and it is, but it is used in conjunction with elements from your stylesheet. In its basic form, the div tag does nothing to a page’s appearance. If you put this in your HTML code:
<div> </div>
nothing happens in your site that you can see.
In the SitePoint Reference, Ian Lloyd writes:
It doesn’t convey any meaning about its contents (unlike a p element that signifies a paragraph, or an h1 or h2 element that would indicate a level 1 or level 2 heading, respectively); as such, it’s easy to customize it to your needs. The div element is currently the most common method for identifying the structural sections of a document and for laying out a web page using CSS. Some developers perceive similarities between the p and the div elements, seeing them as being interchangeable, but this isn’t the case. The p element offers more semantic information (‘this is a paragraph of text, a small collection of thoughts that are grouped together; the next paragraph outlines some different thoughts’), while the div element can be used to group almost any elements together. Indeed, it can contain almost any other element, unlike p, which can only contain inline elements.
The div elements are like bookends: what’s important is what goes between them. Lloyd again:
The div is an ‘anything-goes’ element – it can contain any inline or block-level elements you choose, so it has no typical content.
What can you do with the mighty div element? As Lloyd says, just about anything. But there are some parameters.
One, in itself, it’s a block element, though it can contain an inline tag and attribute.
More about block and inline elements.
Two, some browsers put a line-space before and after a div element. Not all browsers do this, so don’t count on it in your designs.
Here are the main attributes you can place inside a div element:
- class: specifies a "classname" for an element
- id: specifies a unique "id" for an element
- style: specifies an inline style for an element
- title: specifies extra information about an element
There are others, but these are the ones you will work with most frequently. Let’s take a quick look at them. (Some of them are explained in more detail elsewhere in this site; for those, I’ll just provide a quick description and a link.)
The class selector is a CSS selector that serves to identify an element, or group of elements. By identifying something as a class, you give yourself the opportunity to style it with multiple CSS elements, without styling anything else.
The id selector (think I.D. as in "identification," not "id" as in Freud) is a CSS selector similar to the class selector. It, too lets you identify an element, or group of elements, and style them. The biggest differences between them is that you can only use an id once in a page, whereas you can use a class over and over again in a page; since you can only use the id once, it takes precedence over the class in your stylesheet.
Learn more about ID’s and classes.
The style selector is used to place inline styling in an HTML page.
The title selector allows you to include extra information about something – a line of text, an image, what have you – that can be seen in a “tooltip” when hovering over the selected element. I use this technique frequently in these pages (using the span element instead of the div); check it out by hovering over these words. The extra information pops up when you run your mouse over it.
The div element is often used in creating page layouts – an area of inquiry we haven’t gotten to yet.
I will, however, give you a quick example of how you can use a div element to style a paragraph. I’ll use an example from this site, using the class selector titled "help." Take a look at this HTML code:
<div class="help"> <p>A paragraph of content.</p> </div>
Note: Best practices would actually place this class on the paragraph itself, and not in a separate div. This is just a demo.
That paragraph would be styled by this CSS selector and its properties. Note that the .help prpoerty uses a . , or period, to denote that it is a class.
.help {
cursor: help;
color: #333;
border-bottom: 1px dotted #9c0;
font-style: normal;
font-family: Georgia, Constantia, "Times New Roman", Times, serif;
}
In this site, wrapping a paragraph of content in this div designated with the class help makes it appear with the "help" cursor (the arrow with the question mark), in a different color (#333 is a medium gray), gives it a dotted border underneath it all, reverts the font to "normal" from what might otherwise be in place (i.e. italics), and displays the font as any of a "family" of serif fonts, starting with Georgia.
Learn more about the font-family property.
Here’s that demo paragraph:
A paragraph of content.
(When you take a look at the source code, you’ll notice that I didn’t use a div tag to make the above demo. I didn’t want to restyle this entire site to make this demo work, so I, uh, cheated. But this will work for you!)
Note: Many experts, such as Jean-Baptiste Jung, recommend that you comment your divs when they begin to stack up in your sheet. Jung gives the following example, using the CSS selectors themselves in the comments:
<div id="heading"> <div id="sub" class="first left"> ... </div><!-- #sub.first.left --> </div><!-- #heading -->
The comments on the closing divs helps you keep straight what those divs are closing. It’s a good idea, especially on a relatively complex design.
The div element is used to group segments of content into logical divisions. The element itself is semantically neutral, but not entirely meaningless. A div simply says "these things belong together, and are separate from those other things." The div element is a content organization tool, not a page layout tool. The fact that they act as very convenient hooks for CSS is just a side benefit. But because divs make it so easy to manipulate blocks of content with CSS, they’re often and easily abused for presentational purposes. Think about semantics, and when you choose to use a div try to ensure it makes sense to use one. Don’t use a presentational div when you may have a more meaningful element available. — Craig Cook
Side note: Web and CSS guru Eric Meyer gives us the best visual explanation I’ve ever seen for not using presentational names.
SPAN
The biggest difference between the div and span elements is that span is an inline element. In other words, it can go inside of a paragraph or other block element. Like a div, it in itself has no semantic or presentational value. This:
<p>Content <span>inside the element</span></p>
won’t show up at all in your displayed material.
However, it’s what we can do with the span that’s important. Lloyd tells us:
A span is little more than a tool for highlighting the start and end of a section to which you want to apply a style.
Using the span, we can hang a styled class on a chunk of text inside a paragraph to transform it on the display. Let’s say we want to create a class that makes our text orange and bold. Easy enough:
.text_emphasis {
font-weight: bold;
color: #ff6600;
Now we use a span element to style the words we want so emphasized:
<p>I have a <span class="text_emphasis>really terrible</span> headache right now.
And that gives us:
I have a really terrible headache right now.
Pretty simple, really.
Ian Lloyd reminds us that the span element is one of the most misused, and overused, in Web design. Once people figure out how it works, they use it for everything, even when it is not appropriate or when another element would work better. Lloyd writes (remember, he advocates the use of XHTML):
The span element is nearly always used with a class attribute. ... Before you apply a span to any given element on your web page, take a moment to think about whether there’s another element that’s better suited to the task. … Think of the meaning of what you’re writing, and aim for an XHTML element that suits the purpose. Other examples might be em, cite, and blockquote.
