HTML and CSS Reference
In-Depth Information
<li><a href=”links/”>
Related Links
</a></li></ol>
<h3>
Coalition Partners
</h3>
<ol><li>
The Tucson Urban League
</li>
<li>
The Dunbar Alumni Association
</li>
<li>
The Dunbar/Spring Neighborhood Association
</li>
<li>
The Juneteenth Festival Committee
</li></ol>
<h3>
Individual Members
</h3>
<ol> <!-- ... list of donors omitted ... —> </ol>
</div> <!-- sidebar -->
<div id=”footer”>
<p id=”note501c3”>
The Dunbar Project is a 501c(3) organization,
and your contributions are tax deductible.
</p>
<p id=”copyright”>
Copyright © 2006 by the Dunbar
Project. Questions?
<a href=”mailto:webmaster@thedunbarproject.com”>
Mail the Webmaster.
</a></p>
</div> <!-- footer -->
</div> <!-- main -->
</body>
</html>
The structure of this page is defined by the
<div>
tags with
id
attributes. The general
skeleton (with content omitted) consists of the following:
<div id=”header”>
<div id=”sitenav”></div>
</div> <!-- header -->
<div id=”main”>
<div id=”content”></div>
<div id=”sidebar”></div>
<div id=”footer”></div>
</div> <!-- main -->
Comments are used with the closing
</div>
tags as reminders about which
<div>
is
being closed; it makes the page easier to edit later.
The page is constructed of two sections: a header and a main body. Each of these has one
or more subsections. This structure provides what's needed to redesign and lay out the
page.
13
Why this particular structure? There are actually many ways you could structure such the
page, inserting
<div>
tags appropriately. This skeleton is simply the method chosen for
this example, to get the specific styles used later on. During the web development
process, you might go back to your HTML and add or remove
<div>
tags while styling
to give more flexibility when creating page layouts.
