Why do browsers think this tag isn’t immediately ended?

by

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.

More Related Contents:

  1. Redirect from an HTML page
  2. Why can’t the tag contain a tag inside it?
  3. Setting the width of inline elements
  4. Why do browsers insert tbody element into table elements?
  5. How do I link to part of a page? (hash?)
  6. Can an HTML element have multiple ids?
  7. A Space between Inline-Block List Items [duplicate]
  8. Margin-Top push outer div down
  9. display: inline-block extra margin [duplicate]
  10. RegEx match open tags except XHTML self-contained tags
  11. Add centered text to the middle of a horizontal rule [duplicate]
  12. White space at bottom of anchor tag
  13. HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?
  14. JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used
  15. 100% Min Height CSS layout
  16. Do we still need forward slashes when closing void elements in HTML5?
  17. Making the main scrollbar always visible
  18. Is HTML5 valid XML?
  19. How to make div occupy remaining height?
  20. Best Way to View Generated Source of Webpage?
  21. Tick symbol in HTML/XHTML
  22. Valid content-type for XML, HTML and XHTML documents
  23. Change checkbox check image to custom image
  24. Specifying Tab-Width?
  25. How to use an tag inside a in the middle of a text? [duplicate]
  26. Safari anchors on links not working
  27. Padding the top and the bottom of inline element
  28. HTML list-style-type dash
  29. Is div inside list allowed? [duplicate]
  30. What’s the point of valid CSS/HTML?

Leave a Comment