Can you define your own self-closing tag in HTML5?

Question

I have read this topic, but I still have doubts. Is there any way to define void tag?

I tried this:

<icon class="home"/> (know that slash isn't obligatory)

But, if there is any text content after this tag FF closes them.

<icon class="home"/> Go home

Makes

<icon class="home">Go home</icon>

Should I define somewhere that tag is void-element? Or is it impossible to do with HTML5?

Answer 1

This is currently not an answer because it does not fully address the question, but it did not fit into the comment section.

The / in /> is ignored by the browsers if parsed to the html5 specs (except foreign elements of MathLM and SVG, because for the elements of this modules their specs has self enclosing element, so there it needs to stay valid)

Relevant parts of the specs:

• W3C - HMTL5 - Elements
• W3C - HMTL5 - Start tags

(The relevant part how browsers should handle missing tags and that they ignore / is missing, i need to look this up)

If the element is a void element no closing tag is generated, because it does not require one.

For the other elements the closing tag is created if it is missing. So if you write something like this:

<div>
    <div/>test
</div>

It will result in

<div>
    <div>test</div>
</div>

Because the / is ignored.

Custom elements are non-void by default. I know there is a draft for Custom Elements but honestly i don't know if it is already supported in some browsers. But even if it is, you will have the problem of backward compatibility. So i would not recommend to use it.

Even so defining a tag name not prefixed with an x- is a bad idea because if later an element is added by the specs with the name you choose and if that has another meaning you will have a problem.

As soon as i have time to look up the specs i'll provide the corresponding missing parts to proof this.