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".
It is worth noting at this point, that a cascading Style Sheet may not be used, or usable, in some circumstances, and this is the reasoning behind the separation of style and content. A visually impaired user may use a technology which only needs the actual content of the page in text form. Badly constructed pages with embedded styling can cause text browsers to return unusable text, with a jumble of content, links, image references and heading information.