WEBVTT 0 00:00.170 --> 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 1 00:05.330 --> 00:07.880 learn about is the paragraph element. 2 00:07.880 --> 00:13.490 And this is also related to formatting and putting text on our websites. 3 00:14.000 --> 00:22.070 This is what a paragraph element looks like and similar to the heading element, you've got the opening 4 00:22.100 --> 00:31.670 tag (<p>) and the closing tag (</p>), and in between you've got the content that is going to be your paragraph. 5 00:32.000 --> 00:39.710 Now the reason why we need a paragraph tag is because if you just had plain text in your HTML document, 6 00:39.740 --> 00:46.720 when you run the code and you see it on a website, what you'll see is something like this. 7 00:46.730 --> 00:53.870 The text, they run into each other onto the same line and you can't actually tell where one paragraph 8 00:53.870 --> 00:56.060 begins and where the other ends. 9 00:56.510 --> 01:03.630 On the other hand, if we had created two paragraph elements for these two lines, then when we run 10 01:03.630 --> 01:10.890 the code you will see them being separated with a line in between to be able to distinguish the different 11 01:10.890 --> 01:12.060 paragraphs. 12 01:12.630 --> 01:18.930 And this is also really important for people who are using screen readers, so people who might be blind, 13 01:18.960 --> 01:26.010 because what the screen reader will do is they'll see the beginning of each paragraph element and it 14 01:26.010 --> 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 15 01:33.480 --> 01:34.770 on each time. 16 01:35.340 --> 01:41.460 Now let's put those skills into practice by trying an exercise using the paragraph element. 17 01:41.730 --> 01:47.130 If you head over to the course resources for this lesson, you should be able to download the zipped file 18 01:47.130 --> 01:50.100 for the 2.2 Paragraph Element 19 01:50.100 --> 01:56.040 and once you've extracted and unzipped it, then go ahead and put it into your Web Development Projects 20 01:56.040 --> 01:59.520 folder and then open it up inside VS Code. 21 01:59.550 --> 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 22 02:06.150 --> 02:11.910 lesson when I showed you how to download course resources, so be sure to check those places if you 23 02:11.910 --> 02:14.850 don't know how to get hold of this folder. 24 02:15.060 --> 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, 25 02:20.970 --> 02:24.690 which as always, is where we're going to write our code. 26 02:24.930 --> 02:32.070 Notice here we've got three paragraphs, the first paragraph, the second paragraph and the third paragraph. 27 02:32.070 --> 02:36.240 And then there's some placeholder text in Latin, which doesn't mean anything. 28 02:36.240 --> 02:42.180 It just is there so that you can see what a paragraph of text would look like. 29 02:42.180 --> 02:49.860 And when you go ahead and right-click and Show Preview, you should see that all of the paragraphs are 30 02:49.860 --> 02:58.050 jumbled together into one long line and we can't tell where one paragraph begins and the other one ends. 31 02:58.050 --> 03:05.490 So now it is your mission to solve this problem using what you've learned about the paragraph element. 32 03:05.490 --> 03:12.960 So go ahead and format these three paragraphs using the paragraph tag and once you're done, you should 33 03:12.960 --> 03:14.250 see the preview 34 03:14.280 --> 03:22.560 show something like this, where each paragraph is separated into new lines and clearly, visually, we're 35 03:22.560 --> 03:28.650 able to see the difference and we're able to distinguish these three different paragraphs. 36 03:28.980 --> 03:32.880 Pause the video now, and once you're done, we'll go through the solution together. 37 03:36.890 --> 03:37.280 All right. 38 03:37.280 --> 03:39.800 We're going to use our paragraph tag. 39 03:39.800 --> 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 40 03:46.970 --> 03:53.510 to put the closing tag at the very end of our first paragraph, and then we're going to repeat that 41 03:53.510 --> 03:56.810 basically for all of the other paragraphs. 42 03:59.490 --> 04:03.390 Now you can see here I'm just clicking and dragging. 43 04:03.510 --> 04:11.370 Alternatively, you can cut it and then paste it at the very end of the paragraph. 44 04:11.400 --> 04:16.950 It really doesn't matter how you do it, as long as you get those tags in the right places. 45 04:16.950 --> 04:24.250 And now hopefully, your preview should have updated and you can see these paragraphs forming as we type. 46 04:24.270 --> 04:27.660 So this looks pretty much the same as our goal. 47 04:27.660 --> 04:35.760 And if you check the solution HTML, you should see the, "<p>" tags in the correct places as well. 48 04:35.880 --> 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 49 04:42.780 --> 04:51.870 is the benefit of using a paragraph element to separate text into different paragraphs of content. 50 04:52.140 --> 04:59.260 Now, what you saw in the exercise are bits of placeholder text, and it's what we would refer to as 51 04:59.260 --> 05:00.310 Lorem Ipsum. 52 05:00.340 --> 05:04.240 It's something that you'll come across quite a lot, especially in web design. 53 05:04.240 --> 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, 54 05:11.110 --> 05:15.310 but then we're just writing content, content, content, or this is a paragraph, this is a paragraph, 55 05:15.310 --> 05:16.180 this is a paragraph. 56 05:16.180 --> 05:20.500 And the reason why we don't want to do this is because these are all the same words. 57 05:20.530 --> 05:22.240 The sentence has the same length. 58 05:22.240 --> 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 59 05:27.640 --> 05:31.660 to actually create the content just for testing and web design. 60 05:31.660 --> 05:35.140 So that's why we use something called Lorem Ipsum. 61 05:35.590 --> 05:44.320 And Lorem ipsum apparently comes from Latin classical literature by a famous author called Cicero, 62 05:44.350 --> 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 63 05:51.160 --> 05:57.700 many, many years, ever since the 1500s, even, where people started laying out newspapers and when 64 05:57.700 --> 06:01.780 they didn't have the content for the layout, they would use this placeholder text. 65 06:01.810 --> 06:09.640 If you want to get hold of them, you can go over to lipsum.com and there you'll find Lorem ipsum even in 66 06:09.640 --> 06:17.050 different languages like Dutch or Polish, and you can use this tool to generate as many paragraphs, 67 06:17.050 --> 06:24.160 or words, or bytes, or lists as you need by simply using this Generate button. 68 06:24.160 --> 06:29.130 And here I've got five paragraphs ready to go to put into my new web design. 69 06:29.140 --> 06:35.290 Now, instead of having something that looks like this where everything's all the same length, instead 70 06:35.290 --> 06:42.310 we have very natural looking paragraphs that mimic pretty much what a regular English article would 71 06:42.310 --> 06:43.150 look like. 72 06:43.150 --> 06:47.230 And this is done in a matter of seconds using Lorem ipsum. 73 06:47.560 --> 06:53.410 Now if Lorem ipsum is a little bit too boring for you, there's actually some novelty versions of this. 74 06:53.440 --> 06:59.650 One of my favorite is baconipsum.com and it will generate similar to Lorem ipsum, but then you'll 75 06:59.650 --> 07:05.710 get words like bacon and flank and pork loin and pork belly. 76 07:05.740 --> 07:11.950 Now if you're not a meat eater, then maybe you should try something like broipsum.com, where you can 77 07:11.950 --> 07:18.550 have all of the bro terminology in a Lorem ipsum format. 78 07:18.580 --> 07:35.110 And apparently, the things that Bro says are things like taco, pow pow, and washboard, and rail, and heli pow pow, 79 07:35.200 --> 07:36.670 whatever it may be. 80 07:36.670 --> 07:42.370 And if none of these take your fancy, then I recommend going on to Google and you can actually find 81 07:42.370 --> 07:46.270 more of these kind of things by just searching for funny Lorem ipsum 82 07:46.270 --> 07:52.780 and there's a whole bunch of different ones like Vegan Ipsum or Pirate Ipsum and you'll come across 83 07:52.780 --> 07:56.170 all sorts of different placeholder text generators. 84 07:56.170 --> 08:02.290 But the important thing is you know how to get hold of them and you can use it in your code. 85 08:02.290 --> 08:10.300 So as an add-on challenge, if you want to, you can generate your own version of Lorem ipsum or Bacon 86 08:10.300 --> 08:18.880 ipsum or Bro ipsum and you can create an article using the paragraph tag and the Lorem ipsum that you've 87 08:18.880 --> 08:20.200 generated. 88 08:20.500 --> 08:26.500 Feel free to modify the index.html in the coding exercise that we just completed. 89 08:26.980 --> 08:32.260 So have a play around with that and be sure to comment in the Q&A sections below 90 08:32.260 --> 08:39.400 if you find some Lorem ipsum that you think is ridiculous, or really funny, or really cool, and I'll see 91 08:39.400 --> 08:40.930 you on the next lesson.