2

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 :)

a10s
  • 970
  • 1
  • 9
  • 15
  • 2
    where on twitter are you talking about? i don't see it... could you post a snippet of the source? – Kip Oct 30 '09 at 20:31

6 Answers6

8

That's the regular italics tag, but without any contents; i.e. it's semantically equivalent to <i></i>.†

In XML, empty elements are written with an extra slash at the end. XHTML is valid XML. So <i/> is fine. For a more common example, think of e.g. <br />.

To see for yourself that <i/> is a valid XHTML tag, check the XML EmptyElemTag definition or pass the following to the W3C validator:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title></title>
  </head>
  <body>
    <p><i/></p> <!-- look here -->
  </body>
</html>

  † As Toji correctly points out, the syntactic difference is relevant under certain circumstances. Though browsers may not treat <i/> any different from <i></i>, other XML parsers could!

Community
  • 1
  • 1
Stephan202
  • 59,965
  • 13
  • 127
  • 133
  • 2
    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 () and elements with 0 length content (), 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 Oct 30 '09 at 21:00
  • @Toji: you are very right to point out the distinction between syntactic and semantic equivalence. I'll update the answer to reflect this. – Stephan202 Oct 30 '09 at 21:05
  • 1
    Actually, there's nothing in the XML spec that says these two constructs are different: and . In fact, in the Annotated XML Spec (http://www.xml.com/axml/testaxml.htm), Tim Bray says, "So, is this: really exactly the same as ? 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 Oct 30 '09 at 21:16
  • @Ned: so as far as the XML standard is concerned, `` and `` *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 `` and ``; I'm just interested to learn how strict the XML spec is in this respect.) – Stephan202 Oct 30 '09 at 21:30
  • @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 Oct 30 '09 at 21:52
  • 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 Oct 30 '09 at 22:08
  • 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 Oct 31 '09 at 00:23
  • In reality of course the reason not to use `` is support in legacy-HTML, where there is no self-closing tag syntax. – bobince Oct 31 '09 at 00:25
  • @bobince - your last comment about legacy browsers might be an issue for some people, but Twitter are past the point where they need to care about IE6. In any case, if they wrap it properly (as per the example in this answer), even older browsers would deal with it reasonably well. – Spudley Apr 19 '12 at 18:17
  • @Spudley: by legacy-HTML what I was saying there is non-XHTML markup. Which is far from dead—indeed, it is likely to be the dominant form of markup on the web for the foreseeable future, and it's what Twitter are using today. If you did use `` in non-XHTML markup, it would not be recognised as a closed element, and all the following text would be italicised. Twitter themselves actually seem to be using `...` at the moment. – bobince Apr 20 '12 at 14:16
7

That's the italics tag.

David
  • 34,223
  • 3
  • 62
  • 80
  • 2
    I think the question is how is it legal as a contentless tag - it looks like it's not italicizing any text. – nobody Oct 30 '09 at 20:30
2

using i instead of span can save some bytes

mescoda
  • 21
  • 2
  • +1, but don't take this as a recommendation to go and do likewise. When your bandwidth is as big as Twitter's, shaving a few bytes of each pageload makes a big difference, so this kind of trick makes sense, but the rest of us should stick to writing our HTML code with conventional semantics. – Spudley Apr 19 '12 at 18:20
2

Nope, they didn't make it up.

Donut
  • 110,061
  • 20
  • 134
  • 146
2

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
  • 10,596
  • 5
  • 27
  • 26
0

They're probably using that to reduce HTTP payload, i.e. bandwidth cost.

G-Wiz
  • 7,370
  • 1
  • 36
  • 47
  • 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 Oct 30 '09 at 20:55
  • 2
    Compare to . 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. – G-Wiz Oct 30 '09 at 22:50