Closing Tags Not Required

When to Use Closing Tags on HTML Elements

There are a number of HTML tags in HTML4 and HTML5 that do not require the use of a closing tag for valid HTML. They are:

  • <body> </body>
  • <colgroup> </colgroup>
  • <dd> </dd>
  • <dt> </dt>
  • <head> </head>
  • <html> </html>
  • <li> </li>
  • <optgroup> </optgroup>
  • <option> </option>
  • <p> </p>
  • <tbody> </tbody>
  • <td> </td>
  • <tfoot> </tfoot>
  • <th> </th>
  • <thead> </thead>
  • <tr> </tr>

The reason that most of these tags don't have a required end tag is because in most cases, the end tag is implied by the presence of another tag in the document.

For example, in most web documents, a paragraph (defined by <p>) is followed by either another paragraph or by another block-level element. Thus, the browser can infer that the paragraph has ended by the start of the next paragraph.

Other tags in this list don't always have contents, such as <colgroup>. This element can contain tags like <col> but don't have to. If a colgroup doesn't contain any col tags, leaving out the closing </colgroup> tag does not cause any confusion—in most cases the number of columns would be defined by the span attribute.

Leaving Out End Tags Speeds Up Your Pages

One good reason for leaving out the end tags for these elements is because they add extra characters to the page download and thus slow down the pages. If you are looking for things to do to speed up your web page downloads, getting rid of optional closing tags is a good place to start. For documents that have lots of paragraphs or table cells this can be a significant savings.

But Leaving Out Closing Tags is Not All Good

There are some important reasons to leave in the closing tags.

  • The closing tags provide structure.
    When you have an HTML document that is minimally coded it might load quickly, but it could rapidly become a bear to maintain. Adding new table rows or columns can be a lot harder to do quickly without the full structure of the beginning and end tags. And often people solve this by indenting which adds the characters back into the document, thus negating the speed benefits you gained from leaving them out.
  • CSS and JavaScript hook on the full elements.
    While most browsers can display (and style) tags without their closing tags, the lack of closing tags can make a definitive location for closing a style or script action less clear. If you are working with very precise layouts, you give up control over the precision when you leave out closing tags—you are letting the browser decide where the tag ends. Sometimes browsers guess right, and sometimes not.
  • Omitting closing tags is not always allowed.
    In HTML5, the </p> tag may be omitted when the paragraph is immediately followed by around 25 different elements. But there are over 100 elements in HTML5. Are you going to memorize every situation that it's valid to leave off the end tag? It's probably easier to just include it.

XHTML Requires All Closing Tags

The main reason most people use closing tags with these elements is because of XHTML. When you write XHTML the closing tags are always required. If you plan on converting your web documents to XHTML at any point in the future, it's easiest to include the closing tags, so that your documents are ready.