Motive [Home].Glossary.

Guides

The Motive Web Design Glossary

markup

Markup comprises a set of symbols, or a language, that can be used to provide instructions. The use of markup is supported by rules that define the symbols and how they should be used: a specification.

A webpage is created by marking-up content (text, images, etc.) using the HyperText Markup Language (HTML).

The markup provides instructions to the software used for viewing a webpage (web browser) on how the page should look and work.

Markup and typesetting

Markup standards are not exclusive to web nor computer-based technologies.

Markup is not exclusive to web and computer-based technologies. Prior to electronic publishing, plain-text would be marked-up with instructions to the typesetter.

These instructions would indicate that text were a heading, quotation, caption, etc.

Based on the markup, the text would be styled using the appropriate typeface, point size, weight, etc.

HTML markup

To create an HTML document, content is marked-up into information elements.

Specific tags, denoted by characters within angle brackets, are used to signify the beginning, and end of each element.

For example, to tell the web browser that ‘The Motive Web Design Glossary’ is a heading, the text is marked-up into a heading element, using level-one heading tags;

<h1>The Motive Web Design Glossary</h1>

The look of the heading, the typeface, type size and colour, are set using a separate, supplementary presentation language: Cascading Style Sheets (CSS).

HTML elements include;

Presentational markup

Although the HTML language specification defines the markup that can be used to create a webpage, the webpage author decides which elements they will use to markup content.

If a webpage author is using software that enables a webpage to be edited visually, rather than at a code level, they may be more inclined to use markup that achieves a visual effect—this is referred to presentational markup.

For example, the appearance of a heading may be created by making text larger, bold and a different colour.

Presentational markup for such a heading may look like this:

<p><font size="+7" color="#990000"><b>The Motive Internet Glossary</b></font></p>

Similarly, the author could use either presentational or structural markup to display items as a list.

Approach to markup Sample code Appearance
Presentational <p> - eggs<br /> - milk<br /> - cheese </p>

- eggs
- milk
- cheese

Structural <ul> <li>eggs</li> <li>milk</li> <li>cheese</li> </ul>
  • eggs
  • milk
  • cheese

The structural markup example uses an unordered list element, <ul></ul> and list-item elements, <li></li>.

Limitations of presentational markup

As a general rule, presentational markup should be avoided;

Structural markup

Structural markup in Word

A non-web example of the benefits of a structural approach to content markup can be found when using Microsoft Word. If headings are used consistently throughout a document, then a table of contents can be generated auto-magically. If text has only been styled to look like a heading, then the program cannot distinguish headings from body copy, and the resulting table of contents is likely to be meaningless.

Structural markup is when elements are used to describe the structure of a document (webpage).

The HTML 4 language specification contains a limited number of structural elements, including:

Notice that the list of available elements does not include any of the structural distinctions that are common to modern webpages. For example, there are no elements for ‘masthead/banner’, ‘navigation menu’ or ‘related links’.

In place of the missing structural elements, webpage authors typically settle for headings.

Semantic markup

Semantic markup involves using elements that are appropriate to content meaning.

Semantic markup involves using elements that are appropriate to content meaning.

The distinction between semantic and structural markup is open to debate. If, by assigning an element type, the author is seeking to create meaning – for example, that a level-one heading should be understood by the reader as having a different meaning than the same content that has been marked-up as a level-two heading – then the markup could be considered semantic.

semantic = structural?

At a grass-roots (mass practice) level, web designers and developers commonly conflate ‘structural markup’ and ‘semantic markup’.
‘Semantic’ is by far the more popular term, and is typically used to mean markup that is not presentational.

However, marking content up as a level of heading is something of a broad distinction. The text has been identified as being more ‘significant’ than surrounding body copy, but is the heading text the beginning of a chapter, an article, or the title of a blog entry? The HTML markup does not communicate such distinctions.

By contrast, markup languages such as XML enable the author to more accurately describe content, at both a structural and semantic level.

For example, the DocBook XML schema provides a system and language for marking-up books, articles, and other prose documents, including technical documentation.

The DocBook schema provides elements that are a ‘up to the task’ of describing a publication, with elements for author, chapter, article, bibliography, etc.

The benefits of semantic markup

Semantic markup also enables content to be shared more readily. Computer programs (for example, search engine indexing programs), are able to more accurately interpret content when semantic markup is used:

Semantic markup can be used by assistive technologies, such as text-to-speech browsers, for example:

Related terms: DTD, elements, tags, HTML, metadata, search engine, web standards, wysiwyg.

 

Motive Web Design Glossary Trivia