Can I Use Custom Tag Names, Without Using Web Components, Just For Styling?

To my suprise, modern browser seem to not complain if I use custom tag names, and then style those tags as if it where normal html tags, they behave like span elements, and like di

Solution 1:

Please note: prompted by a user comment to return to this a couple years later, I want to point out that this is outdated; if the question were posted today I'd give a very different answer. People are generally a lot less freaked out by the idea of custom elements here in the brave new year of 2018. Original 2016 answer follows:

You absolutely can do this. It will work. Custom elements are part of the HTML5 spec; explicit support for unregistered custom elements is included (see section 7). They're supported in all modern browsers (by default they are treated as inline elements, just like <span>), there's first-class support for them in Angular.js for example. Functionally speaking there is no difference at all between <foo> and <span class="foo">.

So should you? I break it down like this:

Reasons not to use custom elements

• Some older browsers (IE8 and prior) will only support them if you use a javascript shim (at least document.createElement('foo').)
• HTML validators (or some HTML editors that attempt to validate your code) may choke on those tags or interpret them as errors. This ranges from non-issue to total deal-breaker, depending on your workflow.
• Future compatibility. Depending on the tag names you choose, there is a nonzero chance that any custom tag name you invent will, at some point in the future, become blessed as a "real" html tag which carries specific behavior that you weren't expecting. Update in 2018: the current convention is to include a hyphen in the name of all custom elements, which removes this risk; future HTML, SVG and MathML elements will never contain hyphens in their name.
• You'll have to spend a lot of time explaining to aghast developers and maintainers that no, it's fine, it really does work, no it's not XML, yes it will work with screenreaders, yes it does look weird but it's totally ok honest look there is right in the spec
• There's generally no particular reason to do so, because <span class="foo"> does the same thing as <foo> without the tsuris

Reasons to use custom elements

• Because you can

On balance, I don't feel it's worth it.