HTML: Divisions
There is little mystery to the Division <div> ... </div> tag. It simply allows you to place it around content within your document as a means of identifying structure.
If you consider the anatomy of a web page you'd see that most contain common structures such as headers and footers, navigation (both global and local), and main content. As a developer of the page you will find convenience in surrounding each common structure with its own div tag. The depth of this simple process is better realized once we learn that we can apply specific style rules to each of the structures independent of one another. This is a good thing in that we can style the links of our navigation areas much differently than how we might want the links within the body content areas to be handled.
Here is a basic example:
<html>
<head>
<title>A Sample Page with Div Tags</title>
</head>
<body>
<div id="header">This is the Header</div>
<div id="navigation">This is the Navigation</div>
<div id="bodycontent">This is the Body Content</div>
<div id="footer">This is the Footer</div>
</body>
</html>
Within the head section we can style each section independently by using the elements ID as a selector. Our style section within the head might look like this:
<style>
#header{color: #00ff00;}
#navigation{font-size: 80%; font-wieght: bold;}
#bodycontent{font-size: 90%; font-family: arial, helvetica, san-serif;}
#footer{color: #00ff00; font-size: 60%;}
</style>
For more information on the div element refer to: http://reference.sitepoint.com/html/div
modifed: 0000-00-00 |
