What Are The Allowed Ways to Close Self-Closing Tags for Void Elements Such as in HTML5

What are the allowed ways to close self-closing tags for void elements such as in HTML5?

From the W3C specification for HTML:

The following is a complete list of the void elements in HTML:
- area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
Void elements only have a start tag; end tags must not be specified for void elements.
Start tags consist of the following parts, in exactly the following order:
- A < character.
- The element’s tag name.
- Optionally, one or more attributes, each of which must be preceded by one or more space characters.
- Optionally, one or more space characters.
- Optionally, a / character, which may be present only if the element is a void element.
- A > character.

From this it seems that we can use either   or  . However, the end tag  is not valid, so don't use  .

Running the following through the HTML Validation Service indicates as much.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Testing void elements</title>
</head>
<body>
    some lines of txt <br>
    and then some more <br />
    I'm not done yet... <br> </br> <!-- This line generates an error -->
</body>
</html>

So use either   or  , just make sure you use them consistently.

Edit: As noted by Brad,   is also valid XHTML, so perhaps it is best to choose this form.

HTML 5: Is it , , or ?

Simply   is sufficient.

The other forms are there for compatibility with XHTML; to make it possible to write the same code as XHTML, and have it also work as HTML. Some systems that generate HTML may be based on XML generators, and thus do not have the ability to output just a bare   tag; if you're using such a system, it's fine to use  , it's just not necessary if you don't need to do it.

Very few people actually use XHTML, however. You need to serve your content as application/xhtml+xml for it to be interpreted as XHTML, and that will not work in old versions of IE - it will also mean that any small error you make will prevent your page from being displayed in browsers that do support XHTML. So, most of what looks like XHTML on the web is actually being served, and interpreted, as HTML. See Serving XHTML as text/html Considered Harmful for some more information.

Are (non-void) self-closing tags valid in HTML5?

(Theoretically) in HTML 4, <foo / (yes, with no > at all) means <foo> (which leads to   meaning  > (i.e.  >) and <title/hello/ meaning <title>hello</title>). I use the term "theoretically" because this is an SGML rule that browsers did a very poor job of supporting. There was so little support (I only ever saw it work in emacs-w3m) that the spec advises authors to avoid the syntax.
In XHTML, <foo /> means <foo></foo>. This is an XML rule that applies to all XML documents. That said, XHTML is often served as text/html which (historically at least) gets processed by browsers using a different parser than documents served as application/xhtml+xml. The W3C provides compatibility guidelines to follow for XHTML as text/html. (Essentially: Only use self-closing tag syntax when the element is defined as EMPTY (and the end tag was forbidden in the HTML spec)).
In HTML5, the meaning of <foo /> depends on the type of element:
- On HTML elements that are designated as void elements (essentially "An element that existed before HTML5 and which was forbidden to have any content"), end tags are simply forbidden. The slash at the end of the start tag is allowed, but has no meaning. It is just syntactic sugar for people (and syntax highlighters) that are addicted to XML.
- On other HTML elements, the slash is an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This will usually end up with a missing end tag causing subsequent elements to be children instead of siblings.
- Foreign elements (imported from XML applications such as SVG) treat it as self-closing syntax.

Do we still need forward slashes when closing void elements in HTML5?

img tags are Void Elements so they do not need an end tag.

Void elements
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

...

Void elements only have a start tag; end tags must not be specified for void elements.

W3C | WHATWG

That being said it's not strict parsing in HTML5 so it won't do any major harm.

What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?

Every browser that supports XHTML (Firefox, Opera, Safari, IE9) supports self-closing syntax on every element.

<div/>, <script/>,   all should work just fine. If they don't, then you have HTML with inappropriately added XHTML DOCTYPE.

DOCTYPE does not change how document is interpreted. Only MIME type does.

W3C decision about ignoring DOCTYPE:

The HTML WG has discussed this issue: the intention was to allow old
(HTML-only) browsers to accept XHTML 1.0 documents by following the
guidelines, and serving them as text/html. Therefore, documents served as
text/html should be treated as HTML and not as XHTML.

It's a very common pitfall, because W3C Validator largely ignores that rule, but browsers follow it religiously. Read
Understanding HTML, XML and XHTML from WebKit blog:

In fact, the vast majority of supposedly XHTML documents on the internet are served as text/html. Which means they are not XHTML at all, but actually invalid HTML that’s getting by on the error handling of HTML parsers. All those “Valid XHTML 1.0!” links on the web are really saying “Invalid HTML 4.01!”.

To test whether you have real XHTML or invalid HTML with XHTML's DOCTYPE, put this in your document:

<span style="color:green"><span style="color:red"/> 
 If it's red, it's HTML. Green is XHTML.
</span>

It validates, and in real XHTML it works perfectly (see: 1 vs 2). If you can't believe your eyes (or don't know how to set MIME types), open your page via XHTML proxy.

Another way to check is view source in Firefox. It will highlight slashes in red when they're invalid.

In HTML5/XHTML5 this hasn't changed, and the distinction is even clearer, because you don't even have additional DOCTYPE. Content-Type is the king.

For the record, the XHTML spec allows any element to be self-closing by making XHTML an XML application: [emphasis mine]

Empty-element tags may be used for any element which has no content, whether or not it is declared using the keyword EMPTY.

It's also explicitly shown in the XHTML spec:

Empty elements must either have an end tag or the start tag must end with />. For instance,   or <hr></hr>

Can SVG markup in HTML5 omit self-closing tags?

Below are some rules I found out in the W3 SVG and MathML elements in HTML documents documentation

SVG and MathML elements whose start tags have a single "/" character before the closing ">" character are said to be marked as
self-closing.

SVG and MathML elements must either have a start tag and an end tag, or a start tag that is marked as self-closing, in which case they
must not have an end tag.

SVG and MathML elements whose start tag is marked as self-closing, can’t have any contents.

The contents of an SVG or MathML element whose start tag is not marked as self-closing are any elements, character data, comments, and
CDATA sections that it contains, with the restriction that any
character data it contains must be normal character data.

I think the second point enforces svg elements to have a explicit closing tag or a self-closing tag.

Closing SVG tags, explicit or self closing?

Whatever validation you're using is working incorrectly.

The HTML standard says that SVG and MathML elements “must either have a start tag and an end tag, or a start tag that is marked as self-closing, in which case they must not have an end tag”. I.e. You can write a path as <path></path> or <path/> but you can't write it as <path>

What Are The Allowed Ways to Close Self-Closing Tags for Void Elements Such as <Br> in HTML5

What are the allowed ways to close self-closing tags for void elements such as <br> in HTML5?

HTML 5: Is it <br>, <br/>, or <br />?

Are (non-void) self-closing tags valid in HTML5?

Do we still need forward slashes when closing void elements in HTML5?

What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?

Can SVG markup in HTML5 omit self-closing tags?

Closing SVG tags, explicit or self closing?

Related Topics

Leave a reply