Separate Structure and Presentation - The Human Factor

Separate Structure and Presentation

One of the nifty little concepts that HTML inherited from its rich daddy SGML, is the idea that document structure and document presentation should be separate. The ideal is that a document is just an abstract idea, a structure of information that has no specific visual representation, but has meaning and format. The presentation of such a document should be controlled separately, through a mechanism that takes this abstract representation of the document and transforms it into something you can actually see.

This concept has many advantages. We have already seen how dealing with documents as structures of information has helped us author Web pages. Information is easy to store, edit, find and retrieve if it is organized in a certain canonical way. In other words, the computer in front of you, being the stupid thing that it is, cannot help you find a document with a certain title unless the author of the document has told his computer that that little line of text at the top is not just a line of text, it is also a title.

Up to now I've told you how to do the first bit, that is creating documents that are abstract but (I hope) at least make sense to stupid computers that can't figure out these things for themselves. What you don't know yet is how to control the presentation of these documents so that they appear pretty and meaningful to humans as well as machines. In other words, this is the first tutorial that is actually homo sapiens-biased.

The documents we have created so far can be viewed with any Web browser worth its salt. Displaying HTML documents is a Web browser's primary function. There are two things that you might have noticed:

The documents you have created are rendered in a meaningful way, with each element usually corresponding to a specific visual style.
They look ugly. U-G-L-Y, ugly. There's no two ways about it, documents haven't been this bland since typewriters where high tech. There are divorce settlements that look prettier than this. Five minutes of looking at this stuff and you'll be fumbling around for your remote control. We need spice!

Number 1 above is easy to note. You may have noticed that some elements cause most popular browsers to exhibit a specific behaviour. For example, the following fragment:

<P>This is <EM>not</EM> what I meant.

This is not what I meant.

Is typically rendered with the word "not" in italics. Other elements we have seen have other default renderings. A more interesting scenario is this:

<P>This reminds me of the words of Edna St. Vincent 
Millay:</P>
<BLOCKQUOTE>Safe upon the solid rock the ugly houses
stand;<BR>Come and see my shining castle built upon the
sand.</BLOCKQUOTE>

This reminds me of the words of Edna St. Vincent Millay:

Safe upon the solid rock the ugly houses stand;
Come and see my shining palace built upon the sand.

The BLOCKQUOTE element is usually rendered as an indented block of text. This is natural, since this is an accepted way of indicating a quotation. You might have noticed that I used a new element, BR. This element is used to insert a line break and continue the text on new line.

Name	BR
Usage	Creates an implicit line break.
Context	This is an inline element.
Contents	This is an empty element.
Start-tag	Required
End-tag	Forbidden
identifier attributes
title attributes
style attributes
CLEAR	LEFT, RIGHT or ALL	Object Clearance

This is an element often abused in order to create vertical space, by using several instances repeatedly. This brings us to Number 2 of the things we noticed before. We obviously would like to have our documents appear the way we want them to. The first reaction that might come to your mind is to start playing around with elements, inserting some here and removing others there. You might even take advantage of some of the browser bugs we mentioned in the previous column, like forgetting paragraph end-tags on purpose in order to control space between elements.

It would be easy to start playing around with these things in order to achieve our desired effect. What would be difficult is to stop playing around. You see, the minute you start inserting and deleting elements at will where they don't make sense structurally, all the benefits of having a document with a coherent structure are consigned to the trash heap. So what do you do?

You make sure you add a little Style...

URL: https://www.webreference.com/html/tutorial5/1.html
Created: August 20, 1998
Revised: August 20, 1998

Separate Structure and Presentation - The Human Factor

Find a programming school near you