152

Some HTML1 closing tags are optional, i.e.:

</HTML>
</HEAD>
</BODY>
</P>
</DT>
</DD>
</LI>
</OPTION>
</THEAD>
</TH>
</TBODY>
</TR>
</TD>
</TFOOT>
</COLGROUP>

Note: Not to be confused with closing tags that are forbidden to be included, i.e.:

</IMG>
</INPUT>
</BR>
</HR>
</FRAME>
</AREA>
</BASE>
</BASEFONT>
</COL>
</ISINDEX>
</LINK>
</META>
</PARAM>

Note: xhtml is different from HTML. xhtml is a form of xml, which requires every element have a closing tag. A closing tag can be forbidden in html, yet mandatory in xhtml.

Are the optional closing tags

  • ideally included, but we'll accept them if you forgot them, or
  • ideally not included, but we'll accept them if you put them in

In other words, should I include them, or should I not include them?

The HTML 4.01 spec talks about closing element tags being optional, but doesn't say if it's preferable to include them, or preferable to not include them.

On the other hand, a random article on DevGuru says:

The ending tag is optional. However, it is recommended that it be included.

The reason I ask is because you just know it's optional for compatibility reasons; and they would have made them (mandatory | forbidden) if they could have.

Put it another way: What did HTML 1, 2, 3 do with regards to these, now optional, closing tags. What does HTML 5 do? And what should I do?

Note

Some elements in HTML are forbidden from having closing tags. You may disagree with that, but that is the specification, and it's not up for debate. I'm asking about optional closing tags, and what the intention was.

Footnotes

1HTML 4.01

9
  • 5
    Tough question... some of the w3c recommendations even include examples which do both: w3.org/TR/html401/struct/global.html#id-and-class The first example has closing </p> tags and the second omits them! Jun 9, 2010 at 18:26
  • 1
    Just to clarify -- in the case of forbidden tags in HTML5, the "explicit"/XML valid solution is to close them with a />, such as <meta charset="utf-8" /> even though <meta charset="utf-8"> is valid HTML5?
    – cboettig
    Oct 28, 2012 at 18:35
  • @cboettig Yes. <meta charset="utf-8" /> is invalid html, it must be <meta charset="utf-8">. On the other hand <meta charset="tuf-8"> is invalid xhtml, it must be <meta charset="utf-8" />
    – Ian Boyd
    Oct 28, 2012 at 20:32
  • 1
    @IanBoyd really? in HTML5? The draft W3C manual for polyglot html/xhtml says to use <meta charset="UTF-8"/> with the closing tag. Otherwise how could polyglot or xhtml ever validate as html5 and xml?
    – cboettig
    Oct 29, 2012 at 17:20
  • @cboettig You're right. Polyglot Markup (i.e. HTML-Compatible XHTML Documents) can't be valid HTML 4.01. HTML5 (still a work in progress) has the notion of Void elements - elements that cannot have an end tag. Presumably most browsers are gentle, and will forgive your markup errors.
    – Ian Boyd
    Oct 29, 2012 at 21:17

14 Answers 14

63

There are cases where explicit tags help, but sometimes it's needless pedantry.

Note that the HTML spec clearly specifies when it's valid to omit tags, so it's not always an error.

For example you never need </body></html>. Nobody ever remembers to put <tbody> explicitly (to the point that XHTML made exceptions for it).

You don't need </head><body> unless you have DOM-manipulating scripts that actually search <head> (then it's better to close it explicitly, because rules for implied end of <head> could surprise you).

Nested lists are actually better off without </li>, because then it's harder to create erroneous ul > ul tree.

Valid:

<ul>
  <li>item
  <ul>
    <li>item
  </ul>
</ul>

Invalid:

<ul>
  <li>item</li>
  <ul>
    <li>item</li>
  </ul>
</ul>

And keep in mind that end tags are implied whether you try to close all elements or not. Putting end tags won't automatically make parsing more robust:

<p>foo <p>bar</p> baz</p>

will parse as:

<p>foo</p><p>bar</p> baz

