Creating a page structure

We’ve covered semantic markup—that is, using HTML elements for the purpose for which
they were created. This theme continues when working with CSS-based layouts. With
tables, cells are used to lay out a design and are merged, split, chopped, and changed until
everything works visually. But when working with CSS, you need to be aware of the structure
of your web page from the start. That way, you can create structural elements with id
values that relate to their purpose, and then style them to suit.
For basic page structure, you mostly work with the div element. This element has been
around for some time, but used to be used for aligning text left, right, or centrally.
However, its real purpose is as a divider element, used to divide a document into blocklevel
groups or divisions. Therefore, in CSS-based layouts, the div element’s role is pivotal:
a number of divs are added to the web page in logical order, creating the basic structure;
each is provided with a unique id relating to its purpose; and the divs are then styled to
provide spacing, padding, backgrounds, and so on.