We need to divide our page into nested areas. We are going to work backwards, starting from our desired final page, as sketched on a piece of paper. Then we will start defining areas, like this:
The areas are general containers. For example, we have the area called “#container” that has all the information, which has three sub-areas: ‘#header’, which has everything that has to do with the header; ‘#content’, which has the actual content of the page; and ‘#footer’, which has everything related to the footer. As another example, ‘#content’ has only two sub-areas: ‘#nav’, which has the navigation menu, and ‘#main’ that has all the text and images. Our actual content, i.e., the text, images, and links, (all drawn in red) will show up at the leaves of our tree of areas:
The point of having all these nested areas is that later, when we use Cascade Style Sheets, we will be able to define the style of specific areas. For example, if could change the color of all the page, by changing the color of the ‘#body’ area, or we could just change the color of the footer, by changing the color of the ‘#footer’ area.
Now that our structure is organized, we map the structure to our code using the ‘division’ tag, whose role is to split the webpage into specific areas, i.e., it is tailor-made to reflect the page structure. We take our template, remove a couple of lines from the header that we will not be using yet, and map the page structure that we just wrote into the template’s body like so:
Each division has an identification label that we can use to address that division specifically.
Since we replaced our dummy ‘Hello, World!’ text from the body of the page, with empty divisions, the page itself is now empty, but it is ready to receive the content: