Steven Pemberton An XHTML2 Document

This document attempts to include examples of all parts of XHTML2. It is currently served (during development) as XML, to avoid in-built meaning and display disturbing the development).


XHTML uses the <h> element for headers in combination with the <section> element.

This is an h2, and is the same 'level' as the previous header.

The traditional h1 to h6 headers are also available.

A heading

Nested sections reduce the relative importance of headers

A heading

Nested sections reduce the relative importance of headers

A heading

Nested sections reduce the relative importance of headers

A heading

Nested sections reduce the relative importance of headers


The <p> element has a different content-model to the one in XHTML1, and in particular may include:

and the like.


Whitespace is usually collapsed on output, with the exception of the <pre> and <blockcode> (see below) elements and any element with an attribute layout="relevant". Pre elements are by default displayed with a monospace font.

This     is
     a    pre    element

And this is a paragraph with layout = "relevant".

And this     is
     a    pre    element with
    layout =      "  irrelevant   " .

The <hr> element has been renamed <separator> since it needn't be horizontal, nor a rule (even though that is its default presentation):

The traditional elements remain, like the nearly-useless <address>:


There is still a <blockquote> element with an optional cite attribute (which is a URI):

Should I set out on my autocycle? This was the question with which I began. I had a methodical mind and never set out on a mission without a prolonged reflection as to the best way of setting out. It was the first problem to solve, at the outset of each enquiry, and I never moved until I had solved it, to my satisfaction. Sometimes I took my autocycle, sometimes the train, sometimes the motor-coach, just as sometimes too I left on foot, or on my bicycle, silently, in the night. For when you are beset with enemies, as I am, you cannot leave on your autocycle, even in the night, without being noticed, unless you employ it as an ordinary bicycle, which is absurd.
There is the new <blockcode> to match <code>: HOW TO RETURN, s, l): SELECT: l<=0.5: PUT l*(s+1) IN m2 ELSE: PUT l+s-l*s IN m2 PUT l*2-m2 IN m1 PUT, m2, h+1/3) IN r PUT, m2, h ) IN g PUT, m2, h-1/3) IN b RETURN (r, g, b) and the classic <div> element:
which has no more semantics than being a block of text


Inline text should cause no surprises. There is strong text with <strong>; emphasis with <em>; and there is still the <span> element which on its own has no visible effect at all. There are abbreviations with the <abbr> element W3C.

These elements are already know: cite, code, dfn, kbd, samp, var.

Similarly sub, sup: H2O, E=MC2

There are two new elements q, which is the replacement for the old quote element. The difference is that q doesn't add quotes. He said Were you sent for?, and l (a lower-case L) which represents a line of text. This is intended as a replacement for the br element, with the advantage that you can use styling on it:

<l>2004, route des Lucioles</l>
<l>BP 93</l>
<l>06902 Sophia-Antipolis Cedex France</l>
which gives: W3C/ERCIM 2004, route des Lucioles BP 93 06902 Sophia-Antipolis Cedex France

Hypertext Module

The classic <a> element still exists: W3C. However, just as any element may be the target of a link in HTML, in XHTML2 any element may also be the source of a link: any element may carry an href attribute, such as this span: which refers to the W3C home page. You'll see that it has no special styling (unless you hover over it), even though it carries an href, but you can still click on it. It is up to the author to use a different presentation style if it is needed (or use an <a> element).

List Module

There are unordered lists:

Ordered lists:
  1. One
  2. Two
  3. Three
