First time visitor? The tutorials start here.

xHTML div tag

“div” is short for division or divider, and is mainly used to divide your page into sections. You may have a header section, a main content section, a sidebar section, a footer section, a section for announcements, etc.

There is no absolute best way to use <div>s and although some ways are more common than others, you can pretty much use them to divide a page any way you want to.

You can give class names to divs using the “class” attribute:

<div class="someclassname">Your content here...</div>

This is good for multiple sections on a page that all share the same characteristics, such as boxes within a sidebar. For example:

<div class="box">
<h2>Welcome!</h2>
<p>A little information about your website can go here.</p>
</div>
<div class="box">
<h2>Helpful Sites</h2>
<ul>
   <li><a href="http://ifyoucodeittheywill.com"">IfYouCodeItTheyWill.com</a></li>
   <li><a href="http://validator.w3.org/">Validate your xHTML</a></li>
   <li><a href="http://jigsaw.w3.org/css-validator/">Validate your CSS</a></li>
</ul>
</div>

On a side note: In case you haven’t seen <ul> and <li> before, “ul” stands for “unordered list” and “li” stands for “list item.” This will create a bulleted list by default, but you may remove those bullets when you style them through CSS, or you can even use CSS to make all of the items appear on the same line. End of side note.

Now, how would you style each of those boxes? As you may recall from the section on how to style class names with CSS, you would start it with a dot, followed by the value that’s in quotes after class=.

The xHTML says <div class="box">, therefore you would target it with .box. Now, let’s say you want to put a solid border around each of those two boxes that is 2px wide and gray.

You could use this:

.box {
   border-width: 2px;
   border-style: solid;
   border-color: #c9c9c9;
}

See: CSS border property

Or using CSS shorthand, you could accomplish the same exact thing with this code:

.box { border: 2px solid #c9c9c9; }

See: CSS border shorthand

The result might look something like this:

Welcome!

A little information about your website can go here.

Helpful Sites

Hmm, that’s a bit messy. Let’s try this CSS:

.box {
   border: 2px solid #c9c9c9;
   margin-bottom: 0.25em;
}
.box h2 {
   font-size: 105%;
   margin: 0;
   background: #eee;
   border-bottom: 1px solid #c9c9c9;
}
.box ul {
   margin-left: 0;
   padding: 0;
}
.box li {
   margin: 0;
   padding: 0;
   list-style: none;
}

The result:

Welcome!

A little information about your website can go here.

Helpful Sites

Ah, that’s better. 🙂

But wait! What did I just do there? What’s with the .box h2 and .box ul stuff???

Well, look at how the tags are nested:

<div class="box">
<h2>Helpful Sites</h2>
...more stuff here...
</div>

.box h2 merely goes inside anything with the class name of box and then looks in there for any <h2> tags it finds.

It won’t affect any other <h2> tags, only the ones that are somewhere inside an element which has that particular class name.

Now, an introduction to the xHTML “id” attribute…

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.