HTML Tutorials - Herong's Tutorial Examples - Version 2.01, by Dr. Herong Yang
Using Nested Elements
This section describes how to use nested elements. Partially nested elements are not allowed.
Some HTML elements are allowed to be included in the content parts of other elements to form nested elements.
Which elements are allowed to have other elements nested in their contents are explicitly defined in the HTML specification. But there are some general rules you can follow:
1. Empty content elements do not allow any sub elements in their contents, because they are not allowed to have contents at all. For examples, "br", "hr", "input", and "img" are empty content elements.
2. Phrasing content elements like "strong", "em", "small", etc., do allow other phrasing content elements to be nested in their contents. Here is a good example:
"em" can be nested in "strong" to represent <strong>strong importance and <em>stress emphasis</em></strong> contents.
3. Flow content elements like "p", "pre", "blockquote", etc., do allow phrasing content elements to be nested in their contents. Here is a good example:
<p>The <small>small element</small> represents side comments such as small print.</p>
4. Section content elements like "body", "article", "section", etc. do allow flow content elements to be nested in their contents. Here is a good example:
<section> <h5>Granny Smith</h5> <p>These juicy, green apples make a great filling for apple pies.</p> </section>
5. Many special elements like "table", "ul", "ol", etc. are defined to have their own nested sub elements. Here is a good example:
<table> <tr><td>Weekday</td><td>Weekend</td></tr> <tr><td>Closed</td><td>Open</td></tr> </table>
6. When 2 elements are nested, one element must be fully enclosed inside the other. Partially nested elements are not allowed. Here is a bad example of partially nested elements:
The <small>small <em>element</small> represents</em> side comments such as small print.
Last update: 2014.
Table of Contents