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".