Inline XML

by Lachlan Cannon

24 Reader Comments

Back to the Article
  1. test

    Copy & paste the code below to embed this comment.
  2. Heads up. The NYPL style guide referenced in the story is actually http://www.nypl.org/styleguide/xhtml/guidelines.html instead of http://www.nypl.org/styleguide/XHTML/guidelines.html. Apparently the caps make a difference. Great article by the way.

    Copy & paste the code below to embed this comment.
  3. Any way you could toss in the referenced code marked up as specified by the author? Would be nice to be able to see how it looks in different browsers without having to recreate the snippet on my own.

    Copy & paste the code below to embed this comment.
  4. Yeah, let’s see the example rendered in the article.

    Copy & paste the code below to embed this comment.
  5. Interesting article, but you make one point I’m not sure I understand:

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

    Burying semantic meaning inside our class attribute? You lost me there. A class attribute is just a name, it might as well be a gid or other code. It doesn’t have to have semantic meaning at all, but what it SHOULD do is tell you what kind of <foo> our <foo> is. Seems to me that that’s the whole point, isn’t it?

    I guess what I don’t understand is why it’s a problem, or something to be avoided. <var class=“global”> and <var class=“lexical”> seem to me like useful applications of the class attribute.

    Or are you saying you want to be able to set a “type” on a tag without attaching it to a presentation rule in a stylesheet? <var type=“global” class=“wicked-important”>?

    (hope the parser escapes the pseudo-tags in this post; if not, I’ll repost without them.)

    Copy & paste the code below to embed this comment.
  6. What Lachlan meant was that the class attribute is often used on the generic span tag to denote some level of information. For example <span class=“author”>Lachlan</span> would denote the author to someone reading the code. “Author” is not a type of span, span being a generic container for styling.
    http://www.w3.org/TR/html4/struct/global.html#h-7.5.4

    Copy & paste the code below to embed this comment.
  7. Mad City Man, the URL you provided to the HTML spec seems to back up the point that Steve brought up. According to the spec, the class attribute is appropriate “to achieve the desired structural and presentational effects” … “since HTML does not include elements that identify objects such as “client”, “telephone number”, “email address”, etc.”

    I’d say that the class attribute should definitely be used to embed semantic distinctions—that’s what it’s there for.

    Lachlan wrote: “Marking content up by what it means, and letting anything that browses the document, human or machine know what that meaning is.”

    Well… not exactly. If you just make up new dialects all the time, like the one in this article, then humans or machines can’t just automagically know what the markup “means”. For anything to be meaningful, there has to be some agreement beforehand. So, embedding terms from the Dublin Core might be useful, but the markup used in this article is no more useful—but precisely as “meaningful”—as using DIVs and SPANs with class attributes.

    (Except that the inline XML method won’t have the desired results in some major browsers. Reality is such a pain.)

    Copy & paste the code below to embed this comment.
  8. Ok, I’m not getting one bit of this article and I’m assuming it is because I am missing a basic understanding of XML. I do get XHTML and CSS, but never managed to figure out the purpose or use of XML (but I do see the power in it). I’m assuming I’m missing some basic general understanding, so could someone show me a site/tutorial, or maybe even help a newby out and explain this for me?

    Copy & paste the code below to embed this comment.
  9. without a reasonable example. I’ve done custom tags by namespaces but many who will read the article have not. They will need to see results. The author has come up with an excellent reason to apply this technique, so follow-thru can be esp. helpful here.

    Mozilla devotees may point out that browser as capable of styling custom tags directly. This is easier and more intuitive but the namespace route is better in the long run for the reasons the author gave.

    Pretty slick!

    Copy & paste the code below to embed this comment.
  10. I have now posted the example used in this article on my site at http://illuminosity.net/writing/articles/inlinexml/colon-escape.html for people to see in its full “glory”. With regards to the class versus namespaces issue, classes are no doubt the solution to be used for now, for reasons of browser support etc, however namespaces allow easier styling and parsing of the extra elements once they are well supported. for example to give the style class the equivalent of the php type attribute I use one would would have to create variants within the class, such as class “script php”. Once you start wanting a few different attributes this method becomes very messy to understand, and harder to parse if you want to draw specific things out of your example. If, for example, you wanted to collect all scripts on your site, it’s much easier to look through for elements <s:script>, than for <div class=“script”>. there are other reasons to get to know namespaces too, such as combining existant xml languages together, such as svg with xhtml, or mathml with svg.

    This article, rather than trying to trigger a holy war about the best methods to use was instead meant to be a simple introduction to how to use namespaces within xml documents.

    Copy & paste the code below to embed this comment.
  11. Hopefully those readers who were initially unhappy can now focus on the article’s subject. :)

    Copy & paste the code below to embed this comment.
  12. I was surprised but the example didn’t work in Mozilla (1.2b) for me. The CSS color coding was missing. Also the DOCTYPE declaration should be removed as it doesn’t conform to XHTML 1.1. And lastly, the document should have been served with text/xml, application/xml, application/xhtml+xml, not text/html.

    Copy & paste the code below to embed this comment.
  13. *And lastly, the document should have been served with text/xml, application/xml, or application/xhtml+xml, not text/html.

    Copy & paste the code below to embed this comment.
  14. I agree with Lach’s last point about namespaced elements being more appropriate vehicles for semantic meaning than class attributes; and the article highlights (X)HTML’s shotgun approach to semantic markup.

    I’ve done several academic publishing projects in HTML and been infuriated by the hit-and-miss approach of the default semantic elements: (X)HTML has <var>, <kbd>, <code> and <samp> so obviously someone went overboard on programming semantics, but there’s not a single element to mark up an author’s name or the title of a publication. There’s <cite> of course, but that’s only really appropriate when you’re actually citing a source. Hence I have to fill my markup with <em class=“author”> and <em class=“title”>. Obviously this isn’t an editorial playground, but it’s something that’s bugged me since day one ;)

    Also, I believe IE as of version 5 or so has allowed you to apply style to unknown tags, just as Mozilla has, so the browser should work with custom tags with or without proper namespacing.

    Copy & paste the code below to embed this comment.
  15. Go back to ‘class’.

    As others have pointed out, using the ‘class’ attribute to specify semantic details is not only just fine, but expected. Think of the ‘class’ attribute as more of a “subclass” attribute – in that it allows you to “subclass” a particular element and provide a more specific instance thereof. In the case of <span> and <div>, since they are the most generic of tags, subclassing them results in an element that is semantically richer, but not much (if any) richer than any other semantic specific element (like ) without a class attribute. <div class=“function”> is semantically close enough to <function> to be just fine for now (until 95% of folks are using browsers with sufficient native XML support (parsing, selectors, dom, schema etc.)).
    Until then, if you must use your own XML tags, consider transforming them server side to span/div tags with the appropriate class before sending them to the client.


    Would Namespaces by any other name smell so foul?

    Namespaces are bugly. They are perhaps the worst aesthetic corruption of markup to come out of W3C. Ick. They have enabled such ugliness as XLink, which has polluted the latest document formats (like SVG – explain to me again why SVG needed a different <a> element instead of simply reusing what was in XHTML?).


    Modern selectors

    The “\:” syntax was an experimental way to specify namespaces in CSS selectors that has since been abandoned. Go here:

    http://www.w3.org/TR/css3-selectors/#typenmsp

    For the right way to use selectors with namespaces (if you must).


    Tyler

    Copy & paste the code below to embed this comment.
  16. Tyler, if you read the comments which are posted here I did say that for now using classes is no doubt the better method. Hopefully sufficient browser support is not too far up the track, and by that time people will be ready to use namespaces.

    Secondly, I don’t think namespaces are ugly at all. The syntax works just right for how they should work, but if you have a problem with it, you should take it up on a W3C mailing list.

    Thirdly, not all languages could re-use xhtml semantics. Browsers can’t just assume that because an element has the same name it’ll mean the same thing, or xml would be pointless, you might as well just add tags to xhtml. Therefore, more generic technologies need to be developed for xml, to be able to apply for all xml languages if necessary.

    Lastly, thankyou for the updated selector link. Do you know how support for that compares with support for the droped “\:”?

    Copy & paste the code below to embed this comment.
  17. \: is a valid way to match elements “based on their fully qualified name”.

    See: http://www.w3.org/TR/css3-selectors/#downlevel

    Copy & paste the code below to embed this comment.
  18. Funny thing is that I was just finishing up a page of demo code for my new Web site. I’d been using classes to colour code them. Nice idea, but I like validating my docs plus I don’t think ditching Opera users is ok. Maybe Netscape/Internet Explorer 4 users, but not above that mark. In future I will use inline XML to colour code my work, but for now I’ll use what I know works.

    Thanks, short but sweet article. =)

    Copy & paste the code below to embed this comment.
  19. In the caveat it talks about how mix-name-spaced documents don’t validate against a DTD, unless there is a DTD specifically for that collection fo mix-name-spaces (e.g. XHTML+MathML and XHTML+SVG+MathML).

    I know that this is becuase DTD’s arent name space aware.
    My question is, if we ever get to the point of using some other validation technology/language (such as xml Schema or relax ng, etc (now please don’t start a flame war about xml schema. I’m only using it as an example of “some other form of validation” – I’ll just generically call them all SuperSchema), will we be able to validate a specific namespace from a mixed namespace document. For instance, say I have xhtml + mynamespace, could I validate it against the SuperSchema for “xhtml” and it will say “As fas as the xhtml in this document is concerned, it validates. The other namespace is up to you.” I could then validate it against a SuperSchema for mynames space. In other words I could validate my document against a SuperSchema for each langauge contained in the mix, and none of them would blow-up becuase of the other namespaces.

    Also – Thanks for this article. It is very helpful.

    Copy & paste the code below to embed this comment.
  20. Just a heads up. Peter Janes has helped to rework my example using the @namepsace selector method. It’s available at: http://illuminosity.net/writing/articles/inlinexml/at-namespace.html .

    Jeff, I would hope that this is where we are heading. One day I would like to be able to write up my document using mixed and matched vocabularies, tell my editor to validate, and it would validate against the main schema, saying that yes it’s fine for these documents from other vocabularies to be used at these points, and the fragments from all the different vocabularies validate against their own vocabulary schema. I’m not aware of whether or not there are any schema languages which can do this yet, but there are a few efforts going into producing different schemae, and hopefully they will gravitate towards working that way.

    Copy & paste the code below to embed this comment.
  21. what is the use of putting inlinefigure element in an XML document. once after putting the inlinefigure if i want to see the figure then what i have to do. please help me.

    Copy & paste the code below to embed this comment.
  22. what is the use of putting inlinefigure element in an XML document. once after putting the inlinefigure if i want to see the figure then what i have to do. please help me.

    Copy & paste the code below to embed this comment.
  23. as for color coding you can’t yet beat [removed]
    http://www.byteshift.de/tips/css/get-rid-of-h1-formatting
    (this demo is on a different subject, but uses JS for adding colors)

    Copy & paste the code below to embed this comment.
  24. What about browsers compatibility?

    Copy & paste the code below to embed this comment.