When should I use <tag>content</tag> tag style, when <tag attrs> and when <tag attrs />?

Question

I'm using HTML5.

I just a bit confused that some people said "html validator does not like <tag attrs /> tags style". It is obvious that if I need to place some content between opening and closing tag I should use <tag>content</tag> tag style. But if not, which one is right?

<tag attrs />
<tag attrs>

For example: what is the correct use of <br /> tag?

Answer 1

• Void elements (like br) MUST NOT have an end tag nor content, so they are empty (sometimes also called self-closing).
• Foreign elements (like svg) MAY be self-closing.
• No other elements may be self-closing.

(Note that you can omit the end/start tags of some elements, but that doesn’t make them self-closing, i.e., they can still have content.)

Now, when you have a void element (resp. a self-closing foreign element), does its start tag end with > or />? The HTML5 spec says about start tags in step 6:

Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single "/" (U+002F) character. This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

So for void elements, it’s up to you. You can use <br> or <br />, they are equivalent.

(For foreign elements, you should add the slash if you need to mark it as self-closing; this probably depends on their specification resp. your use case.)

In XHTML5 or (X)HTML5 polyglot documents, you MUST add the / for void elements.

Answer 2

tag, attrs and rel are not valid in HTML5. For adding data to elements you should now use data-. In terms of correct usage br you can use <br> without the ending slash as generally you do not need to use <img src="" alt==" /> <br /> etc in HTML5. I recommend you hop over to HTML5 Doctor as the answers on that site are pretty solid and will answer all these type of questions. Furthermore for coding related questions please use Stack Overflow.