28

Given the following HTML:

<div style="background-color:green"/>
<div>text</div>

Most browsers display the text in green which indicates that the <div/> shorthand is not recognized as 'ended' and it spans to wrap the 2nd <div>.

Or is this what the standard says?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Edward
  • 289
  • 1
  • 3
  • 3

2 Answers2

74

Strictly speaking, the <div> element is a non-void/non-empty element in HTML, i.e. it is not meant to self-close. Although <div /> is valid XHTML — due to /> being indicative of a self-closing (or empty) XML element — it's interpreted by common HTML parsers and some validators as an unclosed opening tag, and is therefore invalid HTML 4.01 and HTML5.1

In fact, running your given HTML fragment through the W3C validator (as HTML5) results in this error message:

Self-closing syntax (/>) used on a non-void HTML element. Ignoring the slash and treating as a start tag.

Hence what you see.

From the HTML5 spec (in the first link):

A non-void element must have an end tag, unless the subsection for that element in the HTML elements section of this reference indicates that its end tag can be omitted.

Following that, the subsection for the <div> element states:

A div element must have both a start tag and an end tag.

This makes <div> unlike <p> or <li> which are known to not always require an end tag.

If you place a <p> immediately after an unclosed <p>, it implicitly closes that previous <p>. Likewise goes for <li>. This is because you can't directly nest multiple paragraphs or list items together. However, <div> is nestable to any depth. Thus, an opening <div> tag does not close a previously-unopened <div> tag.

And that's why you're seeing what you're seeing.

1 In true XHTML pages (serialized as XML by serving as application/xhtml+xml), the first <div /> element will not expand to wrap the second <div>text</div> element. Instead, as XHTML it will follow XML rules and contain itself as an empty element, rather than follow HTML tag soup rules and be interpreted as an opening tag by itself.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    tl;dr version http://stackoverflow.com/questions/6753748/div-div-vs-div/6753769#6753769 – BoltClock Aug 16 '11 at 16:53
  • It still doesn't make sense to me that I can't choose to close my `div` elements with `/>` - any idea why that is strictly disallowed? I don't like making placeholders like `
    `. If I want the element to be initially empty, I should be allowed to self-close the element!     – Josh M. Apr 17 '13 at 00:39
  • 1
    @Josh M.: It's because legacy HTML parsers were never programmed to self-close elements with `/>` in the first place. The validator says that `/>` is treated as `>` because that's exactly what HTML parsers do. Changing this behavior now in an HTML5 parser is not an option because it would break too many sites that depend on the royal mess that is HTML tag soup. As mentioned in my first footnote though, if you really want to self-close "empty" elements (as opposed to truly void elements) in your pages, serialize your pages as XML and you'll be free (in fact, *required*) to follow the XML rules. – BoltClock Apr 17 '13 at 05:37
  • @Josh M.: The main downside of doing that, however, is that you'll lose support for IE < 9 because those versions can't process XHTML. – BoltClock Apr 17 '13 at 05:48
  • @BoltClock It seems that when the HTML5 spec came out it would have been the perfect time to "fix" the self-close issue and let the renders follow suit. But it's a minor gripe, really...thanks. – Josh M. Apr 17 '13 at 14:25
  • @JoshM. But you _can_ use self-closing elements. If you use XHTML. HTML is a different language from XHTML, and one of them doesn't have self-closing elements while the other has. And you have the choice. The question is not why HTML doesn't have all the XHTML features, but why you won't use XHTML if you want them. – Mr Lister Apr 22 '14 at 19:47
0

The tag needs a separate closer at this point - maybe that may be appended.

Note that in a proper syntax, even self-closing tags need an extra space (<br />, not <br/>)

jeffkee
  • 5,106
  • 12
  • 44
  • 76
  • 3
    Nope, `
    ` is completely valid XHTML/XML. The space is insignificant. Interestingly, you only see the space in XHTML-related documents, while articles about any other kind of XML seem to omit it.     – BoltClock Mar 28 '11 at 07:36
  • Hmmm yeah in all the "official" documentations & instructions, I've always seen the self-closing slash preceded by a space.. Strange! – jeffkee Mar 28 '11 at 07:37
  • 1
    The space before the slash was a workaround for a parsing bug in an incredibly old browser that is no longer in use in any significant number (but I can't remember which browser it was off the top of my head). – eyelidlessness May 02 '11 at 01:53
  • 2
    @eyelidlessness: Netscape 4. See http://stackoverflow.com/questions/305431/is-it-still-necessary-to-put-a-space-before-closing-an-empty-element-in-xhtml Note that XHTML empty elements still validate whether you have a space or not. The space is only there as a workaround as you said, and is not mandatory. – BoltClock May 07 '11 at 06:37