The second prototype is a representation of the division boxes as they relate to one another. The purpose of this prototype is to gain an understanding of the hierarchal structure of the HTML as it relates to the CSS. These boxes will be given “class” names that will be used in both HTML and CSS coding. Having a well-planned box prototype will facilitate the development of the HTML pseudo code.

What you want to do is take a blank piece of paper and draw a box. This is going to be named the "body," this is what is called a HTML tag. The other tag you will be using for creating structure is the division tag, "div." The body becomes the parent division, all boxes inside the body become children of the body. For this site I drew another large box inside the body and named it "wrapper," this is my second division level. The wrapper contains all other division boxes for the site. A box is drawn for the "header," now the header is a child of the wrapper. The relation of boxes to one another is important once we start dealing with CSS and understanding how style attributes pass from one box to the other.

The next box I draw is named "content," but just as the wrapper is the parent of content, content will be the parent of all other boxes within it. The children of content will be "left" and "right," they are named this based on their positioning reletive to one another, they could have been called anything. The right portion is even split into two sections, "text" and "images," these were named this way based on the content residing in them.

The final box is the footer. Its parent is the wrapper. Even though it occurs after both header and content, it is not related to either division box. Header, content, and footer are on the same hierarchal level. They will all take style attributes from the wrapper and pass style attributes to the boxes inside of them, their children. You could say that header, content, and footer are siblings.