Paragraphs are perhaps the most basic formatting tag that you'll use in HTML.
In fact, if you don't wrap text in an element, as we've discussed,
most browsers are going to default the formatting like a paragraph.
In fact, I have the page, paragraphs.htm open here from the 03_03 directory.
It's kind of picking up right where we left off in the last exercise.
You can see we still have our headings.
Notice that the remainder of the text remains unformatted.
Well if I were to view this page in a browser for all intents and
purposes, visually it looks like there's formatting applied.
And that's one of the things about user agents like browsers.
HTML has to be backwards compatible,
that means they have to support earlier versions of HTML.
And they also support really loose syntax rules, for example having unformatted
content would cause some languages to simply fail and the whole page to fail.
Well HTML is much more forgiving.
It basically says well, you forgot to format it,
probably wanted to format it like a paragraph so that's what I am going to do.
It's nice that it does that and it can save you a lot of trouble sometimes,
when you do forget to do something.
But it also has the opposite effect.
Sometimes it makes you think that something's happened, that hasn't yet.
So, as you're formatting your page content,
you want to make sure you pay particular attention to your paragraphs.
It's really easy to forget about them sometimes because they're so
basic, and sometimes, you'll have malformed paragraphs.
Paragraphs that open but don't ever close.
Or text like this that's not formatted at all.
So you always want to double check your structure and
make sure your page is properly formatted.
So we're just going to go through here and add a few extra paragraphs.
After the h2 I'm going to go in and add a paragraph element.
Now remember for a paragraph element we're going to need both the opening and
the closing paragraph tags.
So it should surround this entire paragraph.
Below adding headings, I'm going to come in there and add another paragraph.
Remember opening and closing tags.
And then after h3,
the section on using paragraphs, we're going to add one there as well.
Now you'll notice there that it mentions that the paragraph
tag indicates an individual paragraph and it should be used for
every single individual paragraphs.
So not just wrapping a big block of text.
So if we go down below line breaks,
you can see that we do have one big sort of block of text.
But I've got a few line returns in there that create one, two and three sections.
We actually want each of them to be in their own paragraph so I'm going to go in
and surround each of them with an opening and a closing paragraph tag.
Now as soon as I do that,
I'm going to save the file and preview that in my browser.
Now it looks very similar to what we had before but
notice that the text at the bottom is enclosed in individual paragraphs.
Now I want to take a brief moment and
talk about the vertical spacing between these paragraphs.
You'll notice that when we go from a heading to a paragraph,
paragraph to a heading, we get sort of a blank line.
Or an empty space here.
That's basically because all HTML elements have both top and bottom margins.
Vertical margins in CSS collapse.
What that means is if you had a 20 pixel margin on the bottom of this heading.
And you have a 20 pixel margin at the top of this paragraph.
You'd still only end up with 20 pixels between them.
It wouldn't add to 40.
It does that so that we don't have double spacing between our paragraphs.
That sometimes leads people to do something that they shouldn't.
So, let's say for example, that we wanted a little bit of
extra space between this paragraph and the address that I have here at the bottom.
So a lot of times you're going to see something like this,
where somebody puts in an empty paragraph.
And they might do something like placing any character like
a non-breaking space character.
Now don't worry too much about this.
We're going to talk about HTML character entities in just a moment.
That's just so that this paragraph will have a little bit of content even
though it's invisible content.
So if I save this and go back in the browser you can see now that we
have a lot more space between that paragraph and the address below it.
Well, this is the absolute wrong way to do this.
If you don't have content inside of that paragraph,
you don't need to have an empty paragraph there.
Cascading Style Sheets handles all of our visual formatting.
If we want a little extra space between one paragraph and
the next, it's pretty easy to use CSS to do that.
Now one more thing about paragraphs, real quickly, before we move on.
I, I mentioned earlier that you need to have an opening and
a closing tag for a paragraph.
That's not actually 100% true.
In the HTML specification the closing tags of paragraphs are actually optional.
If I come down to these last three paragraphs and
I take the closing paragraph tags off of them.
going to do it for all three of them.
And no you don't have to do that along with me,
we're just demonstrating something here.
I save this.
Now look Brackets is telling me I've got an error.
It's saying hey you really need closing tags with that but
to be honest with you, you don't.
If I go back into my browser it's rendering it just fine.
The closing tags of paragraphs are considered optional,
however I would recommend that you as a new author don't make them optional.
Make sure that you have an opening and a closing tag.
I don't leave them off ever, and
I can't think of a really good practical reason to do so.
Even though they're optional within your code, they help the flow of code,
they tell you where one section of content ends and another begins.
So it's a really good idea to make sure that you have both of those tags,
the opening and the closing one.
Okay so that's it.
Overall paragraphs are pretty straight forward again,
just make sure to avoid having empty paragraphs in your code and
make sure that all of your paragraphs, opening and
closing tags are wrapped correctly around the appropriate page elements.