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

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.

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