Self-closing tags (void elements) in HTML5
There is no consensus on best practice, and according to the author of the spec, Ian Hickson, it does not matter.
Are (non-void) self-closing tags valid in HTML5?
(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 astext/html
which (historically at least) gets processed by browsers using a different parser than documents served asapplication/xhtml+xml
. The W3C provides compatibility guidelines to follow for XHTML astext/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.
Where is the opening tag and closing tag in a void element in HTML5?
Void elements have start tags. They do not have end tags.
The start tag doesn’t count as an end tag. It is simply the only tag used to represent the element.
Take the img element in the specification where it says:
Tag omission in text/html:
No end tag.
What are the allowed ways to close self-closing tags for void elements such as br 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.
- A
From this it seems that we can use either <br>
or <br/>
. However, the end tag </br>
is not valid, so don't use <br> </br>
.
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 <br>
or <br/>
, just make sure you use them consistently.
Edit: As noted by Brad, <br />
is also valid XHTML, so perhaps it is best to choose this form.
Is Self Closing Tag or Void Element an opening tag and closing tag combined in HTML5?
No.
It is a regular start tag, with an optional "/" at the end for people trapped with XML syntax.
The end tag is just forbidden for the element type.
Related Topics
Remove Blur Effect on Child Element
Fallback for CSS Attributes Without Unit
Do Http Post Methods Send Data as a Querystring
HTML Favicon.Ico Won't Show on Google Chrome
What Are the Priorities Among CSS Selectors
Iframe with External Page Not Working
Equal Sized Table Cells to Fill the Entire Width of the Containing Table
How to Apply an Opacity Without Affecting a Child Element with HTML/Css
Fill Remaining Vertical Space - Only CSS
With a Browser, How to Know Which Decimal Separator Does the Operating System Use
Divs VS. Tables a Rebuttal Please
How to Change the Color of <Div> Element Depending on Its Height or Width
Declare Variable in a Play2 Scala Template
Options with Display:None Not Hidden in Ie
Can You Take a "Screenshot" of the Page Using Canvas
Conditional HTML Attributes Using Razor MVC3
Google Bot Crawling on Angularjs Site with HTML5 Mode Routes