Modelling with XML

Examples of XML languages

As XML is a metalanguage. It has no predefined tags. Rather, it provides a syntax for the development of vocabularies, including  XHTML and SVG. These are two standards that have become  important in web development and they highlight two different XML use cases: for the description of web pages and for the description of graphics.

XHTML

One of the best known XML standards is probably XHTML. XHTML is an XML vocabulary for the description of web pages. The basic structure of an XHTML document consists of an <html> root element and two nested child elements, <head> and <body>. The head section may contain metadata and links to external files (e.g. CSS and JavaScript files), while the body section contains the page content that is displayed by the web browser. The page content in the body section can be further structured using elements to identify divisions, <div>, headings, e.g. <h1>, <h2> and <h3>, paragraphs, <p>. Furthermore images and other media can be included with XML elements. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title>Title of the XHTML document</title>
  <meta property="dc:creator">Roman Bleier</meta>
</head>
<body>
   <h1>The main heading</h1>
   <p>a paragraph</p>
</body>
 
</html>


A crucial difference between XHTML and HTML is that because HTML is not an XML language it does not need to follow the XML rules (although it does follow SGML rules). For instance, in HTML5 not all elements need to be closed with a closing tag, while XHTML requires that every opening tag has a corresponding closing tag. For more information on XHTML and the differences between HTML and XHTML we recommend online tuturials such as the one provided by W3schools.

SVG

SVG is a standard developed by the W3C to describe vector graphics. SVG is an XML based language that uses the same basic syntax as other XML languages. Like all XML languages also SVG files can be opened with a simple XML editor and it contains human-readable data that is interpreted by an SVG processor as a graphic. For instance, the following statement describes a black circle with a radius r of 50:

<circle  r="50" stroke="black" stroke-width="1"/>

SVG documents are essentially a series of XML statements that describe graphic elements. These statements can easily be changed and rewritten with a programming language such as JavaScript. Therefore, SVG images are becoming increasingly popular in interactive web development and online gaming. W3Cschools has a gaming tutorial that uses SVG (http://www.w3schools.com/games/). However, SVG is also used in the print publishing industry for high-quality images for posters.

If you are interested to learn more about SVG the tutorial of W3school or the Introduction to SVG by the Mozilla Developement Network are good places to start.