1
00:00:00,170 --> 00:00:05,330
So now that you've seen what you can do with the HTML heading element, the next one we're going to

2
00:00:05,330 --> 00:00:07,880
learn about is the paragraph element.

3
00:00:07,880 --> 00:00:13,490
And this is also related to formatting and putting text on our websites.

4
00:00:14,000 --> 00:00:22,070
This is what a paragraph element looks like and similar to the heading element, you've got the opening

5
00:00:22,100 --> 00:00:31,670
tag and the closing tag, and in between you've got the content that is going to be your paragraph.

6
00:00:32,000 --> 00:00:39,710
Now the reason why we need a paragraph tag is because if you just had plain text in your HTML document,

7
00:00:39,740 --> 00:00:46,720
when you run the code and you see it on a website, what you'll see is something like this.

8
00:00:46,730 --> 00:00:53,870
The text, they run into each other onto the same line and you can't actually tell where one paragraph

9
00:00:53,870 --> 00:00:56,060
begins and where the other ends.

10
00:00:56,510 --> 00:01:03,630
On the other hand, if we had created two paragraph elements for these two lines, then when we run

11
00:01:03,630 --> 00:01:10,890
the code you will see them being separated with a line in between to be able to distinguish the different

12
00:01:10,890 --> 00:01:12,060
paragraphs.

13
00:01:12,630 --> 00:01:18,930
And this is also really important for people who are using screen readers, so people who might be blind,

14
00:01:18,960 --> 00:01:26,010
because what the screen reader will do is they'll see the beginning of each paragraph element and it

15
00:01:26,010 --> 00:01:33,480
allows the blind user to be able to skip to the next paragraph easily and be able to see what's going

16
00:01:33,480 --> 00:01:34,770
on each time.

17
00:01:35,340 --> 00:01:41,460
Now let's put those skills into practice by trying an exercise using the paragraph element.

18
00:01:41,730 --> 00:01:47,130
If you head over to the course resources for this lesson, you should be able to download the zip file

19
00:01:47,130 --> 00:01:50,100
for the 2.2 paragraph element.

20
00:01:50,100 --> 00:01:56,040
And once you've extracted and unzipped it, then go ahead and put it into your web development projects

21
00:01:56,040 --> 00:01:59,520
folder and then open it up inside vs code.

22
00:01:59,550 --> 00:02:06,150
I showed you how to do all of this in the previous lesson in HTML heading element as well as the initial

23
00:02:06,150 --> 00:02:11,910
lesson when I showed you how to download course resources, so be sure to check those places if you

24
00:02:11,910 --> 00:02:14,850
don't know how to get hold of this folder.

25
00:02:15,060 --> 00:02:20,970
But once you have it opened up like this, then I want you to go ahead and open up the index.html file,

26
00:02:20,970 --> 00:02:24,690
which as always, is where we're going to write our code.

27
00:02:24,930 --> 00:02:32,070
Notice here we've got three paragraphs, the first paragraph, the second paragraph and the third paragraph.

28
00:02:32,070 --> 00:02:36,240
And then there's some placeholder text in Latin, which doesn't mean anything.

29
00:02:36,240 --> 00:02:42,180
It just is there so that you can see what a paragraph of text would look like.

30
00:02:42,180 --> 00:02:49,860
And when you go ahead and right click and show preview, you should see that all of the paragraphs are

31
00:02:49,860 --> 00:02:58,050
jumbled together into one long line and we can't tell where one paragraph begins and the other one ends.

32
00:02:58,050 --> 00:03:05,490
So now it is your mission to solve this problem using what you've learned about the paragraph element.

33
00:03:05,490 --> 00:03:12,960
So go ahead and format these three paragraphs using the paragraph tag and once you're done, you should

34
00:03:12,960 --> 00:03:14,250
see the preview.

35
00:03:14,280 --> 00:03:22,560
Show something like this where each paragraph is separated into new lines and clearly visually, we're

36
00:03:22,560 --> 00:03:28,650
able to see the difference and we're able to distinguish these three different paragraphs.

37
00:03:28,980 --> 00:03:32,880
Pause the video now, and once you're done, we'll go through the solution together.

38
00:03:36,890 --> 00:03:37,280
All right.

39
00:03:37,280 --> 00:03:39,800
We're going to use our paragraph tag.

40
00:03:39,800 --> 00:03:46,970
So we're going to put the open tag here just in front of our first paragraph, and then we're going

41
00:03:46,970 --> 00:03:53,510
to put the closing tag at the very end of our first paragraph, and then we're going to repeat that

42
00:03:53,510 --> 00:03:56,810
basically for all of the other paragraphs.

43
00:03:59,490 --> 00:04:03,390
Now you can see here I'm just clicking and dragging.

44
00:04:03,510 --> 00:04:11,370
Alternatively, you can cut it and then paste it at the very end of the paragraph.

45
00:04:11,400 --> 00:04:16,950
It really doesn't matter how you do it, as long as you get those tags in the right places.

46
00:04:16,950 --> 00:04:24,250
And now hopefully your preview should have updated and you can see these paragraphs forming as we type.

47
00:04:24,270 --> 00:04:27,660
So this looks pretty much the same as our goal.