It can only help when you validate documents.

8
  • 5
    Wait, why is <p>foo <p>bar</p> baz</p> not parsed as two nested p tags?
    – Eric
    Jun 9, 2010 at 18:58
  • 21
    Because a <P> element cannot contain block-level elements, and <P> is a block level element. From (w3.org/TR/REC-html40/struct/text.html#edef-P) "The P element represents a paragraph. It cannot contain block-level elements (including P itself)."
    – Ian Boyd
    Jun 9, 2010 at 20:25
  • 1
    @IanBoyd Do you mean cannot contain block-level elements regardless of the CSS rules?
    – Pacerier
    Jul 13, 2012 at 4:19
  • 6
    @Pacerier CSS cannot influence DOM in any way. DOM is parsed first, and then CSS displays it. CSS block display is a completely different thing from HTML's block-level content (it just happens that most HTML block-level elements are displayed as CSS blocks by default).
    – Kornel
    Jul 18, 2012 at 11:23
  • 3
    @anton1980 No, this is not the same. Handling of omitted optional closing tags is clearly specified and works reliably in all compliant browsers. OTOH a made-up <t> won't work like <title>.
    – Kornel
    Sep 26, 2012 at 17:07
52

The optional ones are all ones that should be semantically clear where they end, without needing the end tag. E.G. each <li> implies a </li> if there isn't one right before it.

The forbidden end tags all would be immediately followed by their end tag so it would be kind of redundant to have to type <img src="blah" alt="blah"></img> every time.

I almost always use the optional tags (unless I have a very good reason not to) because it lends to more readable and updateable code.

8
  • 20
    i see it now. <LI> is like a bullet. Nobody would want to have to wrap an entire bulleted point in <LI>...</LI>. So in that way the LI matches what people would naturally write during markup. Sames goes for a paragraph mark (<P>), in word processing you add a paragraph mark at the start of a paragraph; and not at the end of every one too. So in this interpretation the closing tags are optional because no normal person would think to have them. Plus, the element itself has no content - the element is the content.
    – Ian Boyd
    Jun 9, 2010 at 18:40
  • 9
    What do you mean by I almost always use the optional tags — do you mean that you include the end tag, or that you leave it out? (I got the impression that you include it, when I read your answer — but the comment above by Ian Boyd gives me the impression that you exclude it.)
    – KajMagnus
    Jun 28, 2012 at 8:36
  • 3
    @IanBoyd And for the last paragraph?
    – Pacerier
    Jul 15, 2012 at 18:02
  • 22
    @Pacerier People have been writing paragraphs of text for hundreds of years. Nobody's ever been confused when a paragraph ends.
    – Ian Boyd
    Jul 16, 2012 at 21:24
  • 4
    Relevant link for HTML5, for those who found this answer while trying to find the actual reference documentation: w3.org/TR/html5/syntax.html#optional-tags Dec 4, 2013 at 17:46
21

I am adding some links here to help you with the history of HTML, for you to understand the various contradictions. This is not the answer to your question, but you will know more after reading these various digests.

Some excerpts from Dive Into HTML5:

[T]he fact that “broken” HTML markup still worked in web browsers led authors to create broken HTML pages. A lot of broken pages. By some estimates, over 99% of HTML pages on the web today have at least one error in them. But because these errors don’t cause browsers to display visible error messages, nobody ever fixes them.

The W3C saw this as a fundamental problem with the web, and they set out to correct it. XML, published in 1997, broke from the tradition of forgiving clients and mandated that all programs that consumed XML must treat so-called “well-formedness” errors as fatal. This concept of failing on the first error became known as “draconian error handling,” after the Greek leader Draco who instituted the death penalty for relatively minor infractions of his laws. When the W3C reformulated HTML as an XML vocabulary, they mandated that all documents served with the new application/xhtml+xml MIME type would be subject to draconian error handling. If there was even a single well-formedness error in your XHTML page […] web browsers would have no choice but to stop processing and display an error message to the end user.

This idea was not universally popular. With an estimated error rate of 99% on existing pages, the ever-present possibility of displaying errors to the end user, and the dearth of new features in XHTML 1.0 and 1.1 to justify the cost, web authors basically ignored application/xhtml+xml. But that doesn’t mean they ignored XHTML altogether. Oh, most definitely not. Appendix C of the XHTML 1.0 specification gave the web authors of the world a loophole: “Use something that looks kind of like XHTML syntax, but keep serving it with the text/html MIME type.” And that’s exactly what thousands of web developers did: they “upgraded” to XHTML syntax but kept serving it with a text/html MIME type.

Even today, millions of web pages claim to be XHTML. They start with the XHTML doctype on the first line, use lowercase tag names, use quotes around attribute values, and add a trailing slash after empty elements like <br /> and <hr />. But only a tiny fraction of these pages are served with the application/xhtml+xml MIME type that would trigger XML’s draconian error handling. Any page served with a MIME type of text/html — regardless of doctype, syntax, or coding style — will be parsed using a “forgiving” HTML parser, silently ignoring any markup errors, and never alerting end users (or anyone else) even if the pages are technically broken.

XHTML 1.0 included this loophole, but XHTML 1.1 closed it, and the never-finalized XHTML 2.0 continued the tradition of requiring draconian error handling. And that’s why there are billions of pages that claim to be XHTML 1.0, and only a handful that claim to be XHTML 1.1 (or XHTML 2.0). So are you really using XHTML? Check your MIME type. (Actually, if you don’t know what MIME type you’re using, I can pretty much guarantee that you’re still using text/html.) Unless you’re serving your pages with a MIME type of application/xhtml+xml, your so-called “XHTML” is XML in name only.

[T]he people who had proposed evolving HTML and HTML forms were faced with two choices: give up, or continue their work outside of the W3C. They chose the latter, registered the whatwg.org domain, and in June 2004, the WHAT Working Group was born.

[T]he WHAT working group was quietly working on a few other things, too. One of them was a specification, initially dubbed Web Forms 2.0, which added new types of controls to HTML forms. (You’ll learn more about web forms in A Form of Madness.) Another was a draft specification called “Web Applications 1.0,” which included major new features like a direct-mode drawing canvas and native support for audio and video without plugins.

In October 2009, the W3C shut down the XHTML 2 Working Group and issued this statement to explain their decision:

When W3C announced the HTML and XHTML 2 Working Groups in March 2007, we indicated that we would continue to monitor the market for XHTML 2. W3C recognizes the importance of a clear signal to the community about the future of HTML.

While we recognize the value of the XHTML 2 Working Group’s contributions over the years, after discussion with the participants, W3C management has decided to allow the Working Group’s charter to expire at the end of 2009 and not to renew it.

The ones that win are the ones that ship.

0
13

The reason i ask is because you just know it's optional for compatibility reasons; and they would have made them (mandatory | forbidden) if they could have.

That's an interesting inference. My reading of it is that just about any time a tag could be reliably inferred, the tag is optional. The design suggests that the intention was to make it quick and easy to write.

What did HTML 1, 2, 3 do with regards to these, now optional, closing tags.

The DTD for HTML 2 is embedded in the RFC which, along with the original HTML DTD, has optional start and end tags all over the place.

HTML 3 was abandoned (thanks to the browser wars) and replaced with HTML 3.2 (which was designed to describe the then current state of the web).

What does HTML 5 do?

HTML 5 was geared towards "paving the cowpaths" from the outset.

And what should i do?

Ah, now that is subjective and argumentative :)

