1
00:00:00,330 --> 00:00:00,640
There.

2
00:00:00,660 --> 00:00:01,610
Welcome back.

3
00:00:01,920 --> 00:00:04,060
So this lesson is going to be very quick.

4
00:00:04,200 --> 00:00:10,680
We're just talking about two tags the DIV tag and the spand tag and we really can't talk about much

5
00:00:11,040 --> 00:00:16,480
as far as what they do and how we use them until we get to see assess where we can style things.

6
00:00:16,560 --> 00:00:22,410
But I just want to introduce them now because I am going to show you things using divs and spans.

7
00:00:22,410 --> 00:00:27,110
In the next few videos and I didn't do a great job actually of explaining it in the first draft of this

8
00:00:27,120 --> 00:00:27,640
course.

9
00:00:27,690 --> 00:00:31,820
So I went back and added this in an after the fact after the Course was published.

10
00:00:31,950 --> 00:00:37,890
I saw a few questions that I noticed maybe I could clear up if I just did a better job explaining Dave's

11
00:00:37,920 --> 00:00:38,800
earlier on.

12
00:00:39,000 --> 00:00:39,340
OK.

13
00:00:39,360 --> 00:00:42,030
So let's get started talking about divs and spans.

14
00:00:42,060 --> 00:00:47,490
The first thing I'll say is that both of them as I mentioned are not that useful until we actually get

15
00:00:47,490 --> 00:00:49,770
to styling elements.

16
00:00:49,770 --> 00:00:56,760
But what they do is they allow you to group content together so a div according to MT-NW is just a generic

17
00:00:56,760 --> 00:00:58,060
container.

18
00:00:58,320 --> 00:01:04,440
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

19
00:01:05,040 --> 00:01:09,210
right here but this could be a div just a box around some content.

20
00:01:09,210 --> 00:01:15,420
It looks like some text here some images and some more text to group that altogether and give it a big

21
00:01:15,420 --> 00:01:20,380
border or give it a background excuse me you can do that with a div.

22
00:01:20,400 --> 00:01:24,960
Again we haven't talked about how you do that just yet but the idea is that you can just group things

23
00:01:24,960 --> 00:01:25,780
together.

24
00:01:25,950 --> 00:01:29,660
So you'll be seeing me use divs a lot in this course going forward.

25
00:01:29,760 --> 00:01:32,450
Let me just show you a quick example.

26
00:01:32,520 --> 00:01:40,290
So if I add some text here and this is actually something that one of the students in this course pointed

27
00:01:40,290 --> 00:01:41,750
out in the discussion forum.

28
00:01:41,790 --> 00:01:47,410
I didn't know about which is nice if you just type Lorem and hit tab.

29
00:01:47,590 --> 00:01:53,170
It will give us Lorem Ipsum basically just a bunch of sample text placeholder text.

30
00:01:53,280 --> 00:01:58,100
So I'm going to use this make two of those.

31
00:01:58,440 --> 00:02:06,470
And then also add in an H1 and let's say that this H-1 it doesn't really matter or just put anything

32
00:02:06,470 --> 00:02:06,890
there.

33
00:02:07,020 --> 00:02:08,990
But let's say that this is a paragraph

34
00:02:12,060 --> 00:02:14,300
and I want to group these two things together.

35
00:02:14,310 --> 00:02:19,560
The H-1 in the paragraph let's say eventually again we can't do it now but eventually I want to have

36
00:02:19,560 --> 00:02:22,150
a box around is a border and orange border.

37
00:02:22,260 --> 00:02:24,230
But it doesn't include this one.

38
00:02:24,270 --> 00:02:28,630
What I can do is just group them together in a div tag so d v

39
00:02:33,090 --> 00:02:35,340
and save.

40
00:02:35,460 --> 00:02:41,700
And if I refresh the page or actually open it in the first place it's not going to look different at

41
00:02:41,700 --> 00:02:42,350
all.

42
00:02:42,430 --> 00:02:48,180
It's not going to look like anything actually because there is no styling for us to see all that's happened

43
00:02:48,180 --> 00:02:53,580
is that these two things are now grouped in a container just a generic box a container to hold them

44
00:02:53,580 --> 00:02:56,540
together that we can then go style later.

45
00:02:56,580 --> 00:03:01,800
So if I gave that div a background if I made it have a yellow background that yellow background would

46
00:03:01,800 --> 00:03:07,350
go roughly around this but it wouldn't include any of the second paragraph.

47
00:03:07,350 --> 00:03:12,440
So that's a div span on the other hand is also a generic container.

48
00:03:12,630 --> 00:03:14,840
But there's a key difference.

49
00:03:14,910 --> 00:03:17,640
So let me start with an example here.

50
00:03:17,910 --> 00:03:23,520
Let's say I wanted to highlight some of these words right here.

51
00:03:23,670 --> 00:03:24,600
Ipsum door.

52
00:03:24,660 --> 00:03:30,840
Whatever whatever I want to make this yellow rather than black so the rest of the text is black.

53
00:03:30,930 --> 00:03:34,510
But I want to highlight this as yellow and make the font bigger or something.

54
00:03:34,590 --> 00:03:36,090
Again we don't know how to do that yet.

55
00:03:36,450 --> 00:03:43,410
But the idea is I would need a tag around this and if I put a div right there which is a generic container

56
00:03:45,390 --> 00:03:54,960
ups and I save and refresh you'll see that it gets knocked onto a new line and that's because a div

57
00:03:54,990 --> 00:03:57,120
is a block level element.

58
00:03:57,120 --> 00:04:01,410
So that means that it takes up its own line just like a paragraph does.

59
00:04:01,410 --> 00:04:06,960
When you add a paragraph in everything after that paragraph is pushed down to a new line.

60
00:04:07,230 --> 00:04:10,470
So a div is a block level generic container.

61
00:04:10,470 --> 00:04:17,430
If I replace this with a span this is not going to be impressive at all because how can I see anything

62
00:04:17,430 --> 00:04:22,410
really you will see a change here but it will just look like a regular paragraph so I'm going to refresh

63
00:04:23,930 --> 00:04:25,340
and there is a container.

64
00:04:25,340 --> 00:04:30,140
Now there's a generic span around this content that's not doing anything.

65
00:04:30,540 --> 00:04:33,860
Unlike a div though it's an inline container.

66
00:04:33,870 --> 00:04:40,680
So span is for basically grouping content selecting content in line and a div is another way of grouping

67
00:04:40,680 --> 00:04:41,200
content.

68
00:04:41,310 --> 00:04:42,930
But it's a block level element.

69
00:04:43,200 --> 00:04:45,840
So I know this is a little bit theoretical at this point.

70
00:04:45,970 --> 00:04:48,820
It's kind of hard to understand the utility of.

71
00:04:48,990 --> 00:04:55,290
But very soon when we get into C Ss we'll be able to say something like go find that span I added in

72
00:04:55,380 --> 00:05:03,830
and make it fifteen point font and yellow or go find that div I added in and give it an orange border

73
00:05:04,010 --> 00:05:08,060
and whatever we do and then we end up with an orange border around this content.

74
00:05:08,070 --> 00:05:11,020
All right great divs span's generic containers.

75
00:05:11,190 --> 00:05:12,510
One is black one is in line