Question

If I create an HTML element:

sc {
    font-variant: small-caps;
}

and apply it like this:

I want to display <sc>this text</sc> in small-caps.

it works as expected (except in IE, of course.) It becomes shorthand for

.sc {
    font-variant: small-caps;
}

I want to display <span class='sc'>this text</span> in small-caps.

Is this intended/documented behavior? Is there a name for it?

Answer 1

XHTML (and XML on which it is based) is designed to let you add custom elements in a similar fashion, but instead using a custom XML namespace with your element names. Then you can either use CSS to style those elements directly, or use XSLT to transform them into real HTML elements. This is why (or at least one reason why) standards-compliant browsers are OK handling otherwise non-standard elements in the DOM.

In HTML 4 and older, it’s always invalid to sprinkle your own non-standard elements on (not sure about HTML5’s extensibility).

Either way, however, IE doesn’t automatically know about the custom elements in the DOM, so you need to use document.createElement() to create them before the DOM finishes loading.