Div Tags

[00:00:00]
>> Jen Kramer: All right, so we're gonna introduce a new tag today. We're actually probably gonna introduce several new tags today. But the very first tag that we're gonna learn about today is called the div tag. So you see it here in the HTML. Anyone know what the div tag is?

[00:00:14]
Have you heard of it before? What does it stand for?
>> Speaker 2: It makes a box. I don't know.
>> Jen Kramer: Makes a box. It's good. It's yet another tag that has a yet another box with it, which is awesome. What else?
>> Speaker 2: Division.
>> Jen Kramer: It is the division, okay, so the div tag stands for division.

[00:00:30]
>> Speaker 3: I just had a quick question, if we were gonna, the difference between div and section tag.
>> Jen Kramer: Okay, the difference between the div tag and the section tag. The div tag is just a generic box, we need a yet another box somewhere on the page, we're trying to combine some HTML elements, we wanna make a big box to go around those elements.

[00:00:50]
The div can be very handy for that. It doesn't add any meaning to the page at all. In fact, generally divs are used just for the purpose that I showed here. My div is holding a class, okay. The section tag has some meaning to it. So section, that's yet another tag, that's yet another box.

[00:01:08]
That implies that the information inside of that box is related in some way. It's a section of the webpage. Maybe it's a series of blog articles. Maybe it's a series of images. Maybe it's a bunch of links that's a section of the web page. We'll talk more about that too.

[00:01:23]
Yes.
>> Speaker 2: I get confused with section and articles.
>> Jen Kramer: Uh-huh.
>> Speaker 2: Which goes in which?
>> Jen Kramer: So now I'm third-
>> Speaker 2: Or is that later?
>> Jen Kramer: Here's two more tags for you. So that we just talked about section. There's another one that's called article, we'll get to that later on today too.

[00:01:39]
An article is what?
>> Speaker 3: Stand alone content.
>> Jen Kramer: It's a piece of stand alone content basically speaking, right. It's something that I could pull out of my whole webpage and put in a Word document and email to somebody and its still makes sense, right. It's a whole unit of content.

[00:01:55]
So articles usually consist of what kinds of features?
>> Jen Kramer: What might go in an article?
>> Speaker 2: A title.
>> Jen Kramer: Probably a title, which would be in a, probably a heading tag, right, some kind of heading tag. It's got what else usually in an article? Yeah?
>> Speaker 2: The author's name.

[00:02:13]
>> Jen Kramer: Maybe an author's name, maybe some paragraphs, maybe some images, right. That whole thing, a big unit of stuff, that would be an article. You're gonna see these tags in action. But for right now let's focus on our div tag, and let's focus on the HTML that I've given you here.

[00:02:29]
So we've got a div with a class of box one, all right, and that's going around one paragraph here. And then after that we have a div with a class of box two, and it's going around two more paragraphs here, okay. Yes.
>> Speaker 2: So if you didn't have the div tags, the HTML, it would look the same.

[00:02:49]
>> Jen Kramer: Yep.
>> Speaker 2: Not HTML, the website would look the same.
>> Jen Kramer: Exactly, so if I didn't have those div tags in there right now there would be no difference in the way that this web page looks. It just looks like three really long boring paragraphs, right. Okay, so let's go on ahead and start exploring some of these properties.

[00:03:09]
>> Speaker 3: I have a quick question.
>> Jen Kramer: Sure.
>> Speaker 3: If you look at the source code for many websites, every element is surrounded by div, is that best practice?
>> Jen Kramer: No, it's a terrible practice.
>> Speaker 3: Okay.
>> Jen Kramer: That's a horrible practice. We call it divitis. There are some some people that put way too many divs on their web pages, yeah.