48
00:04:27,660 --> 00:04:35,760
And if you check the solution HTML, you should see the tags in the correct places as well.

49
00:04:35,880 --> 00:04:42,780
So hopefully that wasn't too hard and you were able to do it all by yourself and you've seen now what

50
00:04:42,780 --> 00:04:51,870
is the benefit of using a paragraph element to separate text into different paragraphs of content?

51
00:04:52,140 --> 00:04:59,260
Now, what you saw in the exercise are bits of placeholder text, and it's what we would refer to as

52
00:04:59,260 --> 00:05:00,310
Lorem ipsum.

53
00:05:00,340 --> 00:05:04,240
It's something that you'll come across quite a lot, especially in web design.

54
00:05:04,240 --> 00:05:11,110
It's so that we don't end up with something like this where we're trying to simulate content in a paragraph,

55
00:05:11,110 --> 00:05:15,310
but then we're just writing content, content, content, or this is a paragraph, this is a paragraph,

56
00:05:15,310 --> 00:05:16,180
this is a paragraph.

57
00:05:16,180 --> 00:05:20,500
And the reason why we don't want to do this is because these are all the same words.

58
00:05:20,530 --> 00:05:22,240
The sentence has the same length.

59
00:05:22,240 --> 00:05:27,640
It doesn't look like what a natural block of text would look like, and we don't have the time or energy

60
00:05:27,640 --> 00:05:31,660
to actually create the content just for testing and web design.

61
00:05:31,660 --> 00:05:35,140
So that's why we use something called Lorem Ipsum.

62
00:05:35,590 --> 00:05:44,320
And Lorem ipsum apparently comes from Latin classical literature by a famous author called Cicero.

63
00:05:44,350 --> 00:05:51,160
If you've heard of him and it's over 2000 years old and this has been in use in the print industry for

64
00:05:51,160 --> 00:05:57,700
many, many years, ever since the 1500s, even, where people started laying out newspapers and when

65
00:05:57,700 --> 00:06:01,780
they didn't have the content for the layout, they would use this placeholder text.

66
00:06:01,810 --> 00:06:09,640
If you want to get hold of them, you can go over to Simcom and there you'll find Lorem ipsum even in

67
00:06:09,640 --> 00:06:17,050
different languages like Dutch or Polish, and you can use this tool to generate as many paragraphs

68
00:06:17,050 --> 00:06:24,160
or words or bytes or lists as you need by simply using this generate button.

69
00:06:24,160 --> 00:06:29,130
And here I've got five paragraphs ready to go to put into my new web design.

70
00:06:29,140 --> 00:06:35,290
Now, instead of having something that looks like this where everything's all the same length, instead

71
00:06:35,290 --> 00:06:42,310
we have very natural looking paragraphs that mimic pretty much what a regular English article would

72
00:06:42,310 --> 00:06:43,150
look like.

73
00:06:43,150 --> 00:06:47,230
And this is done in a matter of seconds using Lorem ipsum.

74
00:06:47,560 --> 00:06:53,410
Now if Lorem ipsum is a little bit too boring for you, there's actually some novelty versions of this.

75
00:06:53,440 --> 00:06:59,650
One of my favorite is bacon ipsum.com and it will generate similar to Lorem ipsum, but then you'll

76
00:06:59,650 --> 00:07:05,710
get words like bacon and flank and pork loin and pork belly.

77
00:07:05,740 --> 00:07:11,950
Now if you're not a meat eater, then maybe you should try something like bro ipsum.com where you can

78
00:07:11,950 --> 00:07:18,550
have all of the bro terminology in a Lorem ipsum format.

79
00:07:18,580 --> 00:07:35,110
And apparently the things that bros say are things like Taco pow and washboard and rail and heli paopao,

80
00:07:35,200 --> 00:07:36,670
whatever it may be.

81
00:07:36,670 --> 00:07:42,370
And if none of these take your fancy, then I recommend going on to Google and you can actually find

82
00:07:42,370 --> 00:07:46,270
more of these kind of things by just searching for funny Lorem ipsum.

83
00:07:46,270 --> 00:07:52,780
And there's a whole bunch of different ones like vegan ipsum or pirate ipsum and you'll come across

84
00:07:52,780 --> 00:07:56,170
all sorts of different placeholder text generators.

85
00:07:56,170 --> 00:08:02,290
But the important thing is you know how to get hold of them and you can use it in your code.

86
00:08:02,290 --> 00:08:10,300
So as an add on challenge, if you want to, you can generate your own version of Lorem ipsum or Bacon

87
00:08:10,300 --> 00:08:18,880
ipsum or bro ipsum and you can create an article using the paragraph tag and the Lorem ipsum that you've

88
00:08:18,880 --> 00:08:20,200
generated.

89
00:08:20,500 --> 00:08:26,500
Feel free to modify the index.html in the coding exercise that we just completed.

90
00:08:26,980 --> 00:08:32,260
So have a play around with that and be sure to comment in the Q&A sections below.

91
00:08:32,260 --> 00:08:39,400
If you find some Lorem ipsum that you think is ridiculous or really funny or really cool and I'll see

92
00:08:39,400 --> 00:08:40,929
you on the next lesson.