Introducing
SG HT SG X ML

Markup Languages

  • Specialized for Tree-based data-structures
  • Based on the notion of tag (balise)
  • Tag ⮀ node in the tree
    <tag> (children description) </tag>
  • Text always as a leaf of the tree
  • Comments as special tags
    <!-- this is a comment -->
  • Spaces and newlines are meaningless

Nodes ⮀ Tags

<a> </a> <b> </b> <c> </c> <d> </d> <e> </e>

(up/down arrows for animation)

Nodes ⮀ Tags

<a> </a> <b> </b> <c> </c> <d> </d> <e> </e>

Nodes ⮀ Tags

<a> </a> <b> </b> <c> </c> <d> </d> <e> </e>

Nodes ⮀ Tags

<a> </a> <b> </b> <c> </c> <d> </d> <e> </e>

Nodes ⮀ Tags

<a> </a> <b> </b> <c> </c> <d> </d> <e> </e>

Nodes ⮀ Tags

<a> </a> <b> </b> <c> </c> <d> </d> <e> </e>

Nodes ⮀ Tags

<a> </a> <b /> <c> </c> <d /> <e />

Mixing Node Types

This is a very nice tutorial

Attributes

Tags can be given attributes 
<line x="0" y="1" stroke="blue" />
  • Values are always strings
  • Argument with no given value ≈ empty string value
  • Spaces and newlines are meaningless inside a tag

Special Attributes

id

  • At most one occurence of each ID value
  • Used to point a specific element in the tree

class

  • Can be used several times
  • Used to point a group of elements in the tree

Escape Characters

  • Characters with special meaning: < and >
  • How to insert the character < in a text node ?
  • Solution: escaping.
  • Syntax
    & escape-code-of-char ;
  • Code
    • & with &amp;
    • < with &lt;
    • > with &gt;
    • See here for a more complete list or here for all the gory details.

History

1970

  • Standard Generalized Markup Language
  • Meta-language based on tree structure
  • Separate the content from the form
  • Originated at IBM － lots of docs to keep track of
  • Standardized as ISO-8879 in 1986

History

1990

  • Hyper Text Markup Language
  • Flavor of SGML for text documents with internal links
  • Born at CERN － Birth of the Web!
  • Many versions, supervised by W3C
  • Many epic fights, yielding to many incompatibities
  • In 2015, version 5
    • This is the one we shall be using
    • Most (all?) incompatibilities sorted out
    • Back-bone of numeric economy

1970 - SGML

ISO-8879 spec

History

1998 : XML

  • eXtended Markup Language
  • Meta-language
  • For any structured data
  • Namespace feature
    • intertwining of languages
  • Many flavors
    • XHTML - XML version of HTML
    • SVG - Vectorial image format
    • MathML - Math formula
    • RDF - For documenting XML trees
    • ... your own !

1970 - SGML

ISO-8879 spec

1990+ - HTML

born at CERN

History

In this course

  • HTML version 5
  • XML as exchange format

1970 - SGML

ISO-8879 spec

1990 - HTML

born at CERN

1998 - XML

W3C spec