Twitter seems to be using an <i/> tag to display their icons from a css sprite. Did they just make up that tag, or is HTML I've never heard of?
Brilliant idea at any rate :)
views:
253answers:
5but it's a weird usage, to make it self-closing like that...
Kip
2009-10-30 20:29:20
I think the question is how is it legal as a contentless tag - it looks like it's not italicizing any text.
Andrew Medico
2009-10-30 20:30:28
No, it's not equivalent! In many cases they will be treated the same, so the are *functionally* equivalent most of the time. Any decent XML parser will allow you to detect the difference between empty elements (<tag/>) and elements with 0 length content (<tag></tag>), at which point the implementation may treat them differently. Simply because most don't does not indicate that they are the same. Sorry to rant a bit about a technicality, but the distinction should be made!
Toji
2009-10-30 21:00:32
@Toji: you are very right to point out the distinction between syntactic and semantic equivalence. I'll update the answer to reflect this.
Stephan202
2009-10-30 21:05:37
Actually, there's nothing in the XML spec that says these two constructs are different: <tag/> and <tag></tag>. In fact, in the Annotated XML Spec (http://www.xml.com/axml/testaxml.htm), Tim Bray says, "So, is this: <img src='madonna.gif'></img> really exactly the same as <img src='madonna.gif'/>? As far as XML is concerned, they are." If an XML parser lets you see the distinction, it's similar to it letting you know whether an attribute was enclosed in single-quotes vs. double-quotes. It isn't a distinction, it's trivia.
Ned Batchelder
2009-10-30 21:16:16
@Ned: so as far as the XML standard is concerned, `<x/>` and `<x></x>` *should not* be treated differently? Or is it in fact that they *must not* be treated differently, meaning that any parser which does is in violation of the standard? (Of course, I agree that it is silly to ascribe different semantics to `<x/>` and `<x></x>`; I'm just interested to learn how strict the XML spec is in this respect.)
Stephan202
2009-10-30 21:30:18
@Stephan202. The relevant passage (from section 3.1 of the XML spec) doesn't talk in those terms. What it says is "[Definition: An element with no content is said to be empty.] The representation of an empty element is either a start-tag immediately followed by an end-tag, or an empty-element tag. ... Empty-element tags may be used for any element which has no content, whether or not it is declared using the keyword EMPTY"
Alohci
2009-10-30 21:52:59
The assumption is then that they are identical. Although a processor could treat them differently, such a processor would not, in the strictest sense, be an XML processor.
Alohci
2009-10-30 22:08:56
There is no infoset difference between an empty tag pair and a self-closing tag and no standard XML API allows you to detect the difference. (SAX, for example, sends a separate startElement and endElement pair in both cases.) Whilst an XML parser *could* provide access to this information as an optional extra feature, I don't know of one that does.
bobince
2009-10-31 00:23:25
In reality of course the reason not to use `<i/>` is support in legacy-HTML, where there is no self-closing tag syntax.
bobince
2009-10-31 00:25:17
A:
They're probably using that to reduce HTTP payload, i.e. bandwidth cost.
gWiz
2009-10-30 20:44:39
If by bandwidth cost you mean reducing the performance penalty of many http requests on the client side. The cost of bandwidth wouldn't be reduced much even if it mattered to a site like that.
jsoverson
2009-10-30 20:55:20
Compare <span class="some-sprite"></span> to <i/>. Say this technique is used twice per page. That's a savings of 58 bytes per page view. Twitter is receiving about 1.5 billion pages views per month. That's a bandwidth savings of 81GB per month. Now that alone doesn't amount to much for twitter, but similar optimizations across the board can add up to significant cost savings. But I'm open to your speculation of the rationale.
gWiz
2009-10-30 22:50:23
+2
A:
I have seen people use empty style-oriented elements (e.g. <i/>, <b/>) as hooks for extra styling for UI widgets that are reused throughout a site. OOCSS does this. For example, the basic module's structure is defined as
<div class="mod">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="bd">
<p>Lorem ipsum.</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
Then depending on your CSS (and the context where you use the module), those empty <b /> elements may receive styling to add e.g. border images, or they might receive no styling at all and have no impact on the page.
I couldn't find the tags you are referring to so I don't know if this is what Twitter is doing, but it is an interesting use of these tags regardless.
Annabelle
2009-10-30 20:51:09