Instructor: So now that you've seen what you can do
with the HTML heading element,
the next one we're gonna 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 gonna 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 P 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 wanna 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 2,000 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 wanna get hold of some, you can go over to lipsum.com
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 baconipsum.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 broipsum.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 pow
and washboard and rail
and heli pow pow,
whatever it may be.
And if none of these take your fancy,
then I recommend going onto 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.