Web Design in a Nutshell, 3rd Edition

Nested Elements

HTML elements may contain other elements. This is called nesting, and to do it properly, the entire element (including its markup) must be within the start and end tags of the containing element (the parent). Proper nesting is one of the criteria of a well-formed document (a requirement for XHTML).

In this example, list items (li) are nested within an unordered list element (ul).

<ul>
  <li>Example 1</li>
  <li>Example 2</li>
</ul>

A common mistake made when nesting elements is to close the parent element before the element it contains (its child) has been closed. This results in an incorrect overlapping of elements that would make an XHTML document malformed and may cause rendering problems for HTML documents. In this example, the elements are incorrectly nested because the strong element should have been closed before the a (anchor).

INCORRECT:  <a href="#">Click <strong>here.</a></strong>