Most websites have a similar structure consisting of a header, content, and footer. The header is located at the top of the page and contains the title of the site, along with perhaps a logo, tagline, and some other branding. The header is usually consistent from page to page.
The content is where the “meat and potatoes” of the page goes. The information here will change for each page. Often this section of the page is divided into two columns with one being primary content and the other being secondary content. Some sites will features three columns and others just one. For the sake of simplicity, this example features only one column.
The footer is located at the bottom of the page and usually contains copyright information and a text version of the main menu. (Note: On a Mac, the copyright symbol © is typed by pressing option-g.) It may also include legal disclaimers, contact information, sitemaps, and credits. The footer, like the header, is usually consistent from page to page.
Each of these sections are created with a <div> tag and given an id. Additionally, another div is “wrapped” around all of these sections to control the overall width and positioning of the page. To be consistent, I will always give this div and id of “wrapper”, but you may see it with other names such as “container”.
Here is an example of the html source of a basic 1-column, XHTML layout:
<!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" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Basic 1-Column Layout </title> </head> <body> <div id="wrapper"> <div id="header"> <h1> Page Header Here </h1> </div><!--END HEADER DIV --> <div id="content"> <p> Content Goes Here </p> </div><!--END CONTENT DIV --> <div id="footer"> <p> Footer Goes Here </p> </div><!--END FOOTER DIV --> </div> </body> </html>
