Webwork
/
The Div Tag
<div></div>

Of all the tags in the hypertext markup language, this is one of the most useful. This is because the division tag, in conjunction with CSS is used to determine the layout of much of a web page's content.

The div tag is a block element. This means it that it normally starts with a new line like the other block-level elements: <p>, <h1>, <ul>.

Note that you can place an inline element inside of a block element but you can't place a block element inside of an inline element. Example:

This is ok:
<div><a href="somewhere.html">Go somewhere.</a></div>

This is not:
<a href="somewhere.html"><div>Go somewhere.</div></a>

At its most basic, the div tag defines a rectangular area on a web page:

Source:
<div></div>
Web page:
 
(Above is empty because there is nothing in the div tag on the left.)
<div>123</div>
123
<div style="border: #c00 solid 1px; text-align: center; background:#ddeeff; ">123</div>
123

All of the style tags we've already talked about can be applied to a div tag - plus a lot more.

Since div tags in your document will probably not all have the same styling, you won't want to place general div style tags in the head of your document as you did with p tags.

To allow various div tags on your Web page to each have its own style, you identify them with class or id attributes:

Here's how it looks with a class attributes:

Source:
<style type="text/css">

.whatevernameyouwant {
   border: #c00 solid 1px;
   margin: 15px;
   text-align: center;
   background: #ddeeff;
}

.someothername {
   border: #00f solid 1px;
   margin: 15px;
   text-align: center;
   background: #ffdddd;
}

</style>

Above goes in head of doc. The "." in front of whatevernameyouwant tells the browser that it is looking at a classname. Below goes in body:

<div class="whatevernameyouwant">123</div>

<div class="someothername">456</div>
Web page:
123
456

Any div that you give a classname of "whatevernameyouwant" will have the whatevernameyouwant styles applied to it. You can make up whatever names you want for the classes but your life will be easier if you use useful descriptive classnames like "sidebar" or "imagethumbs."


With an id attribute you would use "#" sign rather than a ".":

Source:
<style type="text/css">

#whatevernameyouwant {
   border: #c00 solid 1px;
   margin: 15px;
   text-align: center;
   background:#ddeeff;
}

</style>

Above goes in head of doc. The "#" in front of whatevernameyouwant tells the browser that it is looking at a classname. Below goes in body:

<div id="whatevernameyouwant">123</div>
Web page:
123

As mentioned, the id attribute is used for unique occurrences and the class attribute is used for style groups that will be used mulitple times.

Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma