What are the Parent, Child, Sibling, and Ancestor Relationships in HTML?
Today's Contents:
• Parent
• Child & Descendant
• Sibling
• Ancestor
Hello, Radiant Guys! How are you doing, everyone? Wow, It's very cold today. I hope everybody stays warm.In this post, I'm going to talk about the relationships between elements in HTML.
"💬I am running a Google Blogger with the Dynamic Views theme installed."
When studying HTML language, you will sometimes come across the terms like the "parent", "child", or sibling. When I first found these terms, I felt like it was an awkward feeling. I thought that "Do they have families like humans"? Is there anyone who thought like me there?
In fact, the concepts of the parent, child, and sibling are used importantly in defining the structure of HTML. They are essential for styling with CSS, and scripting with JavaScript while targeting specific elements.
Therefore, Understanding the relationships between tags in HTML is very useful when designing web structures or applying styles. Here's a concise explanation of the relationships between HTML tags with examples.
| Parent
・A parent tag is the tag that directly encloses another tag. As the example below shows, <div> is the parent of <p>.
**
HTML
<div><p>I am a child.</p>
</div>
| Child & Descendant
・A child tag is the tag that directly inside a parent, while descendants include all nested tags within the parent. As the example below shows, <p> is a child of <div>,and <span> is a descendant of <div>.
HTML
<div><p>I am a child. <span>I am a descendant.</span>
</p> </div>
| Sibling
・Sibling tags share the same parent and are on the same hierarchical level. As the example below shows, <h1> and <p> are siblings because they share the same parent, <div>.
HTML
<div><h1>I am the first sibling.</h1>
<p>I am the second sibling.</p> </div>
| Ancestor
・An ancestor is a tag that contains all the higher tags in the hierarchy, directly or indirectly. It includes the parent, grandparent, and so on, up the hierarchy. As the example below shows, <div> is an ancestor of <span>.
**HTML
<div><p>I am a direct parent. <span>Who is my ancestor?</span>
</p> </div>
<p> is considered both the direct parent of <span> and an ancestor tag. <div> is considered both the grandparent of <span> and an ancestor tag.
Congratulations (╹ڡ╹ )
How was today's post? The content we covered today is not that difficult, but it is a very basic concept for learning more diverse coding methods in the future, so I think it would be good to understand it well. I hope today's post was of some help to someone, and I will see you next time.