There.
Welcome back.
So this lesson is going to be very quick.
We're just talking about two tags the DIV tag and the spand tag and we really can't talk about much
as far as what they do and how we use them until we get to see assess where we can style things.
But I just want to introduce them now because I am going to show you things using divs and spans.
In the next few videos and I didn't do a great job actually of explaining it in the first draft of this
course.
So I went back and added this in an after the fact after the Course was published.
I saw a few questions that I noticed maybe I could clear up if I just did a better job explaining Dave's
earlier on.
OK.
So let's get started talking about divs and spans.
The first thing I'll say is that both of them as I mentioned are not that useful until we actually get
to styling elements.
But what they do is they allow you to group content together so a div according to MT-NW is just a generic
container.
So it's just a it's a way of grouping things together as an example I'm not saying that this is a div
right here but this could be a div just a box around some content.
It looks like some text here some images and some more text to group that altogether and give it a big
border or give it a background excuse me you can do that with a div.
Again we haven't talked about how you do that just yet but the idea is that you can just group things
together.
So you'll be seeing me use divs a lot in this course going forward.
Let me just show you a quick example.
So if I add some text here and this is actually something that one of the students in this course pointed
out in the discussion forum.
I didn't know about which is nice if you just type Lorem and hit tab.
It will give us Lorem Ipsum basically just a bunch of sample text placeholder text.
So I'm going to use this make two of those.
And then also add in an H1 and let's say that this H-1 it doesn't really matter or just put anything
there.
But let's say that this is a paragraph
and I want to group these two things together.
The H-1 in the paragraph let's say eventually again we can't do it now but eventually I want to have
a box around is a border and orange border.
But it doesn't include this one.
What I can do is just group them together in a div tag so d v
and save.
And if I refresh the page or actually open it in the first place it's not going to look different at
all.
It's not going to look like anything actually because there is no styling for us to see all that's happened
is that these two things are now grouped in a container just a generic box a container to hold them
together that we can then go style later.
So if I gave that div a background if I made it have a yellow background that yellow background would
go roughly around this but it wouldn't include any of the second paragraph.
So that's a div span on the other hand is also a generic container.
But there's a key difference.
So let me start with an example here.
Let's say I wanted to highlight some of these words right here.
Ipsum door.
Whatever whatever I want to make this yellow rather than black so the rest of the text is black.
But I want to highlight this as yellow and make the font bigger or something.
Again we don't know how to do that yet.
But the idea is I would need a tag around this and if I put a div right there which is a generic container
ups and I save and refresh you'll see that it gets knocked onto a new line and that's because a div
is a block level element.
So that means that it takes up its own line just like a paragraph does.
When you add a paragraph in everything after that paragraph is pushed down to a new line.
So a div is a block level generic container.
If I replace this with a span this is not going to be impressive at all because how can I see anything
really you will see a change here but it will just look like a regular paragraph so I'm going to refresh
and there is a container.
Now there's a generic span around this content that's not doing anything.
Unlike a div though it's an inline container.
So span is for basically grouping content selecting content in line and a div is another way of grouping
content.
But it's a block level element.
So I know this is a little bit theoretical at this point.
It's kind of hard to understand the utility of.
But very soon when we get into C Ss we'll be able to say something like go find that span I added in
and make it fifteen point font and yellow or go find that div I added in and give it an orange border
and whatever we do and then we end up with an orange border around this content.
All right great divs span's generic containers.
One is black one is in line