Although all the objects and elements of a resource need to be 'structured', in this context the principles applied to 'text' can also be applied to other forms of media such as images, tables etc. Specific detailed information about these different media is available throughout the website (see index).
The main principles are:
Identify headings, sub-headings, quotations, tables, paragraphs, lists, as such. Do not use layout or colour to indicate structure. Once the structure is clear, you can use styles to organise the layout and appearance of the various structural elements. (See an explanation of structure.)
To deal with quotes, create a style that appears the way you choose - rather than use the <blockquote> tag. Use <q> for inline quotes but be warned that currently it does not automatically put in quotation marks but it may in the future (according to the W3C Recommendations). It may be safer to use the <span> tag and specify the formatting using a style.
Fonts, colours, backgrounds and other attributes of text should all be set only through the use of styles or stylesheets. headings are number to denote their significance so how they appear should be determined by a style, the structure or ranking of a heading should not be used to determine their appearance.
To layout structured text, if there are useful tags, use them - eg h1, h2, h3 to indicate the type of heading, but to position, colour, change the font of a chunk of text, use the <div> tag. So, to centre some content, mark the section up as a <div> ....</div> and then create an attribute for that div - eg centre, bold, yellow, ...etc The <div> tag is recommended over many others that appear to achieve the same effect. Combine one or more structured objects using <div> - to do something to a part only of a structured element, eg a word in a sentence, use <span>. To emphasise text, choose a favourite way, eg italics, create a class that does italics (maybe call it 'emphasis'), and use it with the <span> tag.
'Titles' of web resources are shown on browsers (graphical interfaces) as the label for the window. On other devices, they can be useful to orient the user. They are often used as default 'subject' descriptions of the content of a resource. Titles should be chosen carefully, provide contextual information, and be placed in the 'head' of the resource.
|As it appears on a screen.||As it is coded.
||Hey! Bon chance!
||Melbourne VIC 3001
||Get help at Sunrise!
||I would love to find a
Lists come in various flavours and are automatically formatted by agents. The various forms of lists are structural and so should be used to structure text but their presentation should be organised as a style.
<code> and <samp> tags are used to designate these as special and they are rendered by default in IE and other browsers in monospace fonts. The format can be changed with styles.
Stylesheets are linked to the web page using a <link> tag in the head of the document:
<link rel="stylesheet" type="text/css" href="site.css">
For more information about styles, see the notes on styles and stylesheets.
Some parts of content are of particular interest to search engines, and by structuring text you can take advantage of this.
Most likely to be of interest are:
'Structure' is the name for the skeleton of a resource. The various parts of the resource, like the name, the big headings, the small text, and the objects that illustrate the ideas, and the presentation information, are all structural objects. What is inside the structural objects is content - the structure is not descriptive of the meaning of the content but the part that each bit of content plays in te total resource.
Sometimes it is helpful to have a structure in advance of developing content. An example of structure into which content can be added follows:
Last updated: 8 March 2002