Empty Elements (Self Closing Tags) in HTML 5 and XHTML

with 2 Comments

Self Closing Tags are used for “Empty” Elements within XHTML and HTML5.

An empty element is an element that has no child element.  Think of a pregnant woman – she has a child inside.  Elements like…

<p><strong><em>Hello World!</em></strong></p>

…can contain other elements between the opening and closing tags.  Empty elements do not.  So there is no closing tag, we just end the opening tag with ” />”  That is a space, slash and the closing greater than sign.

HTML4 Most people do not realize that although self closing tags are not part of the HTML4 standard, and will not pass the W3C Validator, nonetheless virtually ALL browsers available today accept self closing tags!

CNN.COM uses self closing tags in its HTML 4.o1 doctype pages!  This prepares them for the jump to HTML5.

Below is my list of empty elements in their self closing tag form…

HTML5 or XHTML 1.x

<area />
<base />
<br />
<col />
<hr />
<img />
<input />
<link />
<meta />
<param />

XHTML 1.0 Transitional Only (add)

<basefont />
<frame />

2 Responses

  1. Erik
    | Reply

    XHTML requires that every tag be closed, so <br />, which was better supported by browsers than <br></br> and quicker to write, is necessary in XHTML.

    In HTML5, void elements {area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr} can’t have a close tag and therefore can’t have content as in “<br>this is an error</br>”. A tag like <br> is the standard for HTML5 and the parser will close it automatically. However, the spec allows the optional use of the self-closing slash which the parser will ignore.

    If writing HTML5 you may come off looking on top of your code if you don’t self-close void elements.

    Spec: http://dev.w3.org/html5/spec-author-view/syntax.html#elements-0

    • Lan Tait
      | Reply

      Hi Erik,

      Yes this is technically true. There are additional reasons for using XHTML tag closings. For example, readability among many developers.

      Another good reason is XHTML5, which uses the same XML closing tags. In other words, a document written in XHTML5 will run in HTML5 unmodified, but a document written in the more slack HTML5 will not run in XHTML5 unmodified.

      This is an issue of good, better and best practices, not write and wrong! 🙂

      Lan

Leave a Reply