This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "HTML Audience Questions" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Speaker 1: And why would you use a div instead of a span?
>> Brian Holt: So I'm going to address that here in just one second, but the answer is you can't use a span there.
>> Brian Holt: Okay, so I'll address span right after this. Is there anymore questions as related to what just happened here?
[00:00:23] Okay, I'm just gonna throw out a disclaimer which I'll probably say several more times over the next 48 hours. If you feel like you're drinking from the fire hose, you totally are, right? This is just like spitting tons of information out here, because to get a basic foundation of web development, you have to understand a lot, right and it's kind of like once you have the foundation, then you can start moving up.
[00:00:50] So if you don't grasp everything like right now, which is why my wife hates talking to me about web development. It's okay, and it's just repetition, practice, and you're just gonna have your aha moment. It's like, okay, that's why that idiot was up there bumbling about this, right?
[00:01:07] Okay, so don't get too frustrated with yourself if you don't feel like you're getting it right away. In my opinion, no one gets it right away. I certainly didn't, like I.
>> Brian Holt: And I have to remind myself of that cuz I've been doing this for years now. So, we're okay.
[00:01:24] Breathe, okay. This is not yoga with Bryan. Okay, cool, let's talk a little bit about span since seems to be the hot topic. So we have divs and we have spans. They're related in the sense that they are these containers that are just containers that have no description to what's going to be in them.
[00:01:49] The big difference here is that a div is meant to encompass other things, right? So in this case, our div is encompassing RH2 or OL. It's going to encompass many things. The span just goes over a bit of text, right? So for example.
>> Brian Holt: Say I really like yeah, let's do that.
[00:02:15] We're gonna put it over all the Corollas. Or even better, models. Let's go over models. So
>> Brian Holt: You don't have to follow along with this if you don't want to, but whoops! Put the space there, okay. And Model S right there. So in this particular case what I've done is I've put a span around all of the models.
[00:03:02] Later we'll talk about CSS so if this doesn't make sense right away, that's okay. But say I wanted to make the models look different than the makes or the years in this case. In this particular case, I could do that because I've put spans around all of the models.
[00:03:23] And what I'm essentially saying here is span is just gonna go around like a little bit of text that you want to be different from the rest of the text, right. So, in this particular case, again, don't worry like we'll explain CSS like a couple hours. But let's say color red or something like that, right?
[00:03:43] So now notice that I've made all of the models look different than the rest of the text, right? That's why you would use a span. Kind of makes sense a little bit right, like it's just meant for a little span of text. Ha, there you go, that's why they call it a span, it's a little span of text.
[00:04:06]
>> Brian Holt: Cool, moving on? Moving on.
>> Brian Holt: Did I address your question there in the back with the awesome hat?
>> Speaker 3: I guess, is there still that block in line?
>> Brian Holt: Yeah, so we'll go over that ad nauseum when we go over in CSS, but divs are meant to encompass blocks right?
[00:04:31] And a blocks just like other elements that are blocks. Like for example a paragraph is a block, a div is a block, article, what I mentioned earlier that's a block. Whereas like there's span, there's like, there's one called e-m which just stands for emphasis. Like you notice this one is no longer red.
[00:04:52] It's now emphasized so it's italics. Or there's also strong which as you might guess is, come on, nope, slash strong, bold, right. So those are in line elements. Things that are meant to go around just like little pieces of text like spans, strongs and there's a couple other ones.
[00:05:22] So that's kind on the difference there is that a div is a block level element and that a span as an in line element meaning that it's kinda stays in line. But yeah, we'll address that more in CSS because that kind of talks more about style as opposed to, yeah, content.
[00:05:42] Which is what HTML, HTML is to describe content. So I guess what I'm saying is I'm going to give you an incomplete answer, [LAUGH] that's what I'm really trying to say.
>> Brian Holt: Okay, leave this page. Something else, I learned a lot about teaching. Sorry, go ahead.
>> Speaker 4: There's this question on why you used span instead of div for that particular.
[00:06:07]
>> Brian Holt: Shit, I closed it. All right, well let's just open CodePen back up. That's a great question. Here's your, I was following along while Nina was coding so.
>> Brian Holt: Go away. Okay,
>> Brian Holt: So let's say I have like just a paragraph that says like a paragraph of text, right, okay.
[00:06:39] So I have this just like random words, this is just going to be contrived example and let's say I want to do something special to the of, like every preposition needs to have a span around it. So, or needs to be like red instead of something else. So, I'd put a span right there.
[00:06:57] First of all, going back to semantic HTML. This is the more semantic way to do it, cuz you're just letting it know, I'm putting something in here and I just want to affect this particular piece of the text. That's what a span semantically means I say that because I can go in and I make a div act like a span.
[00:07:20] Right, like it's possible using the browser like the browser just like here's some good ideas but go ahead and shoot yourself in the foot I don't care. Which is kind of like a general theme for programming. But in this particular case if I would make that a div now.
[00:07:36] Right, is actually going to split the text up, because the div is saying like a paragraph, I want this to be different from the rest of my text, like it's a different container. And so it assumes the different container wants a new line. So you notice over here, it's actually split on different lines now, which is not what we were intending to do.
[00:07:56] We just wanted to make it stand out a little bit. Furthermore, I don't think you can put div's inside of paragraphs so this is actually not valid HTML. Right, because spans can go inside of paragraphs, div's can not go inside of paragraphs. And that's actually one of the rules of HTML.
[00:08:18] There you go.
>> Brian Holt: But again as a general theme, these are general rules to help yourself and you're welcome to break them, right? Like no one is gonna stand over your shoulder, well your three months self from now might stand over your shoulder and say you're an idiot, why did you do this?
[00:08:39] Just about all these rules can be broken if you want to. All right,
>> Brian Holt: Any more questions on that exercise? Cool so,
>> Brian Holt: So this was just a completed example if you wanted to see it.
>> Speaker 1: Bryan?
>> Brian Holt: Yeah?
>> Speaker 1: I have a question.
>> Brian Holt: Sure.
>> Speaker 1: So in the top here, and this a little, we have bullets in there, and under my favorite cars, we have numbers.
[00:09:17] How did you produce that part? How do you change from bullets to numbers, because all of mine are listed under numbers.
>> Brian Holt: Okay yeah, great question. So you notice here that I have an UL and I have an OL. So the UL is going to be bullets because it's implied that there's no border.
[00:09:38] It's an unordered list. So my guess is both of yours are OLs, right?
>> Speaker 1: Uh-huh. [LAUGH]
>> Brian Holt: Yeah, so if you put them in OLs, like if I change this for example right now to be an OL, all of a sudden now price is more and more important than eco-friendly.
[00:09:58]
>> Speaker 1: Okay.
>> Brian Holt: Make sense?
>> Speaker 1: [INAUDIBLE] [LAUGH]
>> Brian Holt: Cool.