Markup Languages: XML, HTML, XHTML

Lecture Notes for CS349W
Fall Quarter 2008
John Ousterhout

• The next part of the course will review the basic browser-side facilities that are available for creating interactive Web applications.
  • Traditional approach to GUIs:
    • Start with bit-mapped display
    • Learn how to manipulate individual pixels
    • Build higher-level primitives such as lines, characters, etc.
    • Build user-interface controls such as buttons, menus, etc.
    • Create applications on top of these
  • In contrast, the Web uses a document-centric approach:
    • "Display the following document"
    • No general-purpose pixel-level access.
    • Heavy use of images instead.
  • Web documents formatted using HTML: HyperText Markup Language
    • Two significant elements of the name: "markup language" and "hypertext"; we will cover them separately.

Markup languages

• Start with the document's raw text:

  Introduction
  This article is a review of the book
  Dietary Preferences of Penguins, by
  Alice Jones and Bill Smith. Jones
  and Smith's controversial work makes
  three hard-to-swallow claims about
  penguins:
  First, that penguins actually prefer
  tropical foods such as bananas and
  pineapple to their traditional diet
  of fish
  Second, that tropical foods give
  penguins an odor that makes them
  unattractive to their traditional
  predators
  ...
  

• Add markup tags, which provide additional information about the text:
  • How to display it (<i> for italic, <ul><li> for lists)
  • What is the meaning of the text (<h1> means top-level heading, <button> means a graphical button that can be clicked with the mouse)

• Markup can also be used to incorporate additional content in the document:
  • <img src="fido.jpg">
• Markup languages have been around for quite a while:
  • Earliest origins in the 1960's?
  • Reinvented several times in the 1970's and 1980's
  • Widespread usage by late 1980's
• I will present 2 markup languages:
  • XML: a general-purpose markup language (simple and regular)
  • HTML: special-purpose markup language for Web documents (arose in a quirky irregular form, has gradually become more clean)

XML: eXtensible Markup Language

• Developed after HTML (in the late 1990's), partly in response to HTML's quirkiness
• Goals:
  • Universal format for exchanging both documents and structured data (e.g., records in a database or computer data structures).
  • Many languages in one: each XML document can define its own set of tags.
• Sample XML document:

  <?xml version="1.0" encoding="utf-8"?>
  <person>
    <name>Alice</name>
    <age>23</age>
    <state>California</state>
    <height>64</height>
  </person>
  

• Information in <...> is markup, all other information is raw text.
• Header line: identifies this as an XML document, indicates character encoding and XML version.
• Body of document consists of a hierarchical collection of elements, starting with a single outer element (<person>).
• XML does not require any particular element structure or tag names; each document can have its own schema.
• Every element must have an explicit start and end (but can use <foo /> as shorthand for <foo></foo>).
• Start tags can contain attributes:

  <person name="Alice" age="23"
    state="California" height="64">
  

• People argue about whether it's better to use attributes or nested elements.
  • Attributes look cleaner in some cases
  • Attributes typically apply to the entire element
  • Attributes cannot contain nested information, whereas elements can
  • Attributes must be single-valued
• Tags can be recursive and/or repeated:

  <?xml version="1.0" encoding="utf-8"?>
  <tree>
    <node>
      <node>
        <value>18</value>
      </node>
      <node>
        <node>
          <value>24</value>
        </node>
        <node>
          <value>34</value>
        </node>
      </node>
    </node>
    <node>
      <value>42</value>
    </node>
  </tree>
  

• Cannot use < or > directly in a document; these are reserved for tags.
  • Use entities instead: &lt; and &gt;
  • This means & is a special character also: use &amp;
  • Also, need &quot; to include a quote in an attribute.
  • Many other entities are defined by XML for convenience.
• XML has a few other features we won't cover here, such as namespaces for organizing tag names.
• Two optional mechanisms available to enforce a particular structure on an XML document:
  • DTD (Document Type Definition): an XML document that describes permissible structure for a class of XML documents ("... each <person> element must contain <name> and <age> children ...").
  • XML Schema: newer than DTD's, designed to get around some shortcomings of DTD's; also more complex.
  • There exist programs that will read a DTD or XML Schema file and validate an XML file against it.
• What's good about XML?
  • Textual format, supports Unicode and UTF-8 for internationalization.
  • Simple, clean syntax.
  • Can be used for a variety of different purposes.
  • Heavily used for data exchange in Web-based applications, and for storing application data.
  • The common syntax has allowed a large collection of tools to be developed, most of which will work on any XML document (e.g., validators).
  • XML documents can be read by humans when necessary; the tags make them almost self-documenting.
• XML weaknesses:
  • Verbose.
  • Not as fast to generate or parse as other formats (but fairly efficient parsers have become available).
  • At the beginning people hoped XML would instantly allow any application that understands XML to communicate with any other application that understands XML, but this hasn't come to pass: if 2 applications use different XML schemas then they can't interact in a meaningful way.
• What did people do before XML?
  • Custom format for each purpose (e.g., every application had its own back-end data format).
  • Typically optimized for density.
  • Typically binary:
    • Can't read with normal text editors.
    • Machine dependent (e.g. may depend on machine byte orders).
  • No tools for managing.

HTML

• Basic structure similar to XML:
  • <> tags
  • Attributes
  • Entities for special characters.
• Special-purpose: predefined set of tags.
• Trivial Web page: hello.html

  <html>
    <head>
      <title>Hello World</title>
    </head>
    <body>
      <p>
      Hello world!
    </body>
  </html>
  

• Notes on hello.html:
  • Extra whitespace is generally ignored (browser decides actual spacing)
• Two important attributes supported by all element types:
  • class: used to group related elements (typically for controlling display attributes with CSS).
  • id: provides a unique identifier for element. Very important when implementing dynamic effects (used to locate a particular element).
• Irregular:
  • Some tags are singletons, such as <br>, <p>.
  • Not all attributes have to have values:

    <select name="equipment" multiple>
    

  • Some elements can overlap:

    <p><b>xyz</p><p>second</b> third</p>
    

  • Early browsers tried to "do the right thing" even in the face of incorrect HTML:
    • Ignore unknown tags
    • Carry on even with obvious syntax errors such as missing <body> or </html>
    • Infer the position of missing close tags
    • Guess that some < characters are literal, as in "What if x < 0?"
    • Try the following document:

      <html>Hello, world
      

  • Not obvious how to interpret some documents (and browsers differed).
  • Users came to depend on browser quirks:
    • HTML documents with bad syntax still display.
    • Web page designers don't notice the problems, so bogus pages proliferate.
    • Browsers can't change to reject bad pages: would "break" too much content.
    • Newer browsers must emulate quirks of the very first Web browsers.
• Being forgiving allows bad habits to develop, which you then have to tolerate forever.

XHTML

• HTML has gone through several revisions to add new features and make it more consistent.
• XHTML is a standardized version of HTML that uses pure XML syntax:
  • Looks just like regular HTML in most respects.
  • All elements must be formally closed (e.g., must specify </p>).
  • Elements must nest hierarchically.
  • All attributes must have explicit values: instead of <select name="state" disabled>, must say <select name="state" disabled="disabled">
• There is a DTD for XHTML, so you can validate XHTML with any XML validator, such as xmlvalid.
• Here is "hello world" in XHTML:

  <?xml version="1.0" encoding="utf-8"?>
  <!DOCTYPE html PUBLIC "-//W3C//
      DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/
      DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en" lang="en">
    <head>
      <title>Hello World</title>
    </head>
    <body>
      <p>
      Hello world!
      </p>
    </body>
  </html>
  

• I recommend using XHTML.