Some people think that explicit tags are better for readability and maintainability by virtue of being in front of the readers eyes.

Some people think that inferred tags are better for readability and maintainability by virtue of not cluttering up the editor.

2
  • 1
    +1 i hadn't thought of the notion of "reliably inferred". So that advocates the idea that there wasn't really any intention one way or the other. i assumed that the specification was attempting to be as compatible as possible with existing HTML content and HTML specifications.
    – Ian Boyd
    Jun 9, 2010 at 18:37
  • Sorry, Dave, i gave it to aslum; he needs the rep :) But you have the same idea, with more linked and quoted content. But nice answer.
    – Ian Boyd
    Jun 9, 2010 at 18:54
8

What does HTML 5 do?

The answer to this question is in the W3C Working Draft: http://www.w3.org/TR/html5/syntax.html#syntax-tag-omission

And what should i do?

It's a matter of style. I try to never omit end tags because it helps me to be rigorous and not omit tags that are necessary.

1
  • +1 for the link to the draft HTML 5 spec, and the appropriate section. But html 5 doesn't say one way or the other.
    – Ian Boyd
    Jun 17, 2010 at 16:03
8

If it is superfluous, leave it out.

If it serves a purpose (even a seemingly trivial purpose, such as appeasing your IDE or appeasing your eyes), leave it in.

