Structure vs. Presentation
The makeup of a webpage could be viewed as a combination of
the following four
- Content is the
collective term for all the browser-displayable
information elements such as text, audio, still images,
animation, video, multimedia, and
files (e.g., Word, PowerPoint, PDF, etc.) of web
does not require any additional
presentational markups or styles in order to fully convey its
- Structure refers to
the practice of using HTML on content to convey meaning (semantics)
and to describe how blocks of
information are structured to one
another. Examples: "this is a list" (ol, ul, li),
"this is headings and subheadings" (<h1>,
<h2>, ..., <h6>), "this section is related
to" (<a>), etc..
- Presentation (or Style)
to anything related to how the content and
structure is presented. Examples: size, color, margins, borders,
layout, location, etc.
- Behavior (or Interactivity)
interactivity between the webpage and its users.
Often, a clear distinction between content and
structure is difficult, because content could
also be viewed as the information with its semantic coding as well as
its structure. For example, the <img> tag, as a structural element, is used to create graphical content. In practice, the makeup of
a webpage can simply be viewed as a combination of three elements: Structure, Presentation, and Behavior.
"separation of content
and presentation," "separation
of meaning and
presentation,” and “separation
of structure and presentation” are
being used interchangeably. Nonetheless, all of these terms essentially
refers to the "separation
of the content made meaningful by
structure and the presentation, ” or
"separation of the stucture (HTML) and presentation (CSS)".
The main goal of HTML 4.01 is the "separation of structure and
presentation". As indicated in the section 2.4.1
of HTML 4.01:
its roots in SGML which
has always been a language for the
specification of structural markup. As HTML matures, more and more of
presentational elements and attributes are being replaced by other
mechanisms, in particular
style sheets. Experience has shown that separating the structure of a
its presentational aspects reduces the cost of serving a wide range of
etc., and facilitates document revisions."
(source: P. Griffiths,
"HTML Dog: The Best-Practice Guide to XHTML&CSS, " New Raider,
- In another
sense, separating distinct elements also means bringing them
- Ideally, the separation
of structure and presentation will produce an HTML document which
contains the content and structure and a separate CSS file
contains everything that controls presentation.
- The perfect website separation system
will store content in a database for a complete isolation and
content information. Structure, on the other hand,
is dealt with through a collection of template package built
by a server-side scripting language
like PHP or ASP.net.
- Separation of behavior and structure:
refers to the practice of maintaining clean semantic HTML markup that
is free of any attributes or script that introduces custom behaviors.
Any custom behaviors that are introduced into your HTML page should
come from external files that unobtrusively attach/bind the behaviors
to elements within your semantic markup. (more...)
of functionality and content: When client-side
script is added to the webpage, it directly affects specific HTML
elements and would fuse functionality with content. By separating
scripted functionality from content, the content remains pure and may
be representative of some type of data or a user interface element
without being statically bound to a particular action. When the
functionality is abstracted from the content, the functionality may
then be tasked to specific duties and intermix with actual content as
of layout style and presentational style: In the
rush to separate style from content, we
might end up mixing up the
layout style and the presentational style all in one CSS file. Layout styles dictate
elements of the page
arranged for content, while presentational
styles specify how the content appears. In terms
of a typical website that uses CSS for both purposes
(layout and presentation), both
types of styles should have their own file.
Tables for Layout
order to separate structure from presentation CSS should be
instead of tables to control the presentation of a document.
However, the concept of separating content from presentation
can be misunderstood and/or taken a bit too far.
For example, While
from tables to CSS to lay a page out is obviously encouraged,
web developers could be confused to think that tables shouldn't be used
at all. As a result, numerous implementations and even
tutorials for displaying tabular content in a tabular manner totally
ignore the use of table tag.
Although using them
for layout is semantically
tables still serve a purpose and remain an important part of the XHTML