Just noticed the `<i/>` tag on Twitter, did they make that up?

StackOverflow https://stackoverflow.com/questions/1652099

  •  22-07-2019
  •  | 
  •  

Question

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

Was it helpful?

Solution

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!

OTHER TIPS

That's the italics tag.

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.

using i instead of span can save some bytes

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top