Basic HTML Page Structure

So, for my first post, I thought I’d start with the basics–how I lay out my basic HTML page.

Doctype/Basic HTML Tags

Of course, the first thing is to start out with an XHTML 1.0 Strict Doctype and all the required tags (this is what Dreamweaver spits out):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Page Divisions

Now that we have an HTML page, we need to divide the page up into sections. As a general rule, I use the following elements:

  • container div (which controls the width/placement of the page content over the background)
  • header
  • main navigation (usually horizontal navbar, but not necessarily)
  • main content (contains second navigation and body of page)
  • usually, a search box (if appropriate to the site, usually is)
  • second level navigation (omitted from the home page, usually a vertical navbar on the left)
  • body text (the primary content of the page)
  • footer

Here’s how I set it up:

<div id="container">
<div id="header"></div>
<div id="mainNav"></div>
<div id="mainContent">
  <div id="searchBox"></div>
  <div class="secondNav"></div>
  <div id="bodyText"></div>
</div>
<div id="footer"></div>
</div>

I use the “id” attribute because (1) there will be only one of each of those elements per page, and (2) it makes attaching and writing JavaScript and CSS much easier.
We’re almost there–just need to a basic shell for the navigation menus and some best practices for accessibility and usability.

Navigation Menus

We’ll go into more detail on navigation menus in a future post, but for now suffice it to say that the navigation menus will be unordered lists (<ul>) of links. So, we can add the following to the mainNav and secondNav divs:

<ul>
      <li><a href=""></a></li>
  </ul>

Of course, we’ll add more <li>/<a> tags when we develop our navigation, but this will work for now.

Best Practices

I follow as closely as possible the HTML Best Practices developed by the Illinois Center for Information Technology Accessibility, so we’ll need to add a few elements to enhance accessibility and usability:

HTML Language Declaration
We’ll add xml:lang=”en-US” lang=”en-US” to the <html> tag
Header Navigation
We’ll add an <h1> element first in the bodyText div. The text in the <h1> tag should match part of the <title> tag.
We’ll add a descriptive <h2> element before each navigation list.
Skip Navigation links
We’ll add an unordered list with links to key page elements. This is helpful for many alternative browsing technologies most notably mobile browsers and screen readers.
Right after the body tag, we’ll add:

<h2 class="hide">Skip Navigation/Accesskeys</h2>
<ul class="hide">
 <li><a accesskey="1" href="#bodyText" shape="rect">Skip to main content</a></li>
 <li><a accesskey="2" href="#searchBox" shape="rect">Skip to search</a></li>
 <li><a accesskey="3" href="#mainNavDiv" shape="rect">Skip to navigation</a></li>
</ul>

Final Code

So our final page starter code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic Page Layout</title>
</head>
<body>
<h2 class="hide">Skip Navigation/Accesskeys</h2>
<ul class="hide">
 <li><a accesskey="1" href="#bodyText" shape="rect">Skip to main content</a></li>
 <li><a accesskey="2" href="#searchBox" shape="rect">Skip to search</a></li>
 <li><a accesskey="3" href="#mainNavDiv" shape="rect">Skip to navigation</a></li>
</ul>
<div id="container">
<div id="header"> </div>
<div id="mainNavDiv">
<h2>Main Navigation</h2>
<ul>
 <li><a href=""></a></li>
</ul>
</div>
<div id="mainContent">
<div id="searchBox"> </div>
<div class="secondNav">
 <h2>Second Navigation</h2>
 <ul>
  <li><a href=""></a></li>
 </ul>
</div>
<div id="bodyText">
 <h1>Basic Page Layout</h1>
</div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>