This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "HTML Tags - Grouping" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian Holt: So, grouping. We kinda talked a little bit about this with our car example. But let's look at another example of this, right? It's a good idea to group like ideas together. So if you were doing a blog post the kind of the semantic that makes sense kind of idea is to group every blog post together.
[00:00:26] You have blog post one and it is contained in its own container and your blog post two and its contained in it's own container. Is to group like things together.
>> Brian Holt: All right, so.
>> Brian Holt: This is a lot of text. You kind of get the point. Let's just make this a lot bigger.
[00:00:54]
>> Brian Holt: Okay, so this is just a contrived example, and notice I have blog post one and I have blog post two, right. And they just both have a bunch of Lorem ipsum text in there, right? Lorem ipsum text for those of you not familiar is essentially text that is there to hold space but it doesn't actually mean anything.
[00:01:12] It's just meant to be a non-distraction but there for styling purposes.
>> Brian Holt: Okay, so I have a div right here, right? And this div encompasses this h1 and another div, right? And inside of that div, I have all of my paragraphs, right? So I'm kind of grouping those together, right, because the h1 is different than the paragraphs.
[00:01:43] And the divs, this div right here, encompasses all of the text. So notice that I'm using divs just to kind of group like ideas together, right? So this is the first div and it encompasses one blog post and there's the second div here that encloses the second blog post.
[00:02:01] And I also have div's encompassing these paragraphs. So notice again, we talked about div's kinda like Tupperware, right? In this particular case this Tupperware is a different kind of Tupperware from this one, all I'm saying is they're both have some sort of grouping to them. You kinda follow my logic there?
[00:02:25] It's really circular I realize. But eventually, we'll start putting labels on these. These are kinda like black box Tupperwares, right? You have no idea what the hell they are, right? But there's something in there, and they're all alike. I'll teach you how to mark your Tupperware here in just a second.
[00:02:44] In fact I believe it's the next slide.
>> Nina Zakharenko: It's like those lunch boxes that have the little Tupperwares inside.
>> Brian Holt: Yeah, exactly. Bento boxes, kind of, right? There you go. We're making bento boxes. I like that example too. This is gonna make me really hungry really fast. So yeah.
[00:03:05] That's kind of the idea here, is we're grouping like things together. Does that kind of make sense? It's organizational, right? Like I can remove this div right here, I could remove this div right here as well, in fact, all the div's could be gone from this page, and it would look exactly the same.
[00:03:25] But here like, even if I haven't told you what it is, there's some grouping here, some grouping going on. This is going to, again, to save you just bundles of time later. These are very small examples when you start working on a webpage that has 10,000 lines, right?
[00:03:44] Grouping stuff together makes it much easier to find the thing that you're looking for.
>> Brian Holt: Okay. Questions on that? These are kind of best practices kind of things as opposed to requirement to make it display what you want it to display. As well later, when we start getting into CSS, right, the grouping becomes very important, right, because I wanna separate my blog posts, like I want to have them look different, right?
[00:04:14] So say I wanted to give them a grey background like split them 15 pixels from each other. Those divs live say like, take this group and separate it from this group. So we're kind of building up to this, I don't know some grand reveal where it was like, and surprise everything was useful.
[00:04:38] Now, continue doing it.