The W3C validator (Wikipedia) doesn't like self-closing tags (those that end with “/>”) on non-void elements. (Void elements are those that may not ever contain any content.) Are they still valid in HTML5?
Some examples of accepted void elements:
<br />
<img src="" />
<input type="text" name="username" />
Some examples of rejected non-void elements:
<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
Note:
The W3C validator actually accepts void self-closing tags: the author originally had a problem because of a simple typo (\> instead of />); however, self-closing tags are not 100% valid in HTML5 in general, and the answers elaborate on the issue of self-closing tags across various HTML flavors.
(Theoretically) in HTML 4, <foo / (yes, with no > at all) means <foo> (which leads to <br /> meaning <br>> (i.e. <br>>) 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.
A self-closing div will not validate. This is because a div is a normal element, not a void element.
According to the HTML5 spec, tags that cannot have any contents (known as void elements) can be self-closing*. This includes the following tags:
area, base, br, col, embed, hr, img, input,
link, meta, param, source, track, wbr
The "/" is completely optional on the above tags, however, so <img/> is not different from <img>, but <img></img> is invalid.
*Note: foreign elements can also be self-closing, but I don't think that's in scope for this answer.
In practice, using self-closing tags in HTML should work just like you'd expect. But if you are concerned about writing valid HTML5, you should understand how the use of such tags behaves within the two different two syntax forms you can use. HTML5 defines both an HTML syntax and an XHTML syntax, which are similar but not identical. Which one is used depends on the media type sent by the web server.
More than likely, your pages are being served as text/html, which follows the more lenient HTML syntax. In these cases, HTML5 allows certain start tags to have an optional / before it's terminating >. In these cases, the / is optional and ignored, so <hr> and <hr /> are identical. The HTML spec calls these "void elements", and gives a list of valid ones. Strictly speaking, the optional / is only valid within the start tags of these void elements; for example, <br /> and <hr /> are valid HTML5, but <p /> is not.
The HTML5 spec makes a clear distinction between what is correct for HTML authors and for web browser developers, with the second group being required to accept all kinds of invalid "legacy" syntax. In this case, it means that HTML5-compliant browsers will accept illegal self-closed tags, like <p />, and render them as you probably expect. But for an author, that page would not be valid HTML5. (More importantly, the DOM tree you get from using this kind of illegal syntax can be seriously screwed up; self-closed <span /> tags, for example, tend to mess things up a lot).
(In the unusual case that your server knows how to send XHTML files as an XML MIME type, the page needs to conform to the XHTML DTD and XML syntax. That means self-closing tags are required for those elements defined as such.)
HTML5 basically behaves as if the trailing slash is not there. There is no such thing as a self-closing tag in HTML5 syntax.
Self-closing tags on non-void elements like <p/>, <div/> will not work at all. The trailing slash will be ignored, and these will be treated as opening tags. This is likely to lead to nesting problems.
This is true regardless of whether there is whitespace in front of the slash: <p /> and <div /> also won't work for the same reason.
Self-closing tags on void elements like <br/> or <img src="" alt=""/> will work, but only because the trailing slash is ignored, and in this case that happens to result in the correct behaviour.
The result is, anything that worked in your old "XHTML 1.0 served as text/html" will continue to work as it did before: trailing slashes on non-void tags were not accepted there either whereas the trailing slash on void elements worked.
One more note: it is possible to represent an HTML5 document as XML, and this is sometimes dubbed "XHTML 5.0". In this case the rules of XML apply and self-closing tags will always be handled. It would always need to be served with an XML mime type.
Self-closing tags are valid in HTML5, but not required.
<br> and <br /> are both fine.
I would be very careful with self closing tags as this example demonstrates:
var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"
My gut feeling would have been <span></span><span></span> instead
However -just for the record- this is invalid:
<address class="vcard">
<svg viewBox="0 0 800 400">
<rect width="800" height="400" fill="#000">
</svg>
</address>
And a slash here would make it valid again:
<rect width="800" height="400" fill="#000"/>
Are (non-void) self-closing tags valid in HTML5?
Of course, they are valid but with little modification.
Take an example a self-closing tag <br>.
Even if you write <br/> or <br /> they will eventually be converted to <br> in the browser.
In self-closing tags ending with /> or />, / (slash) and white space will simply be ignored.
Take an example and let's see how it looks in the browser.
<p>This is paragraph with <br><br> and <br/><br/> and then <br /><br />.</p>
The above code will look like the following image in the browser.
You can see all converted to <br>. So it's your choice to close the self-closing tag or not but they are completely valid.
Related
The W3C validator (Wikipedia) doesn't like self-closing tags (those that end with “/>”) on non-void elements. (Void elements are those that may not ever contain any content.) Are they still valid in HTML5?
Some examples of accepted void elements:
<br />
<img src="" />
<input type="text" name="username" />
Some examples of rejected non-void elements:
<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
Note:
The W3C validator actually accepts void self-closing tags: the author originally had a problem because of a simple typo (\> instead of />); however, self-closing tags are not 100% valid in HTML5 in general, and the answers elaborate on the issue of self-closing tags across various HTML flavors.
(Theoretically) in HTML 4, <foo / (yes, with no > at all) means <foo> (which leads to <br /> meaning <br>> (i.e. <br>>) 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.
A self-closing div will not validate. This is because a div is a normal element, not a void element.
According to the HTML5 spec, tags that cannot have any contents (known as void elements) can be self-closing*. This includes the following tags:
area, base, br, col, embed, hr, img, input,
link, meta, param, source, track, wbr
The "/" is completely optional on the above tags, however, so <img/> is not different from <img>, but <img></img> is invalid.
*Note: foreign elements can also be self-closing, but I don't think that's in scope for this answer.
In practice, using self-closing tags in HTML should work just like you'd expect. But if you are concerned about writing valid HTML5, you should understand how the use of such tags behaves within the two different two syntax forms you can use. HTML5 defines both an HTML syntax and an XHTML syntax, which are similar but not identical. Which one is used depends on the media type sent by the web server.
More than likely, your pages are being served as text/html, which follows the more lenient HTML syntax. In these cases, HTML5 allows certain start tags to have an optional / before it's terminating >. In these cases, the / is optional and ignored, so <hr> and <hr /> are identical. The HTML spec calls these "void elements", and gives a list of valid ones. Strictly speaking, the optional / is only valid within the start tags of these void elements; for example, <br /> and <hr /> are valid HTML5, but <p /> is not.
The HTML5 spec makes a clear distinction between what is correct for HTML authors and for web browser developers, with the second group being required to accept all kinds of invalid "legacy" syntax. In this case, it means that HTML5-compliant browsers will accept illegal self-closed tags, like <p />, and render them as you probably expect. But for an author, that page would not be valid HTML5. (More importantly, the DOM tree you get from using this kind of illegal syntax can be seriously screwed up; self-closed <span /> tags, for example, tend to mess things up a lot).
(In the unusual case that your server knows how to send XHTML files as an XML MIME type, the page needs to conform to the XHTML DTD and XML syntax. That means self-closing tags are required for those elements defined as such.)
HTML5 basically behaves as if the trailing slash is not there. There is no such thing as a self-closing tag in HTML5 syntax.
Self-closing tags on non-void elements like <p/>, <div/> will not work at all. The trailing slash will be ignored, and these will be treated as opening tags. This is likely to lead to nesting problems.
This is true regardless of whether there is whitespace in front of the slash: <p /> and <div /> also won't work for the same reason.
Self-closing tags on void elements like <br/> or <img src="" alt=""/> will work, but only because the trailing slash is ignored, and in this case that happens to result in the correct behaviour.
The result is, anything that worked in your old "XHTML 1.0 served as text/html" will continue to work as it did before: trailing slashes on non-void tags were not accepted there either whereas the trailing slash on void elements worked.
One more note: it is possible to represent an HTML5 document as XML, and this is sometimes dubbed "XHTML 5.0". In this case the rules of XML apply and self-closing tags will always be handled. It would always need to be served with an XML mime type.
Self-closing tags are valid in HTML5, but not required.
<br> and <br /> are both fine.
I would be very careful with self closing tags as this example demonstrates:
var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"
My gut feeling would have been <span></span><span></span> instead
However -just for the record- this is invalid:
<address class="vcard">
<svg viewBox="0 0 800 400">
<rect width="800" height="400" fill="#000">
</svg>
</address>
And a slash here would make it valid again:
<rect width="800" height="400" fill="#000"/>
Are (non-void) self-closing tags valid in HTML5?
Of course, they are valid but with little modification.
Take an example a self-closing tag <br>.
Even if you write <br/> or <br /> they will eventually be converted to <br> in the browser.
In self-closing tags ending with /> or />, / (slash) and white space will simply be ignored.
Take an example and let's see how it looks in the browser.
<p>This is paragraph with <br><br> and <br/><br/> and then <br /><br />.</p>
The above code will look like the following image in the browser.
You can see all converted to <br>. So it's your choice to close the self-closing tag or not but they are completely valid.
The W3C validator (Wikipedia) doesn't like self-closing tags (those that end with “/>”) on non-void elements. (Void elements are those that may not ever contain any content.) Are they still valid in HTML5?
Some examples of accepted void elements:
<br />
<img src="" />
<input type="text" name="username" />
Some examples of rejected non-void elements:
<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
Note:
The W3C validator actually accepts void self-closing tags: the author originally had a problem because of a simple typo (\> instead of />); however, self-closing tags are not 100% valid in HTML5 in general, and the answers elaborate on the issue of self-closing tags across various HTML flavors.
(Theoretically) in HTML 4, <foo / (yes, with no > at all) means <foo> (which leads to <br /> meaning <br>> (i.e. <br>>) 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.
A self-closing div will not validate. This is because a div is a normal element, not a void element.
According to the HTML5 spec, tags that cannot have any contents (known as void elements) can be self-closing*. This includes the following tags:
area, base, br, col, embed, hr, img, input,
link, meta, param, source, track, wbr
The "/" is completely optional on the above tags, however, so <img/> is not different from <img>, but <img></img> is invalid.
*Note: foreign elements can also be self-closing, but I don't think that's in scope for this answer.
In practice, using self-closing tags in HTML should work just like you'd expect. But if you are concerned about writing valid HTML5, you should understand how the use of such tags behaves within the two different two syntax forms you can use. HTML5 defines both an HTML syntax and an XHTML syntax, which are similar but not identical. Which one is used depends on the media type sent by the web server.
More than likely, your pages are being served as text/html, which follows the more lenient HTML syntax. In these cases, HTML5 allows certain start tags to have an optional / before it's terminating >. In these cases, the / is optional and ignored, so <hr> and <hr /> are identical. The HTML spec calls these "void elements", and gives a list of valid ones. Strictly speaking, the optional / is only valid within the start tags of these void elements; for example, <br /> and <hr /> are valid HTML5, but <p /> is not.
The HTML5 spec makes a clear distinction between what is correct for HTML authors and for web browser developers, with the second group being required to accept all kinds of invalid "legacy" syntax. In this case, it means that HTML5-compliant browsers will accept illegal self-closed tags, like <p />, and render them as you probably expect. But for an author, that page would not be valid HTML5. (More importantly, the DOM tree you get from using this kind of illegal syntax can be seriously screwed up; self-closed <span /> tags, for example, tend to mess things up a lot).
(In the unusual case that your server knows how to send XHTML files as an XML MIME type, the page needs to conform to the XHTML DTD and XML syntax. That means self-closing tags are required for those elements defined as such.)
HTML5 basically behaves as if the trailing slash is not there. There is no such thing as a self-closing tag in HTML5 syntax.
Self-closing tags on non-void elements like <p/>, <div/> will not work at all. The trailing slash will be ignored, and these will be treated as opening tags. This is likely to lead to nesting problems.
This is true regardless of whether there is whitespace in front of the slash: <p /> and <div /> also won't work for the same reason.
Self-closing tags on void elements like <br/> or <img src="" alt=""/> will work, but only because the trailing slash is ignored, and in this case that happens to result in the correct behaviour.
The result is, anything that worked in your old "XHTML 1.0 served as text/html" will continue to work as it did before: trailing slashes on non-void tags were not accepted there either whereas the trailing slash on void elements worked.
One more note: it is possible to represent an HTML5 document as XML, and this is sometimes dubbed "XHTML 5.0". In this case the rules of XML apply and self-closing tags will always be handled. It would always need to be served with an XML mime type.
Self-closing tags are valid in HTML5, but not required.
<br> and <br /> are both fine.
I would be very careful with self closing tags as this example demonstrates:
var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"
My gut feeling would have been <span></span><span></span> instead
However -just for the record- this is invalid:
<address class="vcard">
<svg viewBox="0 0 800 400">
<rect width="800" height="400" fill="#000">
</svg>
</address>
And a slash here would make it valid again:
<rect width="800" height="400" fill="#000"/>
Are (non-void) self-closing tags valid in HTML5?
Of course, they are valid but with little modification.
Take an example a self-closing tag <br>.
Even if you write <br/> or <br /> they will eventually be converted to <br> in the browser.
In self-closing tags ending with /> or />, / (slash) and white space will simply be ignored.
Take an example and let's see how it looks in the browser.
<p>This is paragraph with <br><br> and <br/><br/> and then <br /><br />.</p>
The above code will look like the following image in the browser.
You can see all converted to <br>. So it's your choice to close the self-closing tag or not but they are completely valid.
The W3C validator (Wikipedia) doesn't like self-closing tags (those that end with “/>”) on non-void elements. (Void elements are those that may not ever contain any content.) Are they still valid in HTML5?
Some examples of accepted void elements:
<br />
<img src="" />
<input type="text" name="username" />
Some examples of rejected non-void elements:
<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
Note:
The W3C validator actually accepts void self-closing tags: the author originally had a problem because of a simple typo (\> instead of />); however, self-closing tags are not 100% valid in HTML5 in general, and the answers elaborate on the issue of self-closing tags across various HTML flavors.
(Theoretically) in HTML 4, <foo / (yes, with no > at all) means <foo> (which leads to <br /> meaning <br>> (i.e. <br>>) 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.
A self-closing div will not validate. This is because a div is a normal element, not a void element.
According to the HTML5 spec, tags that cannot have any contents (known as void elements) can be self-closing*. This includes the following tags:
area, base, br, col, embed, hr, img, input,
link, meta, param, source, track, wbr
The "/" is completely optional on the above tags, however, so <img/> is not different from <img>, but <img></img> is invalid.
*Note: foreign elements can also be self-closing, but I don't think that's in scope for this answer.
In practice, using self-closing tags in HTML should work just like you'd expect. But if you are concerned about writing valid HTML5, you should understand how the use of such tags behaves within the two different two syntax forms you can use. HTML5 defines both an HTML syntax and an XHTML syntax, which are similar but not identical. Which one is used depends on the media type sent by the web server.
More than likely, your pages are being served as text/html, which follows the more lenient HTML syntax. In these cases, HTML5 allows certain start tags to have an optional / before it's terminating >. In these cases, the / is optional and ignored, so <hr> and <hr /> are identical. The HTML spec calls these "void elements", and gives a list of valid ones. Strictly speaking, the optional / is only valid within the start tags of these void elements; for example, <br /> and <hr /> are valid HTML5, but <p /> is not.
The HTML5 spec makes a clear distinction between what is correct for HTML authors and for web browser developers, with the second group being required to accept all kinds of invalid "legacy" syntax. In this case, it means that HTML5-compliant browsers will accept illegal self-closed tags, like <p />, and render them as you probably expect. But for an author, that page would not be valid HTML5. (More importantly, the DOM tree you get from using this kind of illegal syntax can be seriously screwed up; self-closed <span /> tags, for example, tend to mess things up a lot).
(In the unusual case that your server knows how to send XHTML files as an XML MIME type, the page needs to conform to the XHTML DTD and XML syntax. That means self-closing tags are required for those elements defined as such.)
HTML5 basically behaves as if the trailing slash is not there. There is no such thing as a self-closing tag in HTML5 syntax.
Self-closing tags on non-void elements like <p/>, <div/> will not work at all. The trailing slash will be ignored, and these will be treated as opening tags. This is likely to lead to nesting problems.
This is true regardless of whether there is whitespace in front of the slash: <p /> and <div /> also won't work for the same reason.
Self-closing tags on void elements like <br/> or <img src="" alt=""/> will work, but only because the trailing slash is ignored, and in this case that happens to result in the correct behaviour.
The result is, anything that worked in your old "XHTML 1.0 served as text/html" will continue to work as it did before: trailing slashes on non-void tags were not accepted there either whereas the trailing slash on void elements worked.
One more note: it is possible to represent an HTML5 document as XML, and this is sometimes dubbed "XHTML 5.0". In this case the rules of XML apply and self-closing tags will always be handled. It would always need to be served with an XML mime type.
Self-closing tags are valid in HTML5, but not required.
<br> and <br /> are both fine.
I would be very careful with self closing tags as this example demonstrates:
var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"
My gut feeling would have been <span></span><span></span> instead
However -just for the record- this is invalid:
<address class="vcard">
<svg viewBox="0 0 800 400">
<rect width="800" height="400" fill="#000">
</svg>
</address>
And a slash here would make it valid again:
<rect width="800" height="400" fill="#000"/>
Are (non-void) self-closing tags valid in HTML5?
Of course, they are valid but with little modification.
Take an example a self-closing tag <br>.
Even if you write <br/> or <br /> they will eventually be converted to <br> in the browser.
In self-closing tags ending with /> or />, / (slash) and white space will simply be ignored.
Take an example and let's see how it looks in the browser.
<p>This is paragraph with <br><br> and <br/><br/> and then <br /><br />.</p>
The above code will look like the following image in the browser.
You can see all converted to <br>. So it's your choice to close the self-closing tag or not but they are completely valid.
The W3C validator (Wikipedia) doesn't like self-closing tags (those that end with “/>”) on non-void elements. (Void elements are those that may not ever contain any content.) Are they still valid in HTML5?
Some examples of accepted void elements:
<br />
<img src="" />
<input type="text" name="username" />
Some examples of rejected non-void elements:
<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
Note:
The W3C validator actually accepts void self-closing tags: the author originally had a problem because of a simple typo (\> instead of />); however, self-closing tags are not 100% valid in HTML5 in general, and the answers elaborate on the issue of self-closing tags across various HTML flavors.
(Theoretically) in HTML 4, <foo / (yes, with no > at all) means <foo> (which leads to <br /> meaning <br>> (i.e. <br>>) 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.
A self-closing div will not validate. This is because a div is a normal element, not a void element.
According to the HTML5 spec, tags that cannot have any contents (known as void elements) can be self-closing*. This includes the following tags:
area, base, br, col, embed, hr, img, input,
link, meta, param, source, track, wbr
The "/" is completely optional on the above tags, however, so <img/> is not different from <img>, but <img></img> is invalid.
*Note: foreign elements can also be self-closing, but I don't think that's in scope for this answer.
In practice, using self-closing tags in HTML should work just like you'd expect. But if you are concerned about writing valid HTML5, you should understand how the use of such tags behaves within the two different two syntax forms you can use. HTML5 defines both an HTML syntax and an XHTML syntax, which are similar but not identical. Which one is used depends on the media type sent by the web server.
More than likely, your pages are being served as text/html, which follows the more lenient HTML syntax. In these cases, HTML5 allows certain start tags to have an optional / before it's terminating >. In these cases, the / is optional and ignored, so <hr> and <hr /> are identical. The HTML spec calls these "void elements", and gives a list of valid ones. Strictly speaking, the optional / is only valid within the start tags of these void elements; for example, <br /> and <hr /> are valid HTML5, but <p /> is not.
The HTML5 spec makes a clear distinction between what is correct for HTML authors and for web browser developers, with the second group being required to accept all kinds of invalid "legacy" syntax. In this case, it means that HTML5-compliant browsers will accept illegal self-closed tags, like <p />, and render them as you probably expect. But for an author, that page would not be valid HTML5. (More importantly, the DOM tree you get from using this kind of illegal syntax can be seriously screwed up; self-closed <span /> tags, for example, tend to mess things up a lot).
(In the unusual case that your server knows how to send XHTML files as an XML MIME type, the page needs to conform to the XHTML DTD and XML syntax. That means self-closing tags are required for those elements defined as such.)
HTML5 basically behaves as if the trailing slash is not there. There is no such thing as a self-closing tag in HTML5 syntax.
Self-closing tags on non-void elements like <p/>, <div/> will not work at all. The trailing slash will be ignored, and these will be treated as opening tags. This is likely to lead to nesting problems.
This is true regardless of whether there is whitespace in front of the slash: <p /> and <div /> also won't work for the same reason.
Self-closing tags on void elements like <br/> or <img src="" alt=""/> will work, but only because the trailing slash is ignored, and in this case that happens to result in the correct behaviour.
The result is, anything that worked in your old "XHTML 1.0 served as text/html" will continue to work as it did before: trailing slashes on non-void tags were not accepted there either whereas the trailing slash on void elements worked.
One more note: it is possible to represent an HTML5 document as XML, and this is sometimes dubbed "XHTML 5.0". In this case the rules of XML apply and self-closing tags will always be handled. It would always need to be served with an XML mime type.
Self-closing tags are valid in HTML5, but not required.
<br> and <br /> are both fine.
I would be very careful with self closing tags as this example demonstrates:
var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"
My gut feeling would have been <span></span><span></span> instead
However -just for the record- this is invalid:
<address class="vcard">
<svg viewBox="0 0 800 400">
<rect width="800" height="400" fill="#000">
</svg>
</address>
And a slash here would make it valid again:
<rect width="800" height="400" fill="#000"/>
Are (non-void) self-closing tags valid in HTML5?
Of course, they are valid but with little modification.
Take an example a self-closing tag <br>.
Even if you write <br/> or <br /> they will eventually be converted to <br> in the browser.
In self-closing tags ending with /> or />, / (slash) and white space will simply be ignored.
Take an example and let's see how it looks in the browser.
<p>This is paragraph with <br><br> and <br/><br/> and then <br /><br />.</p>
The above code will look like the following image in the browser.
You can see all converted to <br>. So it's your choice to close the self-closing tag or not but they are completely valid.
This question's answers are a community effort. Edit existing answers to improve this post. It is not currently accepting new answers or interactions.
I've tried checking other answers, but I'm still confused — especially after seeing W3schools HTML 5 reference.
I thought HTML 4.01 was supposed to "allow" single-tags to just be <img> and <br>. Then XHTML came along with <img /> and <br /> (where someone said that the space is there for older browsers).
Now I'm wondering how I'm supposed to format my code when practicing HTML 5.
Is it <br>, <br/> or <br />?
Simply <br> 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 <br> tag; if you're using such a system, it's fine to use <br/>, 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.
I think this quote from the HTML 5 Reference Draft provides the answer:
3.2.2.2 Void Elements
The term void elements is used to designate elements that must be empty. These requirements only apply to the HTML syntax. In XHTML, all such elements are treated as normal elements, but must be marked up as empty elements.
These elements are forbidden from containing any content at all. In HTML, these elements have a start tag only. The self-closing tag syntax may be used. The end tag must be omitted because the element is automatically closed by the parser.
HTML Example:
A void element in the HTML syntax. This is not permitted in the XHTML syntax.
<hr>
Example:
A void element using the HTML- and XHTML-compatible self-closing tag syntax.
<hr/>
XHTML Example:
A void element using the XHTML-only syntax with an explicit end tag. This is not permitted for void elements in the HTML syntax.
<hr></hr>
In other words:
Invalid HTML 5: <IMG></IMG>
Valid HTML 5: <IMG>, <IMG/>
And while HTML forbids certain closing tags, xhtml requires them:
Invalid xhtml: <img>
Valid xhtml: <img></img> or <img/>
Other elements that are forbidden from having a closing tag in HTML:
Element
Valid HTML
Valid xhtml
AREA
<AREA>
<AREA></AREA>
BASE
<BASE>
<BASE></BASE>
BASEFONT
<BASEFONT>
<BASEFONT></BASEFONT>
BR
<BR>
<BR></BR>
COL
<COL>
<COL></COL>
FRAME
<FRAME>
<FRAME></FRAME>
HR
<HR>
<HR></HR>
IMG
<IMG>
<IMG></IMG>
INPUT
<INPUT>
<INPUT></INPUT>
ISINDEX
<ISINDEX>
<ISINDEX></ISINDEX>
LINK
<LINK>
<LINK></LINK>
META
<META>
<META></META>
PARAM
<PARAM>
<PARAM></PARAM>
The fact that HTML forbids certain closing tags, while xhtml requires them is xhtml's problem. If you're writing HTML, you follow the HTML rules.
At the same time, browers gave up trying to enforce the standards, because everyone gets it wrong. It's not obvious:
that </BR> is forbidden
that </P> is optional
and </SPAN> is required
And then xhtml came along, with its XML rule that every element must have a closing tag, and people just assumed that HTML was the same thing. So the standards gave up, and were later revised to throw up their hands to the reality.
XML doesn't allow leaving tags open, so it makes <br> a bit worse than the other two. The other two are roughly equivalent with the second (<br/>) preferred for compatibility with older browsers. Actually, space before / is preferred for compatibility sake, but I think it only makes sense for tags that have attributes. So I'd say either <br/> or <br />, whichever pleases your aesthetics.
To sum it up: all three are valid with the first one (<br>) being a bit less "portable".
Edit: Now that we're all crazy about specs, I think it worth pointing out that according to dev.w3.org:
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.
In HTML (up to HTML 4): use <br>
In HTML 5: <br> is preferred, but <br/> and <br /> is also acceptable
In XHTML: <br /> is preferred. Can also use <br/> or <br></br>
Notes:
<br></br> is not valid in HTML 5, it will be thought of as two line breaks.
XHTML is case sensitive, HTML is not case sensitive.
For backward compatibility, some old browsers would parse XHTML as HTML and fail on <br/> but not <br />
Reference:
http://www.w3schools.com/tags/tag_br.asp
http://en.wikipedia.org/wiki/XHTML
According to the spec the expected form is <br> for HTML 5 but a closing slash is permitted.
I would recommend using <br /> for the following reasons:
1) Text and XML editors that highlight XML syntax in different colours will highlight properly with <br /> but this is not always the case if you use <br>
2) <br /> is backwards-compatible with XHTML and well-formed HTML (ie: XHTML) is often easier to validate for errors and debug
3) Some old parsers and some coding specs require the space before the closing slash (ie: <br /> instead of <br/>) such as the WordPress Plugin Coding spec: http://make.wordpress.org/core/handbook/coding-standards/html/
I my experience, I have never come across a case where using <br /> is problematic, however, there are many cases where <br/> or especially <br> might be problematic in older browsers and tools.
XML requires all tags to have a corresponding closing tag. So there is a special short-hand syntax for tags without inner contents.
HTML5 is not XML, so it should not pose such a requirement. Neither is HTML 4.01.
For instance, in HTML5 specs, all examples with br tag use <br> syntax, not <br/>.
UPD Actually, <br/> is permitted in HTML5. 9.1.2.1, 7.
If you're interested in comparability (not compatibility, but comparability) then I'd stick with <br />.
Otherwise, <br> is fine.
Both <br> and <br /> are acceptable in HTML5, but in the spirit of HTML, <br> should be used. HTML5 allows closing slashes in order to be more compatible with documents that were previously HTML 4.01 and XHTML 1.0, allowing easier migration to HTML5. Of course, <br/> is also acceptable, but to be compatible with some older browsers, there should be a space before the closing slash (/).
If you are outputting HTML on a regular website you can use <br> or <br/>, both are valid anytime you are serving HTML5 as text/html.
If you are serving HTML5 as XHTML (i.e. content type application/xhtml+xml, with an XML declaration) then you must use a self closing tag like so: <br/>.
If you don't the some browsers may flat out refuse to render your page (Firefox in particular is very strict about rendering only valid xhtml+xml pages).
As noted in 1. <br/> is also valid for HTML5 that happens to be generated as XML but served as a regular text/html without an XML declaration (such as from an XSL Transform that generates web pages, or something similar).
To clear up confusion: Putting a space before the slash isn't required in HTML5 and doesn't make any difference to how the page is rendered (if anyone can cite an example I'll retract this, but I don't believe it's true - but IE certainly does a lot of other odd things with all forms of <br> tags).
The excellent validator at http://validator.w3.org is really helpful for checking what's valid (although I'm not sure you can rely on it to also check content-type).
<br> is sufficient but in XHTML <br /> is preferred according to the WHATWG and according to the W3C.
To quote Section 8.1.2.1 of HTML 5.2 W3C Recommendation, 14 December 2017
Start tags must have the following format:
…
After the attributes, or after the tag name if there are no attributes, there may be one or more space characters. (Some attributes are required to be followed by a space. See §8.1.2.3 Attributes below.)
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 SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.
If you use Dreamweaver CS6, then it will autocomplete as <br />.
To validate your HTML file on W3C see : http://validator.w3.org/
<br> and <br/> render differently. Some browsers interpret <br/> as <br></br> and insert two line breaks
<br/> is the most appropriate one. This tag notation can also be used in Reactjs where a line break is required instead of <br>
Most of the cases in HTML, the tags are in pair. But for a line break you don't need a pair of tags. Therefore to indicate this, HTML uses <br/> format. <br/> is the right one. Use that format.
<br> tag has no end tag in HTML
In XHTML, the <br> tag must be properly closed, like this: <br />
In XML every tag must be closed. XHTML is an extension of XML, hence all the rules of XML must be followed for valid XHTML. Hence even empty tags (nodes without child nodes) like should be closed. XML has a short form called self closing tags for empty nodes. You can write <br></br> as <br />. Hence in XHTML <br /> is used.
HTML is very lenient in this regard, and there is no such rule. So in HTML empty nodes like <br> <hr> <meta> etc are written without the closing forward slash.
HTML
<br>
<hr>
<meta name="keywords" content="">
<link rel="canonical" href="http://www.google.com/">
XHTML
<br />
<hr />
<meta name="keywords" content="" />
<link rel="canonical" href="http://www.google.com/" />
Not all tags can be self closed. For example, a tag like <script src="jQuery.min.js" /> is not allowed by XHTML DTD.
Well all I know is that <br /> gives a break with a white line and <br> just gives a break in some cases. This happened to me when I was setting up an IPN-script (PHP) and sent mails and checked the inbox for it. Dont know why but I only got the message to look neat using both <br /> and <br>
Have a look at the mail here: http://snag.gy/cLxUa.jpg
The first two sections of text is seperated by <br />, hence the whitespace lines, the last three rows of text in the bottom and the last section is seperated by <br> and just gives new row.
Ummm.....does anyone know a SINGLE vendor, user-agent, or browser maker that has ever followed the W3C Specifications 100%??? So if HTML5 says it supports all three break element versions, you can bet the vendors support the same and even more sloppier versions!
The ONLY thing that matters in this debate is to CONSISTENTLY use coding that also happens to follow XML specifications as well as HTML specifications when possible. That means you should use the correct XML version of the break tag and encourage all your team to do the same:
<br />
The same space-slash format should apply for the img, a, hr, and meta tags in your code. Why? Because:
Its is backwards compatible with older XHTML user-agents / browsers
The browser vendors support the XML version anyway so the HTML5 specification is moot.
The sloppy implementations of most user-agents today, in the past, and in the future will accept it.
It allows your markup to be comparable with XML standards should you need to go back to creating XHTML/XML documents from your markup.
It's "good coding practice" for ALL WEB DEVELOPERS to keep using solid markup practices that follow XML, including coding in all lower case, quoted attributes, escaped XML characters, etc. etc. Why? In the future if you have to switch to XML data you automatically code and think in XML.
We can only hope that in the future World Wide Web, we move away from private vendor-implemented standards and go back to solid, reliable, verified markup that parses faster, moves data over the wires faster, and make our future Internet a more standardized medium using XML.
Old Netscape always needed the " /" space before the slash or it failed. Who cares about old browsers, right? But its one more case for my version I still like :)
Besides, in the robotic and machine world that's here, where robots don't have the same Human-interface coding problems HTML5 solves for us, they will gladly go back to XML data systems and parse such UI web pages much faster when converted to XML data.
<br> and <br /> render differently in some browsers, so choosing either over the other isn't going to hurt your project, but do expect a bulk find..replace to affect the page render in some browsers, which may result in extra work for yourself or even embarrassment should the change affect nothing in your test browser, but break it in the preferred browser of your clients'.
I prefer <br> since it is what I have used since Erwise and Netscape Navigator (early web browsers), but there's no reason not to choose <br /> instead. It may be useful for some preprocessing, comparability, etc.
Even if your choice boils down to preferring the look of one over the other, or you (or your favourite HTML editor e.g. Dreamweaver) might like your code to be xml compliant. It's up to you.
A quick side note:
Not to be confused with br, but in addition you may also consider using wbr tags in your HTML: A word break opportunity tag, which specifies where in a text it would be ok to add a line-break.
For further reading, please have a read of the HTML5 spec.
The elements without having end tags are called as empty tags. In html 4 and html 5, end tags are not required and can be omitted.
In xhtml, tags are so strict. That means must start with start tag and end with end tag.