Inline XML

Get the WebProNews Newsletter:
[ Business]

I was sitting at my desk a few days ago, whiling away the time and I suddenly wondered why HTML includes a < code > tag, and a < var > tag, and yet it takes marking up code no further than that. It’d be understandable to have just the < code > tag, but if they’re going to have a < var > tag, shouldn’t they have more programming tags?

The eventual product of this line of thought was that the W3C was too busy to produce a proper code markup inside the HTML specification, since the specification has to include so much else. So if they’re not going to add a proper code markup language, then how would we mark up our script examples? “Aha!” I thought to myself. “The perfect chance to use XML.”

Why would we use XML here? The main reason that I initially wanted to be able to mark up my example scripts was so that I could color-code their components for easy reading. There are three paths we could take in order to do that.

We could take the path that sites such as Zend.com have taken and mark it up with s, but having ditched fonts way back on the highway, do we want to waste fuel and progress going back to get ‘em? Nah.

Alternatively, we could use s and classes to mark up all the code. However, this approach is almost as bad as the one. Yes, we’re using CSS instead of embedding presentation inside the structure, but we’re also burying semantic meaning inside our class attribute.

The only other way of marking up this content is with the use of inline XML. By taking this approach, we’re:

  • Marking content up by what it means, and letting anything that browses the document, human or machine know what that meaning is.
  • Not cluttering our code up with unneeded characters ( is both more concise than and more meaningful and concise than ).
  • Allowing ourselves to expand a tag if we want to, via attributes (eg ).


Which brings us to the point of this article – how to use multiple XML languages together in a single document by using namespaces. Let’s say that I wanted to mark up a fragment of code I was explaining like so:

Obviously we can’t do it just like that – if any of our script tags have the same name as our HTML tags then how will we be able to tell the difference between them?

The answer lies with XML namespaces. Do you remember the xmlns="http://www.w3.org/1999/xhtml" line you’ve had to add to your HTML tag? That’s an XML namespace, which has been used to identify that you’re writing your markup using the language whose unique corresponding url is http://www.w3.org/1999/xhtml. If you don’t know what I’m talking about, the NYPL style guide will enlighten you.

Side note: The xmlns="http://www.w3.org/1999/xhtml" identifies the XHTML namespace as the default namespace for all tags which don’t declare one of their own.

The reason that you have to add this line to your HTML tag is so that you can now include different languages within your document, such as an XML-based “script markup language,” without having tag names clash with each other. To add another language to your document you have to add extra namespaces to your HTML tag (note that you can add it to any element which is an ancestor of the tags which use that namespace, but it’s easiest to put them all on the HTML tag). To do this we first have to decide on a unique prefix for these tags – let’s use “s” for ours. The next thing we need is a unique namespace – a url which doesn’t have to point to anything. Let’s use http://www.alistapart.com/stories/inlinexml/. Now, to add our new namespace to the document we add the code xmlns:s="http://www.alistapart.com/stories/inlinexml/” next to our other namespace in the HTML tag.

Putting them to work

Now we have the namespace declared in the document tag. The next thing we need to do is prefix all the XML tags in our document with their unique prefix followed by a colon. The previous example now becomes:

function layEgg ($size, $color) {
     //No eggs of negative size
     if($egg <= 0) {
         return false;

Now that we’ve done this we can manipulate our XML to display in various colors, by using the usual selectors. Note that the colon in the name must be escaped with a backslash, so that it isn’t confused with a pseudo-class (such as :link). An example styling of our code could be as follows:

Unfortunately, styling these elements doesn’t work in even some very recent browsers such as Opera 6/Win. The good thing is of course that all browsers will ignore unknown tags and just display the text within them, so as long as you don’t need to format anything as a block element, or otherwise out of the normal flow, your XML should degrade perfectly.


There is a downside to everything, and the downside to including other XML languages in your XHTML documents is that they will no longer pass validation. This points more to a problem with validator services and DTDs than it does with including other XML languages inside your XHTML. The W3C, being aware of the problem, have issued a few DTDs which allow you to combine several different XML languages together in one document, such as XHTML+MathML and XHTML+SVG+MathML. Presumably the authors of other XML languages which could benefit from being included in XHTML will follow suit with their own similar DTDs. In the meantime, authors can still use the validator to check that their HTML is written correctly, ignoring errors about the elements from other namespaces they have included. The other path adventurous authors can take is attempting to create their own XHTML variant using the modularisation of XHTML, although proper XML validators rather than the HTML validator need to be used to validate these documents.

Wrapping up

So now you’ve seen how to declare an XML namespace, and how to label its elements within your documents as well as how to style them. You could also use JavaScript to manipulate the tags if you wanted to, of course. As for other applications? You’re limited only by your imagination (and browsers). Why not make and use an inline recipe markup language, or book markup language? What about a shopping cart markup language? There are no limits!

Extra reading


Article originally appeared at AListApart (http://www.alistapart.com/stories/inlinexml/).

Lachlan Cannon is an aspiring programmer as well as an admin and occasional content-writer at evolt.org. His personal site (http://illuminosity.net/)uses the W3C XHTML+MathML Doctype.

Inline XML
Comments Off
About Lachlan Cannon
Lachlan Cannon is an aspiring programmer as well as an admin and occasional content-writer at evolt.org. His personal site (http://illuminosity.net/)uses the W3C XHTML+MathML Doctype. WebProNews Writer
Top Rated White Papers and Resources

Comments are closed.