Close Every Element

When you opened an element in HTML, you weren’t always required to supply the corresponding closing element. In fact, the HTML 4.01 specification differentiates between elements whose ending elements are optional (such as the paragraph element:, required (phrase elements such as em or strong: text.html#h-9.2.1), and, in some cases, outright forbidden (the good ol’ br: REC-html40/struct/text.html#h-9.3.2).

Thankfully, this ambiguity has been removed from XHTML, largely because of XHTML’s insistence that our markup be well formed. If you open an element, a closing element is required—simple as that. The following is valid markup in HTML 4:

<li>Here’s a sample list item,
<li>And yet another.
<p>I like big blocks,<br>and I cannot lie.
<p>You other coders can’t deny.

However, the XHTML looks slightly different (the changes are shown here in bold):

<li>Here’s a sample list item,</li>
<li>And yet another.</li>
<p>I like big blocks,<br />and I cannot lie.</p>
<p>You other coders can’t deny.</p>

Because we’re working in XHTML, we don’t have the option of leaving our list items (<li></li>) and paragraphs (<p>) open. Before starting a new element, we’ll need to close each with </li> and </p>, respectively. However, the sharp-eyed readers may be wondering exactly what we were thinking when we added a forward slash (/) to the br.

Trust us: we haven’t gone slash-happy. Elements such as br, img, meta, and hr are considered “empty” elements because they don’t contain any text content—which isn’t the case for p, li, td, and, in fact, most elements in the HTML specification. But while empty elements traditionally have not had a closing element, XHTML doesn’t play any favorites when it comes to keeping our document well formed. So, by ending an empty element with />, we can effectively close it. Structural consistency is a strong requirement for our new markup, and XHTML certainly delivers that consistency.