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".
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.
Using <div> to impose logical structure
A simple web page with a header section, a navigation menu and some content could
be represented as follows:
<body>
<div id="content">
<div id="header">
-- all elements for the page header go in here
</div>
<div id="menu">
-- all elements for the navigation menu go in here
</div>
<div id="main">
-- all elements for the main page content go in here
</div>
</div>
</body>
The essential feature of this structure is that the logical structure does not interfere
with the flow of actual content. A text browser will ignore the <div> tags
and go through the other elements in sequence, and that sequence is in a sensible
order (or at least it should be if you have designed it properly). An important
point is that this logical structure can be made to appear in several different
ways, simply by using CSS appropriately. The web page designer should communicate
the design in a structured way, so that the web page developer can implement it
in the most appropriate way. So each of the following visual layouts is represented
by exactly the same XHTML structure, using the <div> pattern above:
Click the following link for examples of this
simple structure.
A more complex page with a header, navigation links at the top and bottom, with
a footer and three columns of content looking like:
may be represented as follows:
<body>
<div id="content">
<div id="header">
-- all elements for the page header go in here
</div>
<div id="topmenu">
-- all elements for the navigation menu go in here
</div>
<div id="main">
<div id="leftcol">
-- all elements for the left column go in here
</div>
<div id="middlecol">
-- all elements for the centre column go in here
</div>
<div id="rightcol">
-- all elements for the right column go in here
</div>
</div>
<div id="bottommenu">
-- all elements for the bottom links go in here
</div>
<div id="footer">
-- all elements for the footer go in here
</div>
</div>
</body>
See a working copy of the
ComplexStructure web page.
Note that care has been taken to ensure that the logical flow of page content (without
the <div> tags) is in a sensible order for a user with a text only display.
This page model is used quite often, where the main page links are in the top menu
and subsidiary, or less important links (e.g. Contact information) are available
in the bottom menu. Note that this XHTML page will only display with three columns
and top and bottom menus across the page if you attach a Style Sheet with the correct
formatting information for all the elements.
The following document:
WebPageDesign.pdf discusses this concept in more detail, with examples of CSS to go with each design.