HTML Relationship Demo
<h1>My first section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Proin cursus varius justo, in fringilla ligula tempor sit amet.</p>
<p>Phasellus laoreet vulputate velit, et dictum erat ornare at.</p>
<h1>My second section</h1>
<p>Aliquam et consectetur purus.</p>
<p>Quisque quis dignissim sem, ac porttitor sapien.</p>

This example is interactive. If you hover over any tag you will see all tags that are related to it styled to match the definitions below.

For each term we define we include a list of the tags that have that relationship to the first section tag. If you hover over the first section tag the example should match the lists below.

Any tag that contains the current tag.
The tag that wraps the current tag. The parent of a tag is also an ancestor of that tag.
The current tag
Any other tags that are wrapped by the current tag's parent.
The tags that are wrapped by the current tag. The children of a tag are also descendants of that tag.
Any tag that is contained within the current tag.