HTML and CSS Reference
In-Depth Information
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.
This is <strong><em>very important</em></strong>!
<p>Sarah answered, <q>I'm really not sure about this.</q>
<p><q>Maybe you should ask somebody else?</q> Then she
sat down.
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.
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
Search WWH ::

Custom Search