What is: 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 was 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 ‘MakeAWebsitehub.com WordPress Glossary’ is a heading, the text is marked-up into a heading element, using level-one heading tags;

MakeAWebsitehub.com WordPress Glossary

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

HTML elements include;

headings,
lists,
tabulated data (tables),
anchors,
images, and
quotations.

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 color.

Presentational markup for such a heading may look like this:

<p><font size="+7" color="#990000"><b>Make A Website Hub WordPress 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

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

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

and list-item elements,

Limitations of presentational markup

As a general rule, presentational markup should be avoided;

Presentational markup is less efficient to maintain.
For example, if presentational markup is used, updating the visual design of a website involves editing the markup of every page.

Presentational markup limits the ease with which content may be reinterpreted/repurposed. For example, at a visual level, ‘large red text’ may communicate ‘heading’, but is just ‘more text’ to a computer program such as a search engine spider.

Support for presentational elements, such as the font element, has been phased out of contemporary markup specifications as more appropriate/efficient means of achieving the same result are introduced.

Future web browsers may not correctly display documents that use these superceded ( deprecated) elements.

Structural markup

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:

(meta) title;
headings: levels 1-6;
tables: tables can include captions, and markup that ‘binds’ column and row headings to data cells;
quotations: identifying content that has been referenced from another document;
lists: unordered (bulleted), numbered, definition.

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.

Structural Markup Summary

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 automagically. If the 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.

Semantic markup

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:

content types are explicit
For example, an image, tabled data and a list are understood be intrinsically different types of content.

content hierarchies may be explicit
For example, text marked-up level-one heading element can be assumed to be of greater significance than text marked-up as a level-two heading element (on the same webpage).

content relationships may be more apparent
For example, parent-child relationships may be assumed in the decision to structure a document using heading elements; the level-one heading one is the main topic, level-two heading a sub-topic, and so on.

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

Heading elements can be used to quickly navigate within webpage content, emulating the way that sighted users can quickly scan/skim-read a page.
Attributes can be added to aid pronunciation of words and phrases in foreign languages.