tags allows you to create distinct divisions on your web page. They are identified with a unique id. You can then add a style (css selector) that specifically applies to div of that id. Remember to include DOCTYPE (to render your page accurately in browsers) and meta tags (enables search engines to spider your pages).

wrapper: is div that wraps around all other divs like a container for page elements. header: defines top banner of page main: defines main content of page nav: defines navigation of page footer: defines footer and sub-navigation of page

2. Create CSS code - below is CSS code that styles page as a centered 2 column CSS layout with a navigation bar and a footer. The div#wrapper style creates centered box which acts as a container for rest of page content. The width: 80% rule sets width of div. The background-color:#FFFFFF rule creates a white background for div. The margin-top: 50px and margin-bottom: 50px rules create a space of 50 pixels for top and bottom margins for div itself.

The proper way to center a block-level element with CSS is to set margin-left: auto and margin-right: auto. This instructs browser to automatically calculate equal margins for both sides, thus centering div. The border: thin solid #000000 rule adds a border around outer div. The rest of CSS code styles divs for header, footer, nav, and main content.

The div#header and div#footer styles set margins and padding for those divs. In addition, div#header includes text-align: center rule to center header text, and div#footer includes border-top: thin solid #000000 rule to create a border along top edge of div to replace horizontal rule above footer in table-based layout.

The div#nav and div#main styles create two columns in middle of centered box. In div#nav style, float: left rule pushes div to left side of its parent element (the wrapper div), and width: 25% rule sets div's width to 25 percent of parent element. With nav div floated to left and limited to a set width, it leaves room for main div to move up to right of nav div, thus creating two-column effect. The div#main style includes margin-left: 30% rule to keep main text aligned in a neat column instead of spreading out below nav column. The main div's left margin is set to a value slightly larger than width of nav div.