What are the actual problems of not closing tags and attributes in HTML

Question

Recently a friend decided not to close his tags or attributes in HTML because it's not required and he'll save some bandwidth and download time. I told him it's a bad idea and to be "better safe than sorry", however, I could only really find 2 resources on the issue:

1. http://css-tricks.com/13286-problems-with-unquoted-attributes/
2. http://www.cs.tut.fi/~jkorpela/qattr.html

#1 is good, but even as he said, they aren't really real world examples, which is why I went to #2, but they only really show an <a> which is much more different than most other tags/nodes.

Is there another resource or test cases as to a better reasons to quote your attributes and close your tags?

Answer 1

You can often leave the closing tags off many elements without changing 'the way it looks'. However, even though one of the main goals of HTML5 is to standardize how browsers deal with bad markup, not closing tags can impact your content in unexpected ways. Here's a simple example, a list of items where some of the items are blank, both without explicitly closed tags and with:

<ul>
    <li>Item
    <li>
    <li>Item
    <li>
    <li>Item
</ul>

<ul>
    <li>Item</li>
    <li></li>
    <li>Item</li>
    <li></li>
    <li>Item</li>
</ul>

Looking at the two in a browser they look identical. However, if you add a bit of CSS to hide the empty ones:

li:empty { display: none; }

Now they don't look the same, even though the markup hasn't changed from the previous example. The underlying reason for this is that the two versions produce different DOM trees, this version iterates through all the nodes in both lists and counts them, then shows the results and the list of nodes found in alerts. You can see the top list has 12 DOM nodes, the lower list has 15. The results are at least consistent cross browser, and the difference is in text nodes which you'll frequently skip over when scripting anyway, but this shows that even if the visual output looks the same when tags are closed or not, there are underlying differences even in an example as simple as this.

Answer 2

Not closing tags can lead to browser incompatibilities and improperly rendered pages. That alone should be enough reason to properly close your tags.

Saving bandwidth and download time is a horrible excuse, if you ask me. It's 2011, and even on dialup the few bytes you save on not closing a few tags will not be even close to noticeable. A mangled page due to improper rendering, however, will be.