AGOCG logo
Graphics Multimedia VR Visualization Contents
Training Reports Workshops Briefings Index
This report is also available as an Acrobat file.
Back Next Contents
Authoring and Design for the WWW


Functional markup versus fixed formatting

Advantages of functional description

(the HTML approach)

In functional description, each element of a document is given a descriptive tag, which indicates its role, for example as a headline, as an emphasised word, as an item in a numbered list, and so forth. Here we look at the advantages in principle of this approach, and begin to see how it impacts on Web work. Key advantages are portability, the ability to make multiple publications from a single source, to make publications which change their form according to need, and the partial automation of layout.


Multiple publications

When a differently formatted publication is required it can be produced not by changing the functional descriptions but simply by altering the formatting instructions. By this method, material can be made to appear in radically different formats, such as on paper and on screen.

In practice

Up to a point, documents prepared for the Web can also be laid out on paper using some of the same mark-up tags as control the presentation on screen. This means that where documents are required in both screen and paper forms, economies of effort are possible. However, due to the differences between true functional description and the hybrid approach using style-sheets adopted by most page-layout packages, some reworking will be necessary whether material is transferred from the Web to paper or vice-versa.

Filtering and configurable presentation

When the components of a document are described functionally, the document can be presented in different ways on demand. For example, main headings alone could be presented at one moment, while greater detail is presented when the user requests it (an example of this approach is the choice between headings and detail offered by outliner software).

In practice

Some proprietary hypertext systems (for example, Guide) offer this possibility of unfolding text which adds to or replaces the top-level summary information within the same document. Web browsers do not offer levels of detail in this way. However, HTML does make it easy to present summary information on one page' and fuller detail on another. The user moves from one to the other by clicking on the summary text. It is necessary for the designer to provide a go back' facility which returns the user to the original summary text unless the user is to use the go back' facility of the browser itself.

Special needs

Users can adjust the way in which the content is presented to suit their needs.

In practice

A larger default size of type can be chosen in most browsers. The relative sizes of larger and smaller type within the document are preserved.

Plug-ins for popular browsers allow text-to-speech software to read aloud the text of a Web page.

In principle, hypertext links could identify themselves by emitting a sound when pointed at. However we do not know of any browser which actually offers this kind of facility.

Integration of hypertext links in the document description

Primitive hypertext systems separate the description of what the text looks like from its hypertext behaviour'. Functional description allows the same method to indicate that something is, say, an emphasised word or a hypertext link point.

In practice

Just as an element of the text can be specified as, say, Heading Level 2, so any part of the text can be made into an active item. The same is true of a picture. An active item will typically be a hypertext link to another page (an anchor'), but might instead open an e-mail editing window or activate some other interaction.

Since the tagging of an element is bound to the element itself the tags are embedded in the text the function of the element will always be carried with it. This is one of the great merits of HTML over other systems which use position on the page to store the location of active areas. Without this binding of the element to its behaviour, there is a real danger that the interactive function will separate from the triggering element, typically as a result of the document having been edited.

This text has an emphasised word and a hypertext link in it. Each is specified in a similar way. The linking is bound to the link word in a way which withstands changes caused by editing. It is also easier to automate the process of making links, for example by using search and replace to turn all occurrences of a particular word into hypertext links.
<p>This text has an <em>emphasised</em> word and a <A HREF="name of document to link to">hypertext</A> link in it. Each is specified in a similar way. The linking is bound to the link word in a way which withstands changes caused by editing. It is also easier to automate the process of making links, for example by using search and replace to turn all occurrences of a particular word into hypertext links.</p>
Functional description
The upper text, as displayed to the user in a Web browser, was generated from the HTML markup in the text beneath it. Note that the form and use of the tags is the same, whether the behaviour' intended is that a text item should be visually emphasised or that it should be turned into a hypertext trigger leading to another text.

Contrast this with the method illustrated below, where hypertext links are specified by a completely different process from that used to specify the appearance.

example of fixed formatting
Fixed formatting
While the outward appearance to the user might be the same, in this example the hypertext link point was specified using a graphical position on the page. This is a fragile method, since editing and the resultant reformatting of the text will cause the links to become separated from their words!

In addition, it is not possible to automate the process of turning given words into hypertext links, since it is not really the word which is linked but the position on the page where the word lies.

Separation of roles

Writers will usually be willing to concern themselves with the function of the elements of their work, but may lack the confidence or ability to deal with the visual appearance. Functional description allows the writer to tag the text in a semantic way, leaving aside the issue of how it will look. This can then be taken care of as a separate process independent of the content.

Even where author and designer are the same person, it is often useful to be able to separate the origination and the presentation of the content.

In practice

In authoring an HTML page, it often happens that once the page appears in the Web browser window writers does not like what they see, and may then change the functional description to cause a happier result to appear. For example, the writer decides that all the Heading Level 2 subheads in a document simply look too big and changes them all to Heading Level 3 in order to get a more acceptable appearance. This is not strictly within the spirit of functional description, but in practice does no harm.

Since the tags which dictate the appearance are themselves simply text, it is easy to search for every occurrence of a particular tag in the text editor and replace them with a new one. This is highly preferable to the simplest fixed format approach which would require every item to be changed individually by hand.

Automated layout

Though designers will always regard themselves as essential, there is scope in simple functional documents for ignoring their contribution altogether, relying on the design principles incorporated in Web browsers themselves. Particularly where large quantities of text are involved, any opportunity to automate the laying out of pages should be welcomed.

In practice

In creating documents for the Web, there is scope for partial automation by a variety of methods. Text is formatted by choosing appropriate functional descriptions for each element, and the browser does the rest. Where documents follow a regular pattern, templates can be prepared which contain all the necessary tags for the expected parts. If very large quantities of repetitive data are to be formatted, then it may be worth exporting it from a database with the appropriate tag automatically appended (for example by a script in a scriptable database). Taking this idea one step further, the data can be retrieved from a database on the fly and inserted into the page whenever the user chooses a particular option.

There are several ways of usefully automating the layout of Web pages.

Automation of layout for Web Pages
Relying on the browser

Use the layout principles built into Web browsers

Preparing templates

Use templates (frequently used tags are placed in a suitable order)

Exporting from databases (asa one-off authoring process)

Export data from a database and use a custom-made program to insert the appropriate markup tags
Export data from a database, using its scripting language to insert the appropriate markup tags

Exporting from databases (continuously on Web server)

Use a CGI to get data on demand from the database and put it into the Web page

This last will be the only solution where there are very large quantities of data in similar formats, especially if that data is regularly changing. For example, if course materials are delivered on-line, there will be a need for information about who the student is, which module they are currently taking, where in the module they have reached, their personal preferences, their previous records and many other related items to be taken into account in dictating what each user sees on the page. A very substantial amount of setting-up would be required for such a system.

Back Next Contents

Graphics     Multimedia      Virtual Environments      Visualisation      Contents