It's rare in a well-defined spec to see optional items that do not affect behavior. With the exception of "comments", of course. But the HTML spec is less of a design spec, and more of a document of the state of current major implementations. So when an item is optional in HTML and it seems to serve no purpose, we may guess that optional nature is merely documentation of a quirk in specific browser.

Looking at the HTML-5 spec RFC section linked above, you see that the optional tags are strangely linked to the presence of comments! That should tell you that the authors are not wearing design hats. They are instead playing the game of "document the quirks" in major implementations. So we can't take the spec too seriously in this respect.

So, the solution is: Don't sweat it. Move on to something that actually matters. :)

5

I think the best answer is to include closing tags for readability or error detection. However, if you have lots of generated HTML (say, tables of data), you could save significant bandwidth by omitting optional tags.

2
  • 2
    Richard: When you have deeply nested structures, it's much easier for you to find errors because the closing tags give more information about intent.
    – Gabe
    Jun 9, 2010 at 19:02
  • 1
    I think "closing tags give more information about intent" is the best concise answer on this question. Argues a good clear reason one way or the other. Jan 4, 2015 at 3:55
4

My recommendation is that you omit most optional close tags, and all optional attributes that you can get away with. Many IDEs will complain so you may not be able to get away with omitting some of these but it is generally better for smaller file size and less clutter. If you have code generators definitely omit end tags there because you can get some good size reduction from it. Usually it doesn't really matter one way or the other.

But when it does matter then act on it. On some recent work of mine I was able to reduce the size of my rendered HTML from 1.5 MB to 800 KB by eliminating most of the generated end and redundant value attributes for the open tag, where the text of the element was the same as the value. I have about 200 tags. I could implement this some other way entirely, but that would be more work ($$$), so this allows me to easily make the page more responsive.

Just out of curiosity I found that if I removed quotes around attributes that didn't need them I could save 20 KB, but my IDE (Visual Studio) doesn't like it. I also was surprised to find that the really long ID that ASP.NET generates account for 20% of my file.

The idea that we could ever get any relevant fraction of HTML strictly valid was misguided in the first place, so do whatever works best for you and your customers. Most tools that I have ever seen or used will say they generate xhtml, but they don't really work 100%, and there isn't any benefit to strict adherence anyway.

2
  • I can hardly accept omitting optional end-tags, but I find it a rather bad idea to omit quotes on attributes. You are risking your site to break in some browsers that way. If you have 800kb html files you are doing something severely wrong.
    – Christoph
    Oct 26, 2012 at 20:41
  • 2
    @Christoph: Omitting optional end tags (like </p> or </li>) is perfectly fine according according to HTML specification. If the browser doesn't understand that, then it's problem with the browser.
    – 0..
    Apr 21, 2013 at 18:33
2

Personally, I'm a fan of XHTML and, like ghoppe, "I try to never omit end tags because it helps me to be rigorous and not omit tags that are necessary."

but

If you're deliberately using HTML 4.n, one can't argue that including them makes it easier to consume the document, as the notion of well-formedness as opposed to validity is an XML concept, and you lose that benefit when you forbid certain close tags. So the only issue becomes validity... and if it's still valid without them... you might as well save the bandwidth, no?

