Original subtitles

So now that you've seen what you can do with the HTML heading element, the next one we're going to

learn about is the paragraph element.

And this is also related to formatting and putting text on our websites.

This is what a paragraph element looks like and similar to the heading element, you've got the opening

tag and the closing tag, and in between you've got the content that is going to be your paragraph.

Now the reason why we need a paragraph tag is because if you just had plain text in your HTML document,

when you run the code and you see it on a website, what you'll see is something like this.

The text, they run into each other onto the same line and you can't actually tell where one paragraph

begins and where the other ends.

On the other hand, if we had created two paragraph elements for these two lines, then when we run

the code you will see them being separated with a line in between to be able to distinguish the different

paragraphs.

And this is also really important for people who are using screen readers, so people who might be blind,

because what the screen reader will do is they'll see the beginning of each paragraph element and it

allows the blind user to be able to skip to the next paragraph easily and be able to see what's going

on each time.

Now let's put those skills into practice by trying an exercise using the paragraph element.

If you head over to the course resources for this lesson, you should be able to download the zip file

for the 2.2 paragraph element.

And once you've extracted and unzipped it, then go ahead and put it into your web development projects

folder and then open it up inside vs code.

I showed you how to do all of this in the previous lesson in HTML heading element as well as the initial

lesson when I showed you how to download course resources, so be sure to check those places if you

don't know how to get hold of this folder.

But once you have it opened up like this, then I want you to go ahead and open up the index.html file,

which as always, is where we're going to write our code.

Notice here we've got three paragraphs, the first paragraph, the second paragraph and the third paragraph.

And then there's some placeholder text in Latin, which doesn't mean anything.

It just is there so that you can see what a paragraph of text would look like.

And when you go ahead and right click and show preview, you should see that all of the paragraphs are

jumbled together into one long line and we can't tell where one paragraph begins and the other one ends.

So now it is your mission to solve this problem using what you've learned about the paragraph element.

So go ahead and format these three paragraphs using the paragraph tag and once you're done, you should

see the preview.

Show something like this where each paragraph is separated into new lines and clearly visually, we're

able to see the difference and we're able to distinguish these three different paragraphs.

Pause the video now, and once you're done, we'll go through the solution together.

All right.

We're going to use our paragraph tag.

So we're going to put the open tag here just in front of our first paragraph, and then we're going

to put the closing tag at the very end of our first paragraph, and then we're going to repeat that

basically for all of the other paragraphs.

Now you can see here I'm just clicking and dragging.

Alternatively, you can cut it and then paste it at the very end of the paragraph.

It really doesn't matter how you do it, as long as you get those tags in the right places.

And now hopefully your preview should have updated and you can see these paragraphs forming as we type.

So this looks pretty much the same as our goal.

And if you check the solution HTML, you should see the tags in the correct places as well.

So hopefully that wasn't too hard and you were able to do it all by yourself and you've seen now what

is the benefit of using a paragraph element to separate text into different paragraphs of content?

Now, what you saw in the exercise are bits of placeholder text, and it's what we would refer to as

Lorem ipsum.

It's something that you'll come across quite a lot, especially in web design.

It's so that we don't end up with something like this where we're trying to simulate content in a paragraph,

but then we're just writing content, content, content, or this is a paragraph, this is a paragraph,

this is a paragraph.

And the reason why we don't want to do this is because these are all the same words.

The sentence has the same length.

It doesn't look like what a natural block of text would look like, and we don't have the time or energy

to actually create the content just for testing and web design.

So that's why we use something called Lorem Ipsum.

And Lorem ipsum apparently comes from Latin classical literature by a famous author called Cicero.

If you've heard of him and it's over 2000 years old and this has been in use in the print industry for

many, many years, ever since the 1500s, even, where people started laying out newspapers and when

they didn't have the content for the layout, they would use this placeholder text.

If you want to get hold of them, you can go over to Simcom and there you'll find Lorem ipsum even in

different languages like Dutch or Polish, and you can use this tool to generate as many paragraphs

or words or bytes or lists as you need by simply using this generate button.

And here I've got five paragraphs ready to go to put into my new web design.

Now, instead of having something that looks like this where everything's all the same length, instead

we have very natural looking paragraphs that mimic pretty much what a regular English article would

look like.

And this is done in a matter of seconds using Lorem ipsum.

Now if Lorem ipsum is a little bit too boring for you, there's actually some novelty versions of this.

One of my favorite is bacon ipsum.com and it will generate similar to Lorem ipsum, but then you'll

get words like bacon and flank and pork loin and pork belly.

Now if you're not a meat eater, then maybe you should try something like bro ipsum.com where you can

have all of the bro terminology in a Lorem ipsum format.

And apparently the things that bros say are things like Taco pow and washboard and rail and heli paopao,

whatever it may be.

And if none of these take your fancy, then I recommend going on to Google and you can actually find

more of these kind of things by just searching for funny Lorem ipsum.

And there's a whole bunch of different ones like vegan ipsum or pirate ipsum and you'll come across

all sorts of different placeholder text generators.

But the important thing is you know how to get hold of them and you can use it in your code.

So as an add on challenge, if you want to, you can generate your own version of Lorem ipsum or Bacon

ipsum or bro ipsum and you can create an article using the paragraph tag and the Lorem ipsum that you've

generated.

Feel free to modify the index.html in the coding exercise that we just completed.

So have a play around with that and be sure to comment in the Q&A sections below.

If you find some Lorem ipsum that you think is ridiculous or really funny or really cool and I'll see

you on the next lesson.