Why do some HTML tags end with a forward slash?

In the early days of HTML, it wasn't uncommon to find code like the following:

<ul>
  <li>item 1
  <li>Item 2
  <li>Item 3
</ul>

The problem with this approach is that it lead to HTML that was very tedious to parse because it was often difficult to understand the intent. As such, developers that parsed HTML had to rely on some [often] unreliable assumptions.

To alleviate this problem, the standards committee mandated that XHTML be well formed. As such, all tags were required to have both a start tag and an end tag, replacing the above HTML with the following:

<ul>
  <li>item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

This worked well for tags that contained inner text or child elements, but it didn't work well for tags that stood alone (e.g., the <br> tag). To overcome this issue, while complying with the rule stating that all tags must have a corresponding closing tag, the standards committee sided with a trailing forward slash (e.g., <br />). It should be noted, however, in XHTML, the following is also legal: <br></br>.

that's the xhtml syntax for an element that doesn't have a closing tag

In XHTML <foo /> is shorthand for <foo></foo>. In HTML the syntax is obscure and marked as "don't do this" as browsers don't support it.

If you are writing XHTML but pretending it is HTML (so that browsers (such as Internet Explorer 8) which don't support XHTML can handle it), then elements defined as EMPTY in the specification must be represented that way (and elements which are not must not).

HTML 5 became a recommendation five years after this answer was written and changes the rules.