Main Page Content
Extending Headings With Xml
Headings as they stand today
The headings <h1> through <h6>
It would have been much nicer if from the start the header tags had
been defined something along the lines of the following, from day one:<h1 text="top heading"> <h2 text="lower heading"> <p>random content</p> </h2> <p>text unassociated with the h2</p></h1>
A refinement of headings
Obviously though, this is not the case. This doesn't mean that
we're not able to associate headers with their content, however, just that we have to do it ourselves. This is where the extensibility of XML can help you if you're using XHTML.Because of the namespacing abilities of XML we can mix in our
own custom markup with our XHTML. We can use this to produce a fully degradable (HTML browsers are supposed to ignore unknown elements) container element to associate our headings with their content.First of all we need to declare the namespace for our heading
extensions. For the purposes of this exercise let's use the URLhttp://members.evolt.org/luminosity/xml/header/. Now, to incorporate our extended elements we change our base tag from
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">, to <html xmlns="http://www.w3.org/1999/xhtml" xmlns:header="http://members.evolt.org/luminosity/xml/header/" xml:lang="en">.Now whenever we run across a header we can associate it with
its content using our custom designed tags. Every time you see a header, put a<header:hn> before the header, and a </header:hn> after the last of its associated content. For example, if we start off with the following code sample:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>The supermarket fiasco</title> </head> <body> <h1>The supermarket fiasco</h1> <h2>The beginning</h2> <p>In the beginning was the supermarket. The supermarket dished out your typical bland supermarket food.</p> … <h2>The end</h2> <p>And so the public cheered, as the last supermarket burnt, and their taste buds were once again put to use.</p> </body></html>
We replace it with this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:header="http://members.evolt.org/luminosity/xml/header/" xml:lang="en"> <head> <title>The supermarket fiasco</title> </head> <body> <header:h1> <h1>The supermarket fiasco</h1> <header:h2> <h2>The beginning</h2> <p>In the beginning was the supermarket. The supermarket dished out your typical bland supermarket food.</p> … </header:h2> <header:h2> <h2>The end</h2> <p>And so the public cheered, as the last supermarket burnt, and their taste buds were once again put to use.</p> </header:h2> </header:h1> </body></html>
The optional extras
So how does this help us? Well it satisifies those
of us who wish that header had been a container element for its content all along. You can regard the h1 inside our h1 the same as the legend inside a fieldset tag, if you're not happy with having the same data seemingly defined twice. You can also set the text of the original h1 to be an attribute for your new h1 if you want. Use something like:<header:h1 header:text="The supermarket fiasco">. In the future, when browser support is good enough you could then eliminate the original hn tags and use the before pseduo-class with generated content to print out the header (header:hn:before {content: attr(header:text);}), although I would recommend against this, because your new element won't have semantic meaning to browsers, whereas the old hn tags do.We can of course use the new tags to style all content
based on their level of heading — in fact this would be the only practical usage that I can imagine at this time. Something along the lines of:header:h1 { background-color: blue;}header:h2 {
background-color: light blue;}And of course, you can further extend the new headers
with your own attributes, and you could then use them with some nifty JavaScript or what have you.Also, you're not limited to extending header elements.
You can also use your own namespaces to create documents that use your own tags to fill in for other elements that you need, or want, that HTML doesn't provide yet.