Examples of Markup Languages

SGML

(See A Gentle Introduction to SGML and The SGML/XML Web Page)

Text with all tags

<anthology>
  <poem id=jabberwocky 
          author="Lewis Carroll" date=1872> 
    <title > Jabberwocky </title>
    <stanza>  
      <line> T'was brillig and the slithy toves  </line>
      <line> Did gyre and gimble in the wabe. </line>
      <line> All mimsy were the borogoves </line>
      <line> And the mome raths outgrabe. </line> 
     </stanza>
    <stanza>  
      <line> Beware the Jabberwock, my son </line>
      <line> The claws that bite, the jaws that catch. </line>
      <line> Beware the Jubjub bird, and shun </line>
      <line> The frumious Bandersnatch! </line> 
      </stanza>
     <!-- More stanzas -->

   </poem>
   <!-- More poems -->
</anthology>

Document Type Definition (DTD) for SGML

<!ELEMENT anthology  - - (poem+)>
<!ELEMENT poem       - - (title?, stanza+)>
<!ELEMENT title      - O (#PCDATA)>
<!ELEMENT stanza     - O (line+)>
<!ELEMENT line       O O (#PCDATA)> 

<!ATTLIST poem 
              id     ID      #IMPLIED
              author CDATA   #CURRENT
              year   NUMERIC #IMPLIED  >

Text with only needed tags

<anthology>
  <poem author="Lewis Carroll" date=1872>
     <title>Jabberwocky
     <stanza>  T'was brillig and the slithy toves 
        <line> Did gyre and gimble in the wabe.
        <line> All mimsy were the borogoves
        <line> And the mome raths outgrabe. 
     <stanza>  Beware the Jabberwock, my son
        <line> The claws that bite, the jaws that catch.
        <line> Beware the Jubjub bird, and shun
        <line> The frumious Bandersnatch!
     <! More stanza>

   </poem>
   <!-- More poems -->
</anthology>

References to ID'd item

<!ELEMENT poemref - O EMPTY >
<!ATTLIST poemref target IDREF #REQUIRED >


Carroll's Jabberwocky <POEMREF target=jabberwock> ...

SGML: Mixed Hierarchy

<!DOCTYPE p.anth[
<!ELEMENT p.anth       - - (page+)>
<!ELEMENT page         - - ((title?, line+)+) >
<!ELEMENT (title | line) - O (#PCDATA) >
] >

<!DOCTYPE anthology [
<!ELEMENT anthology - -  (poem+) >
<!ELEMENT poem      - - (title?, stanza+) >
<!ELEMENT stanza    - O (line+)
<!ELEMENT (title | line) - O (#PCDATA) >
] >

<(anthology) anthology>
<(p.anth) p.anth>
<(p.anth) page>

<!-- Other titles and lines on this page -->


<(anthology) anthology>
<(p.anth) p.anth>
  <(anthology) poem author="Lewis Carroll" date=1872>
     <title>Jabberwocky
     <(anthology) stanza>  T'was brillig and the slithy toves 
        <line> Did gyre and gimble in the wabe.
  </(p.anth) page>
  <(p.anth) page>
        <line> All mimsy were the borogoves
        <line> And the mome raths outgrabe. 
     <(anthology) stanza>  Beware the Jabberwock, my son
        <line> The claws that bite, the jaws that catch.
        <line> Beware the Jubjub bird, and shun
        <line> The frumious Bandersnatch!
     <!-- More stanza -->

   </(anthology) /poem>
   <!-- Rest of material on page  -->
  </(p.anth) page>
</(p.anth) p.anth>
</anthology>

Cascading Style Sheets (CSS)

(See W3C Cascading Style Sheets and CSS Beginner's Guide)

CSS inside an HTML file

<STYLE type-"text/css">
<!-- h3  { font-family : Arial; font-style : italic; 
             color : green } -->
</STYLE>

CSS in-line

<H3 style= "font-family : Arial; font-style : italic; color : green" >

Using CSS externally

Style file style1.css
h1,h2,h3,h4,h5 { color: red}
body { background-color: #cccccc; 
      font-family: Arial, Helvetica, sans-serif}
p { line-height: 200%}
ul li { font-size  : 70% )
.red { color : red }
.green { color : green }
.blue { color : blue}
#big { font-size : 120% }
#upper { text-transform : uppercase } 
HTML file
<HTML> 
<HEAD> 
<LINK rel="stylesheet" href="style1.css">
</HEAD>
<BODY> 
. . . 
</BODY> 

XML

See An Introduction to the Extensible Markup Language (XML)

XSL Stylesheet

The following two examples are from Understanding XSL by Jay Greenspan.
<xsl:stylesheet>

  <xsl:template match="/">
    <HTML>
    <BODY>
    <xsl:process-children/>
    </BODY>
    </HTML>
  </xsl:template>

  <xsl:template match="author">
     <H1>
     <xsl:process-children/>'s fabulous
     </H1>
  </xsl:template>

  <xsl:template match="recipe">
     <H2
     <xsl:process-children/>
     </H2>
  </xsl:template>


    . . . 
</xsl:stylesheet>


Complex XSL Stylesheet

<xsl:stylesheet>
  <xsl:template match="/">
     <xsl:for-each select = "list/recipe">
       <TABLE>
       <TR> <TD>
       <xsl:process select = "recipe_name"/> </TD>
       <TD>
         <xsl:for-each select = "ingredients/item"
           <BR> <xsl:process-children/> </BR>
         </xsl:for-each>
       </TD> </TR>
       </TABLE>
    </xsl:for-each>
  </xsl:template>
<xsl:stylesheet>

MathML

The following examples are from Mathematical Markup Language (MathML).

Formula: x2 + 4x + 4 = 0

Presentation markup

<mrow>
 <mrow>
  <msup>
   <mi>x</mi>
   <mn>2</mn>
  </msup>
  <mo>+</mo>
  <mrow>
   <mn>4</mn>
   <mo>&InvisibleTimes;<mo>
   <mi>x</mi>
  </mrow>
  <mo>+</mo>
  <mn>4</mn>
 </mrow>
 <mo>=</mo>
 <mn>0</mn>
</mrow>

Content markup

<reln>
 <eq/>o
 <apply>
  <plus/>
  <apply>
   <power/>
   <ci>x</ci>
   <cn>2</cn>
  </apply>
  <apply>
   <times/>
   <cn>4</cn>
   <ci>x</ci>
  </apply>
  <cn>4</cn>
 </apply>
 <cn>0</cn>
</reln>

HyTime

See Quick Guide to HyTime Basics