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.