XHTML Div - Breaking up a Page Into Divisions
Breaking up a page into divisions allows you to mark regions of your document, then, in conjunction
with Cascading Style Sheets (CSS) you can globally apply styles to an entire region
of a page. We'll cover more about CSS in our CSS tutorial section - for now, just remember that
the XHTML div tag enables you to create more advanced layouts while making it easier to maintain
pages by decoupling a page's content from its' layout.
XHTML <div> Example
Here's an example XHTML code fragment that shows a very typical use of the div tag,
used to structure the various parts of a webpage:
Code Sample:
 <div id="pagecontents">
<div class="leftnavigation">
<h3>Learning HTML</h3>
<h3>Learning XHTML</h3>
<h3>Learning CSS</h3>
</div>
<div class="centercolumn">
<h1>Tables are Dead! Use <div>'s and CSS Instead</h1>
<p>Div and Span tags along with CSS are the greatest invention since sliced bread.</p>
</div>
<div class="rightcallout">
<h3>Did you Know?</h3>
<p>The XHTML Div tag simplifies advanced page layouts?</p>
</div>
</div>
| 
 |
In the early days of the Web, page layout relied heavily on the use of HTML tables - thankfully,
this outdated practice is no longer needed, however. The preceeding example shows a standard 3-column
web page layout - notice how the XHTML div tags are used to demarcate different regions of the page -
a left hand navigation bar, a center content column, and a right hand call-out area. Every enclosed <div> region
is identified by either an id or a class, for example - id="pagecontents", class="leftnavigation",
or class="centercolumn", etc. Using CSS - you could then precisely describe how the contents of that
div-enclosed region should be formatted.
XHTML Div Tutorial
To break up a page into different divisions, follow these steps:
- At the start of the division, type "<div"
- Optionally type in id="name", where name uniquely identifies the division.
- Optionally type in class="name", where name corresponds to the name of the class that the division belongs to.
- Type ">" to complete the opening div tag.
- Create the contents of the division.
- Complete the division by typing "</div>"
Tips and Tricks on How to use the XHTML Div Tag
- A division is a block-level element - i.e., its contents automatically start on a new line.
- id and class are optional attributes used to label your divisions, which can be used
with CSS to create powerful page layouts.
- The main difference between an id and a class is that class is for a group of elements
while id is for identifying unique, individual elements.
- You can nest div's - in the XHTML div example, an outer div with id="pagecontents" enclosed
three nested div's.
- Don't use tables to lay out your HTML pages - use div and span instead! That's the XHTML way!