2

Using end tags makes dealing with fragments easier because their behaviour is not dependant on sibling elements. This reason alone should be compelling enough. Does anyone deal with monolithic html documents anymore?

1

In some curly bracket languages like C#, you can omit the curly braces around an if statement if its only two lines long. for example...

if ([condition])
    [code]

but you can't do this...

if ([condition])
    [code]
    [code]

the third line won't be a part of the if statement. it hurts readability, and bugs can be easily introduced, and be difficult to find.

for the same reasons, i close all tags. tags like the img tag do still need to be closed, just not with a separate closing tag.

2
  • Could you give example of HTML that is so tricky? In my experience optional end tags aren't as much deceptive.
    – Kornel
    Jun 9, 2010 at 18:48
  • I remember having a problem with IE7 a few years ago where i found an opening li tag on a separate line from the text it contained, with no closing li, IE7 treated all bullets like one big bullet. putting the tag and text on one line, or closing the tag, would fix the problem. I can't seem to repro this now, though, so it probably also had something to do with the css in play. but i wouldn't blame you for taking this as an "i totally have a girlfriend...in Canada!" story.
    – MiguelR
    Jun 11, 2010 at 17:01
0

Do whatever you feel makes the code more readable and maintainable.

Personally I would always be inclined to close <td> and <tr>, but I would never bother with <li>.

3
  • 1
    i was hoping for some guidance over the original design decision, and that they would have done x if they could have.
    – Ian Boyd
    Jun 9, 2010 at 18:18
  • 1
    What's the difference between <td> and <li> that makes you not bother with <li>? To me, there's little difference.
    – ghoppe
    Jun 9, 2010 at 18:26
  • There's no technical difference, it's purely subjective. I feel like I can read the HTML better if I close td and tr. But I've never felt the need with li. Jun 10, 2010 at 10:50
0

If you were writing an HTML parser, would it be easier to parse HTML that included optional closing tags, or HTML that doesn't? I think the optional closing tags being present would make it easier, as I wouldn't have to infer where the closing tag should be.

For that reason, I always include the optional closing tags - on the theory that my page might render faster, as I'm creating less work for the browser's HTML parser.

5
  • 1
    I disagree; the notion of well-formedness as opposed to validity is an XML-only concept and becomes irrelevant when you have elements whose close tags are forbidden. Jun 9, 2010 at 21:42
  • 1
    I understand that, but the rendered DOM element has both a beginning and an end, even if your HTML tag doesn't. If you include a <li> tag with no closing tag, at some point the browser is going to have to decide where the element ends, and act as if you had put an end tag at that point. This may be a relatively trivial amount of logic, but "some" is still more than "none" and I don't think it's unreasonable to suppose that leaving out optional end tags makes more work for the browser than including them. Jun 9, 2010 at 23:46
  • It's an interesting point but I still disagree; the close tags are optional as they would be required and thus implicit according to validation rules... so when the parser reaches a point where there has to be a closing tag according to validation, couldn't it be argued that the task of consuming a closing tag (when present) would just slow it down? Jun 10, 2010 at 14:14
  • @Richard - I guess that depends on the actual implementation in a particular browser, but I have a hard time crediting the idea that being explicit about where you want an element to end would be worse for performance than telling the browser to figure it out for you. Jun 10, 2010 at 16:44
  • @RichardJPLeGuen I guess, it all depends on how exactly the rules look like. When you're closing a </table> and your stack contains <table><tbody><tr><td>, then you can simply close everything till you match the <table>. Similarly for opening <p> in a non-clock context. But there may be much harder cases, I don't know.
    – maaartinus
    May 27, 2014 at 3:55
-2

For forbidden closing types use syntax like: <img /> With the /> to close the tag which is accepted in xml

1
  • 1
    It doesn't work in HTML4 (it matches obscure SGML syntax that does something slightly different). In HTML5 it's allowed, but meaningless.
    – Kornel
    Jun 9, 2010 at 18:43

Not the answer you're looking for? Browse other questions tagged or ask your own question.