FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Parent-Child Relationships

[SOUND] While we touched on parent-child relationships in the previous episode, we need to focus a little more specifically on it today. So, the most adult, or the oldest, or the ancestor of our page would be the HTML element. And an easy way we can tell that is because it is not indented at all. So everything else is a child of the HTML element. Let's view it in terms of the body element of our page. Notice here how the h1 is not indented. But it probably should be. Now what you'll find is, it's not required. And a lot of coders prefer not to do it because there's only so much screen real estate available. So while you should do this, if you have a lot on your page, some coders will not do it because it's implied that the body is the parent. So, note that everything I'm covering today is not required their best practices. The H1 element is a child of the body element. But what if within the H1 element, I'm gonna add a little bit more so I will separate it on it's own line and then I will say within a new tag and I'm gonna say. Span, this is a simple wrapper and it doesn't have any specific formatting, but it allows you to target a specific amount of text. So we will take today and wrap it within here like so. When would you ever do this? If there is no formatting to span, why would you do it? And let's say you wanted to write, Things I Must Do Today, but you wanted the word today to be blue and everything else to be black. Well, you need a way then, to target just the word today and nothing else. So we can do that by using a number of elements, but it's common to use a span. And that way we can say, eventually, when you start learning about styling, you can say, look for the heading one element and then try to see if there's a span element and if there is within it, make that value alone, meaning this word, blue. Back to our parent-child relationships. This span element is now a child. Of the H1 element, and I'm gonna zoom in just a touch. However, the H1 is a child of the body element. So think of it as a family tree. So this is the oldest and then this person is the HTML's child and then the H1 is the child of the body. The span is a grandchild of the HTML, or, we don't use grandparent and grandchild, we use ancestor and descendant. So span, is a descendent of the body element. H1 is not a descendent of the body, technically it is but more appropriately we would say a child, it is a direct child of the body. Because this does not have any parent. That is not the body. So it's the child of the body. This is the descendant of the HTML element. The span is a descendant of the HTML. The span is a child of the H1. This strong tag right here, if it's easier, will put it on its own line. This strong is a child of the paragraph element, but is it a strong h child of the h1 element? No, because note, this paragraph is not nested within the h1 tag. So the strong is a child of the paragraph tag. It is a descendant of the body tag, but it has 0 relation to the H1 element. So that begs the question now, what is the relation between the paragraph element to the Heading 1 element? Like brother and sister, they are siblings. This H1 has a sibling of the P tag, it's also a sibling of the definition list. Now this might be confusing to you or you might be thinking. What does this really serve me? And right now at this point it's more important for you to. Understand that this is a child of this. But in the future you will learn that it is vital specifically when you are, for example, using something like JavaScript to search through your documents. It's important to understand relationships. So I want you to create just a bit of code, anything you want and try to correctly answer the relationship between each one. We'll do this last one together before we end for the day. The definition term is a child of the definition list. The definition details are a child of the definition list as well. These two are siblings and how do we know for sure they are siblings because this definition details is not nested within the term. If it was like that, then this in fact would be a child but that would be bad markka. So these are siblings to one another. The definition list is a sibling to this unordered list. This h1 is a descendant of the ul and, alternatively, the ul is an ancestor of the h1 element. So that's a lot of relationships. Hopefully, that stuck. If not, go back and watch it. And then try to figure out these on your own, today.

Back to the top