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. CSS represents an easy way to restyle existing HTML markup, whereas restyling other types of media such as Adobe formats may require pdf conversion software. 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:

<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 &lt;div&gt;'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!