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:
https://cs2024.wordpress.com/2015/08/27/what-is-markup/
For more information about HTML

Refer to:
https://cs2024.wordpress.com/2015/08/28/what-is-markup-2/
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.

markup001

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:

WYSIWYG1 WYSIWYG2

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.

References:

SearchSOA (April 2005) Markup Definition
http://searchsoa.techtarget.com/definition/markup

Motive Glossary (15 Sept 2008) The Motive Web Design Glossary – Markup
http://www.motive.co.nz/glossary/markup.php

Wikipedia What You See Is What You Get (WYSIWYG)
https://en.wikipedia.org/wiki/WYSIWYG

Advertisements

One thought on “What is Markup?

  1. You might want to be clearer on defining the Types of Markup, because the way you’re writing your article implies that these types of markup are mutually exclusive types, which is not the case. That is to say, by having HTML markup as a type implies that Structural and Semantic Markup are separate sets of markup from HTML.

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s