Steven Pemberton
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.
The traditional h1 to h6 headers are also available.
Nested sections reduce the relative importance of headers
Nested sections reduce the relative importance of headers
Nested sections reduce the relative importance of headers
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:
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>:
<div> element: 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>W3C/ERCIM</l> <l>2004, route des Lucioles</l> <l>BP 93</l> <l>06902 Sophia-Antipolis Cedex France</l>which gives:
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).
There are unordered lists:
The normal class, id, and title attributes are available on all elements as usual.
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:
hreftype attribute to force the content negotiation. For instance if at http://example.com/document there is an XHTML and a PDF version of the document, then hreftype="application/pdf" will only accept a PDF version.<a href="/" hreflang="fr">The French version of our home page</a>.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.
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:
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!
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>
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:
about attribute lets you give metadata about parts of the document, or even about other documents. {{examples}}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
<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
.A paragraph of text
Some more inline text