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?

Solution 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.

Solution 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.

Solution 3

That's just bad coding practice in my opinion.

There are two types of programmers; those that care, and those that don't.

It's lazy programming, the same as not having coding standards, or not formatting your code... it's like being a carpenter and not sanding the edges of the table you just built.

Most browsers support it, but some might complain.

Solution 4

Not closing tags can create unexpected blank spaces between elements in the markup.

Consider the following example.

<!-- English quoting rules. -->
<style>
    blockquote > p::before { content: open-quote; }
    blockquote > p::after { content: no-close-quote; }
    blockquote > p:last-of-type::after { content: close-quote; }
</style>

<!-- This is ok. -->
<blockquote>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
</blockquote>

<!-- This isn't. There are blank spaces after the last (unclosed) <p> element.
     Thus, the closing quote appears separated with a space from the text. -->
<blockquote>
    <p>Lorem ipsum dolor sit amet.
    <p>Lorem ipsum dolor sit amet.
</blockquote>

Solution 5

Most HTML tags are containers. Consider:

<style>
 section {
   color: red;
 }
</style>
<section>
  Stuff inside a section
</section>
Stuff outside a section
<p>
  Other text
</p>

In this example, "Stuff inside a section" would be red text, "Stuff outside a section" is not red. In this example:

<style>
 section {
   color: red;
 }
</style>
<section>
  Stuff inside a section

Stuff outside a section
<p>
  Other text
</p>

... in this example, "Stuff inside a section", " Stuff outside a section", and "Other text" would ALL be red - that is, the section never ended. The browser may try to assume where the section could have ended, but in my above example the only assumption possible is that the section continues to the end of the document, which is not what was intended.

In short, not closing HTML tags just makes things more confusing for you, will cause pages to render inconsistently from expectations and between browsers, and is just generally a bad idea. So bad, in fact, that it shouldn't even be taken as a serious suggestion at all. Your friend has clearly never developed an actual web site.

View more solutions

Comments

[jackJoe]

if you don't follow standards anarchy will prevail :) (i.e. browsers can show it now, but what in the future?)

[Jared Ng]

@jackJoe +1 for unintentional pun on the i.e.

[Oscar Godson]

How come? Browsers render it, seemingly, pretty well.

[Oscar Godson]

Thats the thing tho, he says every page he does it in works fine except if he doesn't close <a> tags. Every browser I looked at his pages in seem the same too. I did notice you need to close <div>s tho or else they keep nesting

[Jared Ng]

Is he testing with every browser in existence? In general, you want to support as many browsers as you can. Your first link, css-tricks.com/13286-problems-with-unquoted-attributes, already shows some incompatibilities exist. Literally, the advantage you gain from not closing tags is saving a few bytes. Is that worth alienating some of your visitors with old browsers? Nobody is going to notice (or even care) if your page is 30 KB as opposed to 30.1 KB.

[Oscar Godson]

Great answer! Thanks, this is perfect.

[Admin]

Even in 2012, people pay for bandwidth... every kbit counts!

[mattmanser]

This isn't a simple example. This depends on a trick of using :empty and the behaviour of text nodes, which you'll never see in real code. If you're going to use that css selector you would need to know how #text nodes and whitespace work. Here's your example flipped on its head which a novice HTML programmer might be surprised by: jsfiddle.net/UqzEp/2 or jsfiddle.net/UqzEp/3

[Oscar Godson]

Wow... you just replied to something 2+ years later? haha As I and others have pointed its the opposite. In 95% of cases browsers render it fine.

[Matt K]

@OscarGodson I'm afraid that's just not true. You simply cannot leave most tags unclosed and expect it to render properly. Experiment with some tags like <table>, <div>, <section>, <span>, <style>, <button> or any block-level element. None of those will work properly without closing tags and they're the building blocks to your webpage. There are some you can use without closing tags like <p>, <tr>, <td>, <li> but that is because they were designed that way and it is valid HTML.

[Ssswift]

Finally, an actual example of a case where not closing a tag impacts the appearance of a page!

[BoltClock]

The example here doesn't illustrate bad markup per se, since neither fragment is actually invalid. It does however wonderfully demonstrate the impact of omitting optional end tags on the placement of whitespace in the DOM.

[BoltClock]

@Ssswift: I dunno, I thought the accepted answer that was posted nearly 5 years before this one (and nearly 6 years before your comment) had a pretty good example.