What is Markup?

Markup comprises a set of symbols, or characters that you insert at certain places in a text or word processing file to indicate how the file should look when it is printed or displayed, or to describe the document’s logical structure. Markup indicators are often called “tags”.

For example:
In Web pages,
Visually we see a word in bold -> word
But behind the web pages it is written as such -> <b>word</b> using HTML (Hypertext Markup Language) and <b></b> is a “tag” used in HTML.

Refer to:
For more information about HTML

Refer to:
For more information about HTML Page Structure, CSS and difference between HTML Page with and without CSS.

Markup is not exclusive to web and computer-based technologies. In the early days, Markup also used in typesetter instruct certain format to the plain text.


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.

Types of Markup:

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

E.g. <html></html>

  • Presentation Markup
    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.

E.g. The appearance of a heading may be created by making text larger, bold and a different color.

<font size=14 color=”000000″><b>content here</b></font>

  • Structural Markup
    Elements are used to describe the structure of a document (webpage) such as title, headings, tables, quotations and lists.

  • Semantic Markup
    Involves using elements that are appropriate to content meaning. Semantic markup can be used by assistive technologies, such as text-to-speech browsers, for example:

  1. Heading elements can be used to quickly navigate within webpage content, emulating the way that sighted users can quickly scan/skim-read a page.

  2. Attributes can be added to aid pronunciation of words and phrases in foreign languages.

Markup can be inserted by the document creator directly by typing the symbols in, by using an editor and selecting prepackaged markup symbols (to save keystrokes), or by using a more sophisticated editor that lets you create the document as you want it to appear (this is called a WYSIWYG editor).

WYSIWYG (What You See Is What You Get) editor is a system in which content (text and graphics) onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product.

Below is an example of WYSIWYG editor:


On the left image showing just the visual part which correspond to what the author want it to be.

On the right image showing the coded part of the content that the author had typed.


SearchSOA (April 2005) Markup Definition

Motive Glossary (15 Sept 2008) The Motive Web Design Glossary – Markup

Wikipedia What You See Is What You Get (WYSIWYG)