1
00:00:00,170 --> 00:00:03,320
Images add a lot of interest and
flare to web pages, but

2
00:00:03,320 --> 00:00:06,500
most websites still have lots and
lots of words on them.

3
00:00:06,500 --> 00:00:07,940
Without proper structure,

4
00:00:07,940 --> 00:00:12,630
your browser would display these words
as massive unreadable walls of text.

5
00:00:12,630 --> 00:00:16,860
The most common way to split up text in a
more manageable visually appealing chunks,

6
00:00:16,860 --> 00:00:18,280
is with a paragraph tag.

7
00:00:18,280 --> 00:00:21,220
Paragraph tags are pretty much what
they sound like they're used to split

8
00:00:21,220 --> 00:00:22,920
up text in a paragraphs.

9
00:00:22,920 --> 00:00:26,600
If we look at this background
info area on our profile website

10
00:00:27,720 --> 00:00:32,720
these two paragraphs are wrapped
in paragraph tags or p tags.

11
00:00:32,720 --> 00:00:35,350
It creates a bit of space
between these two paragraphs

12
00:00:35,350 --> 00:00:37,020
making it much easier to read.

13
00:00:37,020 --> 00:00:41,630
This space is created because paragraph
tags have a default margin value.

14
00:00:41,630 --> 00:00:43,700
Margin is a CSS property.

15
00:00:43,700 --> 00:00:47,060
We'll talk more about margin in
the CSS part of this course, but

16
00:00:47,060 --> 00:00:50,390
basically it's a way you can control
the amount of space between elements.

17
00:00:51,480 --> 00:00:54,780
Let's go back to index.html,
find these p tags, and

18
00:00:54,780 --> 00:00:57,093
delete them just to see what happens.

19
00:01:07,531 --> 00:01:08,551
When we refresh,

20
00:01:08,551 --> 00:01:12,500
you can see that these two paragraphs
are now all squished together.

21
00:01:13,650 --> 00:01:17,200
So, let's undo,
to bring these paragraphs back.

22
00:01:19,040 --> 00:01:22,931
And for the sake of experimentation
let's add another sentence below these

23
00:01:22,931 --> 00:01:25,008
paragraphs to see what that looks like.

24
00:01:25,008 --> 00:01:30,269
So, right here,
I'll just type this is a third paragraph.

25
00:01:32,871 --> 00:01:36,390
Refresh and
you'll see that this looks okay.

26
00:01:36,390 --> 00:01:39,530
Because this second paragraph
has a bottom margin

27
00:01:39,530 --> 00:01:42,650
that's creating space
between these two elements.

28
00:01:42,650 --> 00:01:45,710
But let's try adding a fourth paragraph.

29
00:01:45,710 --> 00:01:49,785
I'll type, This is a fourth paragraph.

30
00:01:52,842 --> 00:01:57,220
Refresh and we can see that the browser
doesn't recognize that we want this

31
00:01:57,220 --> 00:01:59,480
content on a new line.

32
00:01:59,480 --> 00:02:01,340
It doesn't know that it's a new paragraph.

33
00:02:01,340 --> 00:02:04,910
So it displays as if these two lines
are bumping up next to each other.

34
00:02:04,910 --> 00:02:06,480
By default, text-wrapped and

35
00:02:06,480 --> 00:02:09,460
paragraph tags will always
display on their own line.

36
00:02:09,460 --> 00:02:12,129
So let's put these paragraphs
into paragraph tags.

37
00:02:29,411 --> 00:02:32,830
Save, refresh and
there you go, paragraphs.

38
00:02:32,830 --> 00:02:36,460
In the next video I'll introduce
HTML's most valuable player

39
00:02:36,460 --> 00:02:39,740
the tag that makes the interconnected
web possible the link tag.