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