Main Page Content
Extending headings with XML
Rated 3.7 (Ratings: 10) (Add your rating)
Log in to add a comment
(8 comments so far)
Want more?
- More articles in Code
- More articles by luminosity
Lachlan Cannon
User since: October 13, 2001
Last login: October 13, 2001
Articles written: 5
Headings as they stand today
The headings <h1> through <h6>
are very basic ways of representing headings within a document.
Although the method stands up well enough to mark up basic
documents, it doesn't stand up to everything we can throw at it.
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 URL
http://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.
