Example of page layout using CSS

Change layout: No Style | Menu at top | Menu at Left | Menu at Right

Logical structure of your web page.

The XHTML elements we have dealt with so far have been concerned with incorporating structured data on the web page at a low level. I.e. individual images, paragraphs, titles and lists etc. However, there may be a higher level structure which we want to use to allow a web browser to represent the page in a meaningful way.

A typical web page will have a least three logical sections, and maybe more. Each page will have some main content, a collection of links to other pages, and usually a header section which is independent of the content. Some pages may also have footer information and may have its content displayed in multiple columns (on graphical browsers such as Internet Explorer of Firefox).

To make this logical structuring possible, XHTML has a block structuring element (<div>) which does not cause any change in the information which is displayed on the page, but which does allow a Cascading Style Sheet to identify the different sections and modify their representation. An essential feature of XHTML which all elements use, including the <div> tag, is the ability to identify the element. XHTML uses an attribute called 'id' to allow you to provide a unique identifier for an XHTML element. This id can then be used by CSS to alter the way in which the element is represented.

XHTML elements can also have a 'class' attribute. This is used when a set of elements need to share a similar representation. So, for example, all elements with the class "big" could be displayed in a larger font, because the CSS specifies a large font for elements with class "big".