What should I do with custom elements?

Question

In theory, I could use anything, anywhere and style a <table> into a <ul>. Or style an <imsocool> blue.

<style>
imsocool {
    color: blue;
}
<imsocool>HELLO</imsocool>

Sometimes the validator complains (not like I care - it complains about "parse error" when validating calc()s in css), but the browsers never do. The only problem I guess, is that browsers, screen readers, search engines, and everything else don't have any idea what <imsocool>s are. Unknown tags don't have are, well, unknown. So when is this ok?

Is it ok to make special widgets like this (with JS, of course)?

<calendar>
    <ctrlgroup>
        <ctrl class="left">&lt;-</ctrl>
        <ctrl class="left">-&gt;</ctrl>
    </ctrlgroup>
    <week>
        <day>1</day><day>2</day><day>3</day><!-- Etc. -->
    </week>
</calendar>

Do I need to use dashes? (as the spec says - it's supposed to prevent conflicts with future elements)

<calendar-widget>
    <ctrl-group>
        <cal-ctrl class="left">&lt;-</cal-ctrl>
        <cal-ctrl class="left">-&gt;</cal-ctrl>
    </ctrl-group>
    <calendar-week>
        <calendar-day>1</calendar-day><calendar-day>2</calendar-day><calendar-day>3</calendar-day><!-- Etc. -->
    </calendar-week>
</calendar-widget>

Or should I not use it at all?

<div class="calendar">
    <div class="controls">
        <div class="left">&lt;-</div>
        <div class="left">-&gt;</div>
    </div>
    <div class="week">
        <span class="day">1</span><span class="day">2</span><span class="day">3</span><!-- Etc. -->
    </div>
</div>

Ignoring browser support, what are the pros and cons of using unknown HTML elements? When is it appropriate?

What I can think of:

• If no element in the spec fits the job good enough, there isn't going to be any semantic meaning lost - <div> doesn't mean any more than <imsocool>.
• Classes are annoying.
• It's a good idea to use the correct elements, if they exist (like use <em> for emphasis, not <big-and-red>)
• Don't abuse existing elements. You shouldn't style a <table> into a <ul> - it'll confuse the robots (browser, accessibility software, google). So don't abuse possible future elements which might conflict?

Answer 1

As with any deviation from a standard in the world of code, any non-standard way of doing things will yield undefined behavior because not every agent will agree on handling the situation the same way.

So, to answer your question, this is only okay if you are okay with having unexpected behavior from the browsers, etc. This means that not everyone that encounters your HTML will have the same experience. That is what following the HTML/CSS standards guarantees.

The examples you have provided actually seem to resemble XML, which gives you more freedom in terms of tag names. You could easily create XML documents with style sheets if that is more suitable for your preferences:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="mytest2.css"?>
<people>
    <person>
        <name status="real">Deron Eriksson</name>
        <birthdate>January 22, 1972</birthdate>
        <eyes>blue</eyes>
    </person>
    <person>
        <name status="imaginary">Bob Smith</name>
        <birthdate>December 25, 1989</birthdate>
        <eyes>brown</eyes>
    </person>
</people>

Also, there is a standard being developed for custom HTML tags.

Answer 2

There is really no advantage to using custom tags. The only advantage is that it could increase readability, but classes are readable enough.

Here is another stackoverflow question that is similar: Is there a way to create your own html tag in HTML5?