So now that you've seen what you can do with the HTML heading element, the next one we're going to 1
learn about is the paragraph element. 2
And this is also related to formatting and putting text on our websites. 3
This is what a paragraph element looks like and similar to the heading element, you've got the opening 4
tag (<p>) and the closing tag (</p>), and in between you've got the content that is going to be your paragraph. 5
Now the reason why we need a paragraph tag is because if you just had plain text in your HTML document, 6
when you run the code and you see it on a website, what you'll see is something like this. 7
The text, they run into each other onto the same line and you can't actually tell where one paragraph 8
begins and where the other ends. 9
On the other hand, if we had created two paragraph elements for these two lines, then when we run 10
the code you will see them being separated with a line in between to be able to distinguish the different 11
paragraphs. 12
And this is also really important for people who are using screen readers, so people who might be blind, 13
because what the screen reader will do is they'll see the beginning of each paragraph element and it 14
allows the blind user to be able to skip to the next paragraph easily and be able to see what's going 15
on each time. 16
Now let's put those skills into practice by trying an exercise using the paragraph element. 17
If you head over to the course resources for this lesson, you should be able to download the zipped file 18
for the 2.2 Paragraph Element 19
and once you've extracted and unzipped it, then go ahead and put it into your Web Development Projects 20
folder and then open it up inside VS Code. 21
I showed you how to do all of this in the previous lesson in HTML heading element as well as the initial 22
lesson when I showed you how to download course resources, so be sure to check those places if you 23
don't know how to get hold of this folder. 24
But once you have it opened up like this, then I want you to go ahead and open up the index.html file, 25
which as always, is where we're going to write our code. 26
Notice here we've got three paragraphs, the first paragraph, the second paragraph and the third paragraph. 27
And then there's some placeholder text in Latin, which doesn't mean anything. 28
It just is there so that you can see what a paragraph of text would look like. 29
And when you go ahead and right-click and Show Preview, you should see that all of the paragraphs are 30
jumbled together into one long line and we can't tell where one paragraph begins and the other one ends. 31
So now it is your mission to solve this problem using what you've learned about the paragraph element. 32
So go ahead and format these three paragraphs using the paragraph tag and once you're done, you should 33
see the preview 34
show something like this, where each paragraph is separated into new lines and clearly, visually, we're 35
able to see the difference and we're able to distinguish these three different paragraphs. 36
Pause the video now, and once you're done, we'll go through the solution together. 37
All right. 38
We're going to use our paragraph tag. 39
So we're going to put the open tag here just in front of our first paragraph, and then we're going 40
to put the closing tag at the very end of our first paragraph, and then we're going to repeat that 41
basically for all of the other paragraphs. 42
Now you can see here I'm just clicking and dragging. 43
Alternatively, you can cut it and then paste it at the very end of the paragraph. 44
It really doesn't matter how you do it, as long as you get those tags in the right places. 45
And now hopefully, your preview should have updated and you can see these paragraphs forming as we type. 46
So this looks pretty much the same as our goal. 47
And if you check the solution HTML, you should see the, "<p>" tags in the correct places as well. 48
So hopefully that wasn't too hard, and you were able to do it all by yourself and you've seen now what 49
is the benefit of using a paragraph element to separate text into different paragraphs of content. 50
Now, what you saw in the exercise are bits of placeholder text, and it's what we would refer to as 51
Lorem Ipsum. 52
It's something that you'll come across quite a lot, especially in web design. 53
It's so that we don't end up with something like this, where we're trying to simulate content in a paragraph, 54
but then we're just writing content, content, content, or this is a paragraph, this is a paragraph, 55
this is a paragraph. 56
And the reason why we don't want to do this is because these are all the same words. 57
The sentence has the same length. 58
It doesn't look like what a natural block of text would look like, and we don't have the time or energy 59
to actually create the content just for testing and web design. 60
So that's why we use something called Lorem Ipsum. 61
And Lorem ipsum apparently comes from Latin classical literature by a famous author called Cicero, 62
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
many, many years, ever since the 1500s, even, where people started laying out newspapers and when 64
they didn't have the content for the layout, they would use this placeholder text. 65
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
different languages like Dutch or Polish, and you can use this tool to generate as many paragraphs, 67
or words, or bytes, or lists as you need by simply using this Generate button. 68
And here I've got five paragraphs ready to go to put into my new web design. 69
Now, instead of having something that looks like this where everything's all the same length, instead 70
we have very natural looking paragraphs that mimic pretty much what a regular English article would 71
look like. 72
And this is done in a matter of seconds using Lorem ipsum. 73
Now if Lorem ipsum is a little bit too boring for you, there's actually some novelty versions of this. 74
One of my favorite is baconipsum.com and it will generate similar to Lorem ipsum, but then you'll 75
get words like bacon and flank and pork loin and pork belly. 76
Now if you're not a meat eater, then maybe you should try something like broipsum.com, where you can 77
have all of the bro terminology in a Lorem ipsum format. 78
And apparently, the things that Bro says are things like taco, pow pow, and washboard, and rail, and heli pow pow, 79
whatever it may be. 80
And if none of these take your fancy, then I recommend going on to Google and you can actually find 81
more of these kind of things by just searching for funny Lorem ipsum 82
and there's a whole bunch of different ones like Vegan Ipsum or Pirate Ipsum and you'll come across 83
all sorts of different placeholder text generators. 84
But the important thing is you know how to get hold of them and you can use it in your code. 85
So as an add-on challenge, if you want to, you can generate your own version of Lorem ipsum or Bacon 86
ipsum or Bro ipsum and you can create an article using the paragraph tag and the Lorem ipsum that you've 87
generated. 88
Feel free to modify the index.html in the coding exercise that we just completed. 89
So have a play around with that and be sure to comment in the Q&A sections below 90
if you find some Lorem ipsum that you think is ridiculous, or really funny, or really cool, and I'll see 91
you on the next lesson.