About XHTML 2

Published on December 20th 2008.

XHTML 2 is currently being developed by the W3C, so here is what you need to know about the next generation of XHTML.

What is XHTML 2

XHTML 2 (Extensible Hypertext Markup Language 2) is still a work in progress and will be the successor of XHTML 1 (though we don't really know when yet). XHTML 2 introduces a set of useful elements who's objective is to add more structure and semantic meaning to a page. We now also have the ability to expand upon an element's usefulness via the role attribute, which describes the role an element plays on the page, as well as some new predefined classes.

Where do we stand

The chances are, you've heard at least someone bashing XHTM 2, saying it's going to die a slow and painful death, and HTML 5 will become the leading web mark-up language of the future. The reason people believe this is because Internet Explorer does not actually render XHTML as true XHTML. It parses it as text/html, instead of the correct application/xhtml+xml – see my previous article To be XHTML or to not be XHTML - that is the question?. Given IE has the biggest market share, this spells doom and gloom for the future of XHTML...or does it?

Let's face it, we'd all have to be very optimist to think that everyone is just going to stop using IE, because it's never going to happen. However, just because Microsoft are incredibly intolerant of web standards does not mean we should ditch our free will and back their chosen team. If we all dropped XHTML, just because Microsoft don't support it, we would be admitting defeat. Continue to back XHTML and youv'e got a winning formula. If more and more people become interested in, and show their support for XHTML, more browsers will decide to support it, and perhaps eventually IE will see the light, or at least build an engine than can support both XHTML and HTML, that would be cool!

Backwards Compatibility

Most of XHTML 2 already works in existiing browsers, but certain aspects, such as XForms and XML Events, as of yet, have no browser support, so a level of backwards compatibility has been retained.

Why you should like XHTML 2?

XHTML 2 has that clean, well-formed vibe (just like its predecessor XHTML 1) plus a stack of new semantic tags and attributes that I know I'm just dying to use! Lets take a look at a few of them.

The tags

Headings and sections – a.k.a., the h tag and the section tag

Did you ever feel that the current system of h1, h2, h3, etc was a bit outdated, or perhaps you wanted more flexibility? Well, clearly so did the people at the W3C. The new h tag along with its partner the section tag, allow you to split your headings and associated content into separate sections. This does away with the rather rigorous structure that is in place now, along with the slight ambiguity of – which header goes with which piece of content. It also makes the hierarchical relationship between content and headings much easier to follow, as seen in the example below:

        	<h>My heading</h>
            <p>And some interesting text.</p>
			<section>
            <h>My subheading</h>
            <p>...sitting nicely in a section...</p>
            </section>
 		

nl – a.k.a., the navigation list

The nl tag is intended to be used to define lists of selectable items, such as navigation and menus. Navigation lists must start with a label tag that defines the label for the list.

In the past the ul tag was used for navigation, but now we can make our navigation more semantic by using nl.

Example:

        	<nl>
            <label>My nav</label>
            <li><a href="http://www.google.com">Google</a></li>
			<li><a href=http://www.physorg.com">Physorg</a></li>
			<li><a href=http://www.wikipedia.org">Wikipedia</a></li>
			</nl>
        

Separator – a.k.a., the separator tag

Remember the hr tag, that inserted a horizontal rule into your content? This was supposed to be used to separate content, but people were getting ahead of themselves and using hrs all over the place (I know, the shame of it!).

Introducing the separator, which accomplishes what the hr always should have. The separator tag separates parts of the document from each other:

        	<p>This is some text.<p/>
        	<separator />
            <p>This text is separate – yay!</separator>
 		

di – a.k.a., the definition item (at least I'm pretty sure that's what it stands for)

The di is the new addition to the definition list (dl). Before, we only ever had one dt and one dd, but now XHTML 2 gives us the ability to have multiple definition titles and multiple definition descriptions, and we group these together using the di tag:

            <dl>
            <di>
            <dt>Tomb Raider</dt>
            <dt>TR</dt>
            <dd>an action adventure game.</dd>
            <dd>a game that was good before Crystal Dynamics came on board.</dt>
            </di>
            <di>
            <dt>tachyon</dt>
            <dd>a superluminous particle, posited to exist, that travels faster than the speed of light.</dd>
            <dd>something that was on Star Trek.</dd>
            </di>
            </dl>
		

l – a.k.a., the line tag

XHTML 2 does away with the line break (br) in favour of the l tag – otherwise known as the line tag. The l tag represents a line of text (e.g., a line of verse or a line of computer code).

The attributes

The role attribute

The role attribute is used to specify the function of en element: what exactly an element is, and the "role" it plays on the page. This is useful for search engines, providing them with more information about what specific elements do.

Example:

<nl role="footer">...</nl>

New usage for the hyperlink

in XHTML 2, any element can be an hyperlink. You are no longer limited to the anchor tag.

Example:

<h href="http://www.michaelmcintyre.co.uk/>Michael Mcintrye is awesome!</h>

Despite being able to use href everywhere, the anchor tag is still present in the XHTML 2 specification, to allow for the use of explicit links.

Any element can be an image

We wave goodbye to the img tag in XHTM 2, as the W3C have decided that we need a mechanism in place if an image that is being loaded, doesn't, for whatever reason, exist. Now, using XHTML 2, we have the ability to associate an image with an element, and if that image does not exist, that element will take its place. Firefox, and some other browsers, already do something similar with the alt tag text on an image, but it isn't a universal practice.

Example:

			<p src="someimage.jpg">This text will be displayed if our image doesn't exist.</p>         
        

References

XHTML 2.0 at the W3C

Got any questions or comments? Feel free to mail me @ helen@alternategateways.com.

Share this:

Back to resources.