Well-Formedness - Refactoring HTML: Improving the Design of Existing Web Applications - page 84

Remove Overlap
Close every element within its parent element.
This is <strong><em>very important</strong></em>!
<p>Sarah answered, <q>I'm really not sure about this.</p>
<p>Maybe you should ask somebody else?</q> Then she
sat down.
</p>
This is <strong><em>very important</em></strong>!
<p>Sarah answered, <q>I'm really not sure about this.</q>
</p>
<p><q>Maybe you should ask somebody else?</q> Then she
sat down.
</p>
Motivation
Different browsers do not build the same trees from documents containing overlapping elements. Consequently,
JavaScript can work very differently than you expect between browsers.
Furthermore, small changes in a document with overlap can make radical changes in the DOM tree that even a
single browser builds. Consequently, JavaScript built on top of such documents is fragile. CSS is likewise fragile.
JavaScript, CSS, and other programs that read a document's DOM are hard to create, debug, and maintain in
the face of overlapping elements.
Potential Trade-offs
Sometimes the nature of the text really does call for overlap—for instance, when a quote begins in one
paragraph and ends in another. This comes up frequently in Biblical scholarship, for instance. Not all text fits
neatly into a tree.
Unfortunately, HTML, XML, and XHTML cannot handle overlap in any reasonable fashion. If you're doing
scholarly textual analysis, you may need something more powerful still. However, this is rarely a concern for
simple web publication. You can usually hack around the problem well enough for browser display by using more
elements than may logically be called for.
Mechanics
A validator will report all areas where overlap is a problem. However, overlap is so confusing to tools that they
may not diagnose it properly or in an obvious fashion. Different validators will report problems in different
locations, and a single validator may report several errors related to one occurrence. Sometimes the problem
will be indicated as an unclosed element or an end-tag without a start-tag, or both. For example:
overlap.html:10: parser error : Opening and ending tag
mismatch: q line 10 and p
<p>Sarah answered, <q>I'm really not sure about this.</p>
^
overlap.html:11: parser error : Opening and ending tag