Now that you've learned all about how HTML headings work, you're ready to move on to the body of your post, with paragraphs.
HTML Paragraphs
You guessed it, HTML paragraph tags designate paragraphs within your blog post.
In HTML, paragraphs are wrapped in <p> </p> tags, like this:
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'. </p>
When you write a post in HTML, you don't need to add space between paragraphs, it's done automatically by the browser when it sees the <p></p> tags. Paragraphs with <p></p> tags get spaces between them just like when you press "enter" twice between paragraphs in a visual editor.
Paragraphs are not as powerful as HTML headings, but they share the same accessibility and SEO benefits: they assist your visitors that use screen readers, and they help search engines recognize and analyze your content.
That's all you really need to know to understand the basics of HTML paragraphs in the context of a blog post, and if you're all geeked out for the day you can stop here.
But, if you don't mind dipping your toe into the pool of CSS today, I can show you some techniques using HTML paragraphs and a dash of CSS to make certain paragraphs really stand out!
Styling Paragraphs
The great thing about using paragraph tags is that it allows you to give your paragraphs some style! Using CSS, you can set specific paragraphs apart from the rest of your blog post for emphasis, or just to make your posts more visually appealing.
I'm going to give you two practical examples of what you can do with paragraph tags and a touch of CSS. The CSS I'm using here is just an example of what you can do, feel free to experiment with different colors, font styles and sizes, etc.
You may have seen examples of these same techniques using inline <span> tags, but I'm going to show you how to do it using regular CSS instead because it's easier and more efficient than span tags (once you get used to it). So here we go!
1) Styling Your First Paragraph:
Have you noticed that some blogs have intro paragraphs that look different from the rest of the post? A good example of this technique in use is smashingmagazine.com, where the first paragraph of every post is set in a different typeface and a larger font size.
There are several different ways to style an intro paragraph, but I'm going to show you one quick way that you can use on your next post if you like! I'll show you how to make your first paragraph look like this:
There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.
First, write your intro paragraph in your HTML editor, and wrap it with <p> paragraph tags, like this:
<p>There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.</p>
Next, add a class to the paragraph by changing the opening <p> paragraph tag to say <p class="intro">, like this:
<p class="intro">There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. </p>
Finally, add the following CSS to your custom CSS area (in Blogger, it's under Template > Customize > Advanced > Add CSS. In Typepad, it's under Design > Custom CSS. In Tumblr, it's under Customize > Advanced > Add CSS. In self-hosted Wordpress it varies by theme):
.intro {
font-size: 1.3em;
line-height: 1.8em;
font-style: italic;
text-indent: 1.3em;
color: gray;
}
Now that you've added that little CSS snippet to your template, you can use that same styling again anytime you give a paragraph the class of intro with <p class="intro"> </p>. Pretty cool, right?
2) Styling Disclaimers
Another great use of CSS paragraph style is for your sponsored post disclaimer. Here's how to make a sponsored post disclaimer look like this:
This is a sponsored post. White Rabbit, Inc. gave me a free pocket watch as compensation for this post. The opinions given in this post are my own and are not influenced by the free product.
Since you're now an experienced HTML paragraph writer, we're going to assign the class to this paragraph in the first step. So this time, give your disclaimer paragraph the class of "disclaimer", like this:
<p class="disclaimer">This is a sponsored post. White Rabbit, Inc. gave me a free pocket watch as compensation for this post. The opinions given in this post are my own and are not influenced by the free product.</p>
Then, add this snippet of CSS to your custom CSS field:
.disclaimer {
border: dotted 1px #885777;
padding: 1em;
background-color: #FFF0F5;
font-size: .9em;
font-style: italic;
color: #885777;
}
Now that you have that CSS in place, you can use the "disclaimer" class any time you write a disclaimer paragraph and it will style that disclaimer the same way.
Give it a Try!
Next time you write a blog post, try writing it in the HTML editor and wrap your paragraphs with the <p></p> tags. For extra credit, combine it with HTML headings. And, for extra-extra credit, try styling one of your paragraphs using the styling techniques in this post.
What's Next?
Ready to move on? The next tutorial is Practical HTML for Bloggers - Lists.
Title cards for this series designed by the absolutely wonderful Jenna from Little Bit Heart.