And definition lists:
The first number
A secondary number
There is a new sort of list, the navigation list, where each entry is a link:
  • home
  • W3C
  • up
  • Core Attributes Module

    The normal class, id, and title attributes are available on all elements as usual.

    Hypertext Attributes Module

    Above you saw the discussion about the <a> element, and it was pointed out that any element may now take an href attribute. Along with href, there are a number of related attributes:

    Normally when you click on a link content negotiation will take place between the browser and the server to decide which of any possible alternative documents at the URI should be used. You can use the hreftype attribute to force the content negotiation. For instance if at there is an XHTML and a PDF version of the document, then hreftype="application/pdf" will only accept a PDF version.
    Similarly, content negotiation is used to decide which language version should be served, depending on the user's choice. You can force a particular language with this attribute: <a href="/" hreflang="fr">The French version of our home page</a>.
    Edit Attributes Module

    Instead of the <ins> and <del> elements of earlier XHTML, XHTML2 has an attribute edit that can be used on any element. This attribute can have the values inserted, deleted, changed and moved. Any element that has an edit attribute may also have a datetime attribute that indicates when the change was made.

    Embedding Attributes Module

    There is still an <img> element. It takes a src attribute to specify the resource. The normal content negotiation takes place (e.g. with <img src="map"/>, there may be both png and jpg versions of the image, and the user agent and the server decide between them which is the best to deliver).

    The type attribute can be used to force the content negotiation. For instance <img src="map" type="image/png"/> would force the negotiation to only accept the png version.

    The img element should have content. If the image fails to load (for instance because there is nothing at that point, it is not an image, or it isn't of the type specified in the type attribute) then the content is displayed instead. For example: <img src="icons/main">W3C</img>.

    Here is an image: W3C - World Wide Web Consortium

    However, the src and type attributes may be put on any element, with the same effect: if the src resource is available, it is used, otherwise the content of the element is used. For instance: <p src="map">To get here from the station, turn left out of the main exit, and follow the train lines to the first bridge, we are the big white building in front of you on the left.</p>

    Internationalization Attribute Module There is an attribute xml:lang that may be used on any element, and specifies the (natural) language of the enclosed content:
        The window of the bakery proclaimed <em xml:lang="fr">Pain</em>.
        Poor baker!
    Media Attribute Module

    The media attribute allows you to specify that certain sections of the content are only for use in certain circumstances. For instance, in a set of slides that uses media="projection" for displaying the slides full-screen, there may be notes added to the slides that are only visible when printing the slides:

    <p media="print">These notes are only visible on the printed version</p>

    Metainformation Module and Metainformation Attributes Module

    The traditional meta and link elements are part of XHTML2. However the attribute that used to be called name is now called property, and while there is still a content attribute, alternatively, the content may now really be the content of the element:

    <meta property="title" content="My Home Page"/>
    <meta property="title">My Home Page</meta>
    The link element looks the same:
    <link rel="index" href="index.html"/>
    <link rev="contents" href="main.html"/>

    There are two new attributes:

    Normally the metadata and link information refers to the current document. {{example}} The about attribute lets you give metadata about parts of the document, or even about other documents. {{examples}}
    This allows you to give a datatype for the content in the content attribute or the content of the element:
    <span content="2006-10-01" datatype="xsd:date">yesterday</span>

    Unlike earlier version, the meta and link elements do not need to only appear in the head element, but may appear anywhere. By default they are not presented.

    Furthermore, the attributes of meta and link may be used on any element to similar effect:

    example here

    Bi-directional Text Module The dir attribute defines the direction of text. Its default value is "ltr", i.e. left-to-right. All the examples following use the text <element dir="something">123 456 789</element>. So, "ltr" as inline text: 123 456 789 and as a block:

    123 456 789

    You can set it to "rtl" (right-to-left), as inline text: 123 456 789 and as a block:

    123 456 789

    . Or to rlo (right-to-left-override), as inline text: 123 456 789, and as a block:

    123 456 789

    Some inline text and more inline text on another line

    A paragraph of text

    Some more inline text
    Still to do Handler Module handler Image Map Attributes Module usemap, ismap, shape, and coords attributes Object Module object, param, standby Style Attribute Module style attribute Stylesheet Module style element Tables Module caption, col, colgroup, summary, table, tbody, td, tfoot, th, thead, tr Ruby Annotation Module [RUBY] ruby, rbc, rtc, rb, rt, rp XForms Module [XFORMS] action, alert, bind, case, choices, copy, delete, dispatch, extension, filename, group, help, hint, input, insert, instance, item, itemset, label, load, mediatype, message, model, output, range, rebuild, recalculate, refresh, repeat, reset, revalidate, secret, select, select1, send, setfocus, setindex, setvalue, submission, submit, switch, textarea, toggle, trigger, upload, and value elements, and repeat-model, repeat-bind, repeat-nodeset, repeat-startindex, and repeat-number attributes XML Events Module [XMLEVENTS] listener element, and defaultAction, event, handler, objserver, phase, propagate, and target attributes in the [XMLEVENTS] namespace