Structure vs. Presentation

The makeup of a webpage could be viewed as a combination of the following four elements:

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.   

The terms "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 simply the "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: 

"HTML has its roots in SGML which has always been a language for the specification of structural markup. As HTML matures, more and more of its presentational elements and attributes are being replaced by other mechanisms, in particular style sheets. Experience has shown that separating the structure of a document from its presentational aspects reduces the cost of serving a wide range of platforms, media, etc., and facilitates document revisions."

(source: P. Griffiths, "HTML Dog: The Best-Practice Guide to XHTML&CSS, " New Raider, 2007)

The Practice

Other Separations

Tables for Layout

In order to separate structure from presentation CSS should be used 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 switching 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 incorrect, tables still serve a purpose and remain an important part of the XHTML specification.