HTML5 I Tag Validity with Icons

How to use i tag with icons?

The <i> tag is used to signify that the text within should be italic. It doesn't make sense to use it in this context.

If you still want to keep it and not use something else like a div, the problem is that the <i> tag is an inline element, not a block element like a div. Add display: inline-block; to your CSS and it will work.

What is the proper use case for html i element?

It should be used to make text styled italic. Most semantic uses for italic text are <em>, as it is supported by screen-readers for emphasis.

<i> and <b> are slowly going out of fashion in favour of using CSS to style text, and preserving <em> and <strong> for accessibility reasons.

I guess that it was selected for icons since it is the closest element and makes alphabetic sense (i.e. i = icon).

What are valid HTML5 custom tags?

TL;DR: There are no valid custom HTML5 tags.

---

I think you may be referring to this Custom Element Working Draft proposed by the Web Applications Working Group, which describes this:

The custom element type identifies a custom
element interface and is a sequence of
characters that must match the NCName
production, must contain a U+002D HYPHEN-MINUS
character, and must not contain any uppercase
ASCII letters. The custom element type must not
be one of the following values:

• annotation-xml
• color-profile
• font-face
• font-face-src
• font-face-uri
• font-face-format
• font-face-name
• missing-glyph

Additionally, according to HTML5 specification, HTML tag names can only start with ASCII letters. If we assume that the Custom Element proposal does not propose any changes to the HTML Syntax specification, then elements starting with hyphens-minus character is not a valid HTML tag name. If we combine what the Custom Element Working Draft proposal and the HTML5 Syntax specification says, then we can conclude that <-custom> is not a well-formed HTML and so cannot be a valid Custom Element because the tag name does not start with ASCII letter. On the other hand, custom- is both a well-formed HTML and a valid Custom Element.

Note that Custom Element is a Working Draft, not a W3C Recommendation. This means that Custom Elements is not valid in HTML5. Don't get your hopes up either, a lot of Working Drafts that are proposed in W3C never got anywhere (and for good reasons too, not all of the proposals are good).

<rant>Personally I hope that this proposal got shot down. I spent some time reading this proposal, it looks like this proposal tried to reinvent XML Namespace and SGML poorly, and probably forgot about what HTML and the semantic web is supposed to be. In any case, HTML5 syntax already allows authors to use elements that aren't specified in HTML5 specification, I don't see any need to standardize how to create custom elements any further than that. I hope that there would be people in HTML5 working group sane enough to realize how bad this proposal is and vote this proposal off. Keep HTML5 closed from author-defined custom modifications.</rant>

If you want to define your own custom vocabularies, I suggest you should write an XML application with XHTML5, which actually specifies how you can define your own custom elements with XML namespaces. Unlike HTML, XML is designed to be extensible.

---

As for your question about custom data attribute, this is what the HTML5 specification says:

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.

So with your examples, these are valid data-* attributes:

• data-my-attribute

while these are not:

• my-attribute

As far as I can tell, the Custom Elements Working Draft does not specify any additional syntactical requirement for custom attributes on Custom Elements, nor does it explicitly permit using arbitrary non-data-* attributes and how custom attributes interacts with existing HTML attributes, although we can reasonably infer that allowing custom attributes is probably the intent of the proposal.

---

As for your question about CSS, yes you understood correctly, those are valid CSS selectors to target those Custom Elements. CSS can be used to style any elements, not just elements defined by HTML, but also other markup languages like SVG, MathML, as well as arbitrary XML vocabularies when using XHTML. The CSS Selectors specification does not actually depend on HTML vocabulary in any substantial way (although HTML is used heavily in the examples, as it's what most people are most familiar with). It is for this reason that CSS Selector syntax can be used to refer to any elements in the document, including custom elements that aren't specified in the HTML specification. Styling custom tag already works in all major browsers today. You can use any arbitrary tag names, and select them with the selector that you expect, and CSS will style them as you would expect them to be. There is no requirement for having hyphen-minus in the tag name for this to work.

Should I use i tag for icons instead of span?

Why are they using <i> tag to display icons ?

Because it is:

• Short
• i stands for icon (although not in HTML)

Is it not a bad practice ?

Awful practice. It is a triumph of performance over semantics.

What else html tag can I use for Icon?

Well for starters <i> wouldn't really be appropriate for an icon as i denotes alternative voice or mood. This may depend on where and how the icon is being used, however.

<span> would be more appropriate if the icon is font-based.

<img> would be more appropriate if the icon is image-based.

Sounds like your issue may be to do with pre-existing CSS rules surrounding i and span tags. You can simply overwrite them:

span {
    margin:0;
    padding:0;
    background:transparent;
    border:none;
    /* etc... */
}

Edit from comments:

To prevent the CMS removing the empty span tag, simply give it some content:

<span class="icon"> </span>

This   shouldn't exceed the height or width of your icon, so wouldn't affect the styling.

---

Related Topics