Practical HTML for Bloggers - Further Reading

Now that you've finished Practical HTML for Bloggers, you're ready to move on to more comprehensive tutorials in HTML and CSS.

There are thousands of tutorials and books on HTML & CSS for beginners, and it can be mind-boggling just trying to figure out which ones to read. So, I'm going to narrow it down to four rock-solid, comprehensive resources that will help you go further into web development. No fluff, just the good stuff!

Web Resources

A Beginner's Guide to HTML & CSS: this tutorial series by developer Shay Howe covers the basics of HTML and CSS in a clean, easy-to-read format.

Mozilla Developer Network: The MDN's "Learning" section organizes the best HTML, CSS, and JavaScript tutorials from across the web in one place. These well-curated resources are all up-to-date and user-friendly.

Books

Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics: by Jennifer Niederst Robbins. This excellent book is now in its 4th edition. I've read the 2nd, 3rd, and 4th, and seriously, this book just keeps getting better. The author presents HTML/CSS and elementary JavaScript in such a clear, understandable way. And, the information on web graphics is incredibly useful for anyone working on the web. So much of what I know came from this book. I can't recommend it highly enough.

HTML and CSS: Design and Build Websites: by Jon Duckett. This is probably the prettiest technical book in the world right now. Its layout is absolutely beautiful and very appealing to visual learners. And, it's not just pretty, it's well-written and comprehensive; after you finish with this book you'll be able to create great-looking static webpages from scratch.

Thank You!

If you've followed along with this series I want to thank you for your time and your feedback, and wish you the best of luck with your blog! Keep in touch :)

Title cards for this series designed by the lovely & talented Jenna from Little Bit Heart.

Practical HTML for Bloggers - The Extra Elements

Hey, congratulations! If you've worked your way through this entire series, you've learned how to use all of these HTML elements in your blog posts:

• HTML Headings
• HTML Paragraphs
• HTML Lists
• Strength and Emphasis
• Images

With all that under your belt, you can write the average blog post in straight HTML. There are just a few more elements to learn before you're done. These remaining elements are simple enough that they don't require full tutorials all to themselves, especially now that you're comfortable with writing HTML in your posts!

So, today I'm going to give you quick rundowns of the remaining elements. Then, tomorrow, I'll set you up with some recommended reading in case you've fallen in love with HTML and want to go further into the wonderful world of web development!

So, here we go:

Links

I've glossed over making links in previous installments of this series, but let's take a closer look at how a link is built.

Here's a basic HTML link:

<a href="http://www.example.com">Link text here</a>

The "a" stands for "anchor", and the "href" stands for "hypertext reference". Here's how that link would look in the browser:

Link text here

You can also link to email addresses, like so:

<a href="mailto:info@example.com">info@example.com</a>

Here's how that looks in the browser:

info@example.com

Your links will look different depending on your blog's CSS styling. There's an excellent, comprehensive guide to styling links at Smashing Magazine.

<q> - Quote

Use a <q> tag to mark up a very short quote. By default, most modern browsers wrap that text in quotation marks — last I checked, Internet Explorer does not.

Here's how to use the <q> tags:

<q>Curiouser and curiouser!</q>

And here's how that looks in the browser:

Curiouser and curiouser!

If you're using a modern browser, you should see quotation marks around that quote. If you don't, it's probably time to switch browsers ;)

<blockquote> - Longer Quotes

Use <blockquote> tags to mark up extended quotes. The <blockquote> element does not automatically add quotation marks like the <q> element, so you'll need to add them manually if you'd like to use them with the quote.

If your blockquote is one paragraph, you don't need to use paragraph tags inside the blockquote. If it's 2 or more paragraphs, use paragraph tags, like so:

<blockquote>
<p>"Well, it must be removed," said the King very decidedly, and he called the Queen, who was passing at the moment, "My dear! I wish you would have this cat removed!"</p>
<p>The Queen had only one way of settling all difficulties, great or small. "Off with his head!" she said, without even looking round.</p>
</blockquote>

Here's how blockquotes look on my blog:

"Well, it must be removed," said the King very decidedly, and he called the Queen, who was passing at the moment, "My dear! I wish you would have this cat removed!"

The Queen had only one way of settling all difficulties, great or small. "Off with his head!" she said, without even looking round.

I've styled my blockquotes with a larger font size and a left border. Yours will look different depending on the CSS in your blog's theme. Some blog templates have very creative styling for blockquotes, while others are quite plain. If you want to see just how creative you can get with blockquote CSS, check out this awesome gallery of blockquote styling examples from Codrops.

<cite> - Citation

Use a <cite> tag to cite the source of your quotes, or to reference a published or artistic work. By default, browsers italicize text inside <cite> tags. Here's a very basic example of how to use a cite tag:

We went to look at the <cite>Mona Lisa</cite>.

Here's how that looks in the browser:

We went to look at the Mona Lisa.

I'll show an example of a citation with a link to the source in the example for the next element, <pre>.

<pre> - Pre-formatted

Use the <pre> element for pre-formatted text when exact linebreaks are vital, like in a poem. Here's how I would mark up William Carlos Williams' "This is Just to Say" using a heading, <pre> tags, and a <cite> tag with a link to the source:

<h3>This Is Just To Say</h3>

<pre>
I have eaten
the plums
that were in
the icebox

and which
you were probably
saving
for breakfast

Forgive me
they were delicious
so sweet
and so cold
</pre>

<cite>- <a href="http://www.poets.org/viewmedia.php/prmMID/15535">William Carlos Williams</a></cite>

And this is how that would look in the browser:

This Is Just To Say

I have eaten
the plums
that were in
the icebox

and which
you were probably
saving
for breakfast

Forgive me
they were delicious
so sweet
and so cold

- William Carlos Williams

By default, most browsers set text in a <pre> element in a monospaced font. You can, of course, change that with CSS.

<small> - Small text

Though HTML's <big> tag has been removed from the HTML5 specification, <small> lives on. There's some controversy in the web development world over whether it's semantically correct to use <small> or if we should only use CSS to make text smaller. Personally, I use <small> fairly often to add "fine print" to my posts.

You can create a <small> element like this:

<small>This is small text </small>

Here's how that looks in the browser:

This is small text

Exactly how small that small text is will vary depending on your blog's CSS and/or your reader's browser settings.

You made it!

That was the last lesson in this series. You're ready to write all your blog posts in HTML! If you're ready to learn more, check out Practical HTML for Bloggers - Further Reading.

Title cards for this series designed by the lovely & talented Jenna from Little Bit Heart.

Practical HTML for Bloggers - Images

Now that you've learned how to use HTML headings, HTML paragraphs, HTML lists, and strength & emphasis in your blog posts, you should be quite comfortable with the HTML that makes up most of your blog posts.

But, I bet you've been wondering, what's up with images? Today we're going to talk about them!

Images are Different

In the previous installments of this series, I've encouraged you to write your HTML elements "by hand", without relying on your blog's automation features.

Images are different, though. You should use your blog's built-in uploader to add images to your posts. The image uploader adds your image to your blog's file system and generates the HTML to make the images appear in your posts. All that in one step! This is much more efficient than creating image elements manually with HTML.

So, rather than show you how to make an image element from scratch, I'll show you what's inside the image elements your blog makes for you.

The Anatomy of an Image Element

If you look at the HTML view of one of your posts, you won't see any photos. Instead, you'll see the HTML that adds your image into your post.

Depending on your blogging platform, that HTML might be a single line of markup or a paragraph-length block of text. Let's start with the basics of what makes up an image element so you can recognize one when you see one. Then, I'll explain all the extra stuff you may see in your images' HTML.

Here's what an HTML image element looks like at its absolute bare minimum:

<img src="http://www.example.com/image.jpg" alt="description">

And here's what all those pieces mean:

1. IMG stands for "image". This lets the browser know that it's an image element.
2. SRC stands for "source". The source is the URL for where your image is stored in your blog's file system. When you upload your image through your blog's post editor, the source is automatically filled in for you with your image's URL.
3. ALT stands for "alternate text". An image's alt text describes the image for users with visual impairments. For more detail on alt text, see All About Alt Text.

If you've been following along with this HTML series, you may have noticed that there's no closing </img> tag like in other HTML elements. Good catch! The <img> element is one of the few HTML elements that don't have a closing tag.

Now, like I said, that's just the bare minimum HTML for an image. Let's look at a more detailed <img> elements.

Clickable Images

In this next example, the image element is wrapped with an <a> anchor element with an href attribute, better known as a link. The link wrapped around the image element makes the image "clickable". This clickable image would take the reader to a larger version of the photo when the photo is clicked.

<a href="http://www.example.com/larger-image.jpg"><img src="http://www.example.com/image.jpg" alt="description"></a>

Notice the </a> tag after the end of the image element? That closes the link.

Changing the Link

Usually, clickable images in blog posts are automatically linked to a larger version of the photo. But, if you want to link to something else, you can change the anchor link. For example, if you want to link an image to another blog post, you can change the URL after href, like this:

<a href="http://www.example.com/a-different-blog-post.html"><img src="http://www.example.com/image.jpg" alt="description"></a>

The image still looks the same, but now when it's clicked your readers will go to another blog post instead. You can use this same technique to link to anything else on the web, including other websites, of course!

Opening in a New Window

I'm not a big fan of opening new windows for users without warning, but that's just my personal preference. If you'd like an image to open in a new window when it's clicked, you can add target="_blank" to the link URL, like this:

<a href="http://www.example.com/a-different-blog-post.html" target="_blank"><img src="http://www.example.com/image.jpg" alt="description"></a>

That will open the link in a new window. Use with care, lots of people don't like new window surprises!

Common Attributes for Images

Many blogging platforms insert useful attributes into an <img> element. This information helps your images load faster and provides important information for your readers and search engines. Here are the attributes you may see when you view the HTML of your blog images.

Width and Height

Specifying the width and height of your image helps speed up your page load time because it lets the browser know exactly how much space an image needs, even before it loads.

Most blogging platforms automatically include your width and height information for you. They'll appear in the HTML for your image like this:

<img src="http://www.example.com/image.jpg" alt="description" height="500" width="500">

Technically, you can resize images by changing their width and height attributes in HTML, but it's not the ideal way to handle images sizes. There's a good article on why not to resize with HTML at About.com.

Alt

You may have noticed that I'm including an alt attribute with every image element example, including the "bare minimum" example. The alt attribute is that important.

Accessibility advocates and the W3C, the rulemakers of HTML, encourage us to include alt attributes for every image. For purely decorative images that would have no importance to readers with visual impairments, you can leave the alt attribute blank, like this: alt="". That tells screen readers to ignore the image.

Title

If you add a title attribute to your image element, your users will see the title as a "tooltip" on their cursor when they hover their cursor over your image. Give it a try, hover over this image:

A title attribute is intended to provide "advisory information" about an element. For images, good examples of advisory information are the name of the artist or photographer that created the image, copyright information, or the official title of an artistic work.

You can add a title attribute to an image like this:

<img src="http://www.example.com/image.jpg" alt="description" title="advisory information">

Titles are not required and do not replace alt text. When in doubt, just fill in the alt text and leave the title off.

Class

Adding a class attribute to an image is useful for CSS styling purposes. There are about a million different things you can do with CSS, but I'll show you one quick example just for fun.

I'm going to give this image the class of "rotate", then give it some instructions with CSS. Give it a try, hover over this photo with your cursor.

Did you see it move? That's the CSS rotate property at work! The CSS rules for that need a tutorial all of their own, and you can find a good one at http://davidwalsh.name/css-transform-rotate

Here's how you add a class to an image attribute:

<a href="http://www.example.com/larger-image.html"><img src="http://www.example.com/image.jpg" alt="description" class="rotate"></a>

Putting it All Together

Here's an example of the HTML markup for a clickable image with all of the attributes mentioned in this post. This may have looked like a big bowl of alphabet soup to you before, but I bet it makes a lot more sense now!

<a href="http://www.example.com/larger-image.html"><img src="http://www.example.com/image.jpg" alt="description" title="advisory information" width="500" height="500" class="rotate"></a>

Now that you're familiar with the working parts of an image element, you can confidently customize and alter them as needed to suit your posts.

What's Next?

You're almost done! Learn about a few more handy elements in Practical HTML for Bloggers - The Extra Elements

Title cards for this series designed by the lovely & talented Jenna from Little Bit Heart.

Photo by me, CC-BY-SA

Practical HTML for Bloggers - Strength and Emphasis

If you've been following along with this series, you've learned how to use HTML headings, HTML paragraphs, and HTML lists in your blog posts. You're pretty close to being able to write all of your posts in HTML, all the time!

Today we're going to talk about the HTML elements <em> and <strong>, and their older siblings, <b> and <i>.

Knowing about all four of these elements, and using them when appropriate, gives you maximum flexibility for styling and clarity. At the end of this post I'll show a few examples of how to put these different elements to creative use in blog posts.

Choosing the right element from this group of four is a lot like choosing the right tone of voice to say something in; it's a bit subjective, and it's hard to use them "wrong" as long as you know what each element stands for. So let's see what they do!

<strong> Strong

Use a <strong> tag to indicate very important text when it's not appropriate to use a heading element. Good candidates for the <strong> tag are warnings, disclaimers, and exclamations.

Here's how you create a strong element:

<strong>Extra important text here!</strong>

And here's how that looks in the browser:

Extra important text here!

<em> Emphasis

Use an <em> tag when you want to emphasize a word or phrase. I use <em> a lot (see what I did there?) when I want to mimic the stresses I'd use if I were talking to you out loud.

Here's how to create an emphasis element:

<em> I really mean it! </em>

And here's how that looks in the browser:

I really mean it!

<strong> and <em> vs. <b> and <i>

You've probably noticed that by default, the <strong> tag bolds the text, and the <em> tag italicizes it. If you're familiar with the <b> bold element and the <i> italic element, then you know that they bold and italicize text, too.

So, what's the difference?

Back in the early days of HTML, when web pages were mostly just text and blue links, the bold and italic tags were used to style text. Now that we have CSS to do our styling, many web developers feel that there's no reason to keep the bold and italic elements in the HTML specification. If you've talked to developers, you may have been told to never use <b> or <i> tags in your HTML.

However, the W3C, the governing body of HTML, disagrees. Both <b> and <i> are in the HTML5 specification and will remain a part of HTML for the foreseeable future. Though they're not as important as the <strong> and <em> elements, they do come in handy in certain circumstances, and you should know how they work!

<b> Bold

The <b> tag bolds your text, but does not assign the text any special importance. Good uses of the <b> tag are product names in reviews or keywords in an educational post.

You create a bold element like this:

Let's learn about <b>herbivores</b>!

Here's how that looks in the browser:

Let's learn about herbivores!

<i> Italic

The <i> tag italicizes your text, but does not give it any extra emphasis. It's good for marking up technical or scientific terms, and it's particularly useful if you blog in more than one language. I'll show you an example of how to style foreign-language text at the end of this post.

You create an italic element like this:

Let's talk about <i>Tyrannosaurus Rex</i>.

Here's how that looks in the browser:

Let's talk about Tyrannosaurus Rex.

That's all you need to know about <strong>, <em>, <b>, and <i> to start using them in your blog posts. But, if you want to try your hand at a little CSS, I can show you two examples of how to use some of these elements with style!

Two Creative Uses for These Elements

Now that you have the HTML basics of these elements in mind, I'm going to show you two examples of how you can use CSS to style different elements in useful ways. (RSS readers, you'll need to click through to see these CSS effects at work.)

For the sake of brevity I'm going to show the CSS styling the elements directly. You may need to add classes to the elements to style them the same way on your blog, depending on your template's CSS.

1) Super Strong!

Let's say you blog about dynamite and other explosives, and you mark up your warnings with <strong> tags. To make those strong statements really stand out, let's give them some intensity, like this:

DO NOT taunt a bear with a firecracker.

The HTML

<p><strong>DO NOT</strong> taunt a bear with a firecracker.</p>

The CSS

I enlarged the text and turned it red with this bit of CSS:

strong {
font-size: 1.6em;
color: red;
}

2) Italic for Foreign Language

One great use of the <i> italic tag is to highlight and clarify text in a foreign language. Let's say for example that you're a food blogger, and you cook the cuisines of the world. If you set all of your foreign-language food words with an <i> tag, you can use an HTML title attribute and a bit of CSS to help your readers.

Hover your cursor over the italicized & underlined word in this sentence:

Today I'm making dulce de leche

You should see a question mark cursor and some extra information about dulce de leche when you hover. Pretty cool, right? Here's how I did it:

The HTML

<p>Today I'm making <i title="Spanish - sweetened milk dessert">dulce de leche</i></p>

The CSS

I added the dotted underline and the question mark cursor with this little bit of CSS:

i {
border-bottom: 1px dotted gray;
cursor: help;
}

Those are just two examples to give you a taste of the infinite possibilities with these four useful elements!

What's Next?

Next, learn about the HTML of images in Practical HTML for Bloggers - Images.

Title cards for this series designed by the dazzlingly wonderful Jenna from Little Bit Heart.

Practical HTML for Bloggers - Lists

Now that you've learned all about HTML headings and HTML paragraphs, you're ready to move on to making lists! Today I'll show you how to add bullet-pointed lists and numbered lists to your blog posts with HTML.

It's true, you can make lists with the word processing features of a visual editor on most blogging platforms. But, I'm going to show you how to do it in HTML for three reasons (which I will present to you in an ordered list):

1. By the end of this tutorial series, I want you to be able to write entire blog posts in HTML with confidence.
2. You can make nested lists in HTML that are impossible to make in a visual editor.
3. I find it easier to edit HTML lists, while lists created in a visual editor can get messy in a rewrite.

Two Types of HTML Lists

The two most commonly used HTML list styles are: Unordered Lists and Ordered Lists.

An unordered list is a "bullet point" list, like this:

• Red
• Blue
• Yellow

An ordered list is a numbered list, like this:

1. Red
2. Blue
3. Yellow

Writing An Unordered List

An unordered list opens with a <ul> tag. UL stands for "unordered list".

The items in an unordered list are wrapped with <li> tags. LI stands for "list item". Makes sense, right?

So here's the very beginning of an unordered list:

<ul>
<li>Red</li>

Each additional item in the list gets wrapped in the <li></li> tags just like the first one, on and on until you've written the whole list. Once you've completed the list, close it with </ul>. This tells the browser that the list has ended and it's time to stop bulleting. Here's the markup of a completed unordered list:

<ul>
<li>Red</li>
<li>Blue</li>
<li>Yellow</li>
</ul>

Here's what that list will look like in the browser:

• Red
• Blue
• Yellow

Writing An Ordered List

The only markup difference between an unordered list and an ordered list is that an ordered list opens and closes with <ol> </ol> tags. OL stands for "Ordered List".

Here's the beginning of an ordered list:

<ol>
<li>Jump to the left.</li>

Each additional item in an ordered list gets wrapped in the <li></li> tags just like in an unordered list. Once you've completed the list, close it with </ol>. This tells the browser to stop numbering. Here's the markup of a completed ordered list:

<ol>
<li>Jump to the left.</li>
<li>Step to the right.</li>
<li>Put your hands on your hips.</li>
<li>Bring your knees in tight.</li>
<li>Pelvic thrust.</li>
<li>Do it again!</li>
</ol>

Now, here's how it looks in the browser:

1. Jump to the left.
2. Step to the right.
3. Put your hands on your hips.
4. Bring your knees in tight.
5. Pelvic thrust.
6. Do it again!

I just taught you how to do some HTML and the Time Warp. Multitasking!

Advanced List-Making

Now that you're familiar with how to make unordered and ordered lists, I'm going to show you how to combine them to make nested lists. This is handy for any list that has subtasks or multiple-choice steps/ingredients.

For this example I'm going to show you the finished list first, then the HTML markup.

1. Tulle
2. Your choice of:
   • ribbon
   • baker's twine
   • burlap sash
3. Washi tape
4. Hot glue
5. Glitter

See the sub-list of material choices? That's an unordered list nested inside our ordered list as a list item. Here's how I inserted the unordered list into the ordered list (I've highlighted the <li> and <ul> tags so you can see how that works):

<ol>
<li>Tulle</li>
<li>Your choice of:
<ul>
<li>ribbon</li>
<li>baker's twine</li>
<li>burlap sash</li>
</ul>
</li>
<li>Washi tape</li>
<li>Hot glue</li>
<li>Glitter</li>
</ol>

Make sure to close both the unordered list and the list item, otherwise the list will get all screwed up.

Editing HTML Lists

If you forgot an item or need to move things around in an HTML list, all you need to do is cut the list item you want to move, then paste it at the correct position in the list. Make sure you cut and paste the entire list item, including the starting <li> and the closing </li>. Isn't that tidy? No stray bullets, no extra numbers, just cut & paste!

What's Next?

Now you're ready to learn about strength, emphasis, bolding, and italicizing in Practical HTML for Bloggers - Strength and Emphasis

Title cards for this series designed by the dazzlingly wonderful Jenna from Little Bit Heart.

Practical HTML for Bloggers - Paragraphs

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.

Practical HTML for Bloggers - Headings

Practical HTML for Bloggers begins today! In this series, I'm going to focus on HTML elements you can use in your blog posts right away. All you need to use this series is your blog and its HTML post editor. On most blogging platforms, you can get to the HTML editor with one click on the HTML button, link, or tab in your post editor.

All set? Let's start right at the top, with headings!

Three Uses for Headings

Useful, relevant HTML headings in your blog posts make it easier for your readers to enjoy your posts, and help search engines accurately categorize your posts. Here's how:

1. Skim-ability: I bet you used this heading-enabled ability when you first landed on this post! Section headings make it easier for your readers to skim through a post to find out what it's about at a glance. Also, skipping sections and re-reading are easier with headings.
2. Accessibility: HTML headings make it possible for visitors who use screen readers to skim and skip through your post with the same ease as a sighted visitor.
3. Searchability: Search engines use the headings within a post to determine what the post is about and measure its relevance to search terms.

How to Make an HTML Heading

HTML headings look like this:

<h3>Heading Here</h3>

In your HTML post editor, you "wrap" your heading with an opening heading tag in front of the heading, and a closing heading tag after the end of the heading (the slash in front of the element name makes it a closing tag).

By now I'm sure you're wondering what the numbers in heading tags mean, and why I showed you an <h3> instead of an <h1>. So, let's talk about the hierarchy of HTML headings!

Six Levels of Headings

Now that you know what headings are good for and how they're written, let me explain what those numbers in the tag mean.

There are six heading levels in HTML, <h1> through <h6>. The numbers indicate importance: <h1> is the most important, <h6> is the least important.

For bloggers, this hierarchy can be a little bit confusing, since you're not writing your page from scratch. To determine which heading level you should start with in your posts, first you'll need to find out what heading level your blogging platform has assigned to your post titles.

There are two ways to find out:

1. If you're using Firefox, you can hover your cursor over a post title on your blog and right click "Inspect Element". In this image you can see that my post titles are <h3> elements.

2. Alternatively, you can use your browser's source view to check your blog's source code and find your post title and the heading tags wrapping it. In this image you can see my post title in source view.

Your in-post subheadings should start at the next heading level below your post title's heading level. So, for example, if your blogging software assigns a heading level of <h3> to your post titles, you should give the subheadings within your post a heading level of <h4>. Any sub-subheads (it happens!) should be <h5>, and if you subhead even further, those should be <h6>.

It's ok to stay at one heading level throughout your post as long as that level is below your post title, and all of the subheadings in your post are of equal importance. For example, this post's title heading is an <h3>, and all the subheadings in the post are <h4> because they're equally important.

Heading Sizes

The six heading levels all have a different font size by default. An <h1> heading is the largest, and an <h6> heading is the smallest. The actual font size of your heading will vary depending on your blog's CSS styling. But, don't be tempted to use heading tags just for the size — that wrecks the experience for screen reader users, and confuses search engines. There are other ways to add emphasis to non-heading elements, and I will fill you in on that later in this series. Promise!

How Many Headings to a Post?

Use a light touch with headings — too many headings on a page are just as confusing to readers (and search engines) as no headings at all.

The perfect amount of headings for your post varies based on the length and content of the post. The post title is often all a short post needs. Lengthy or complicated posts may need several headings and/or nested subheadings.

Give it a Try!

Next time you write a long blog post, switch over to your HTML editor and add HTML headings. You'll give your readers a quick way to scan through your post, and tell the search engines what your post is all about.

What's Next?

Now that you're familiar with headings, you're ready to learn about HTML paragraphs in Practical HTML for Bloggers - Paragraphs

Title cards for this series designed by the absolutely wonderful Jenna from Little Bit Heart.

Practical HTML for Bloggers Starts Soon!

Remember that secret project I dropped hints about back in May? I'm finally ready to announce it!

Next Thursday, October 11, 2012, I'll begin posting my newest tutorial series:

Practical HTML for Bloggers

So what do I mean by "Practical HTML"?

I've found that I learn new things faster when I can apply that new knowledge to something practical, right away. Most HTML tutorials for beginners start you out at the very beginning, with nothing but a blank page. But, a blogger doesn't work on a blank page; most of the structure of your blog is already there thanks to your blogging platform/CMS.

So, in this series, I'll teach you about the HTML elements you can use within your blog posts to improve the quality and clarity of your posts. After each tutorial, you'll be able to use a new HTML element in your next blog post with confidence and aplomb! And, once you finish the series, you'll be ready to move on to more comprehensive tutorials if you're so inclined ;)

You may be wondering why, exactly, I'm teaching you to use HTML in your blog posts. Aren't you getting along just fine with your rich text editor? Here are three reasons why the HTML knowledge you gain from this series will improve the quality of your blog.

1) HTML Clarifies Your Writing for Readers (and search engines)

HTML is very similar to punctuation, in that it provides a structure for your writing that makes it easier for your readers to understand. Honestly, I'd argue that HTML is easier to learn — and way less quirky— than actual punctuation!

On the web, your readers are both human and non-human. When you take advantage of the elements of HTML to format your post, it's easier for your human readers to read, skim, and digest the information in it. And, you also make it easier for search engines to understand the structure of your post and determine how relevant your post is to keyword searches.

2) HTML Gives You More Control

Using HTML elements in your blog posts will give you much more control over how your posts look, both on your blog and when the posts are consumed in other formats such as RSS feeds, "read later" services like Instapaper, or with your readers' own custom stylesheets.

That control extends to the style of your posts, too. When you use HTML elements in your posts, you gain the option to style your posts with CSS. If you've ever noticed blogs with cool pull quotes or custom fonts in the body of a post, they're using CSS, enabled by the use of HTML elements.

3) HTML Improves Accessibility

HTML elements like headings, paragraphs, and lists improve the accessibility of your blog for visitors with disabilities by simplifying navigation within the post and enabling skimming with screen readers and other assistive technologies.

Don't think you have any people with disabilities in your audience? That's a common misconception, especially among bloggers with highly visual content. I recommend you check out this post from web accessibility expert Katie Cunningham: So, You Don't Have Any Disabled Users?

I'll expand on these three reasons throughout the series, and give you even more reasons to love HTML as we progress. I can't wait to get started!

Your Homework This Week

Ready to get started? I've got one super-quick assignment for you this week so you'll be ready to jump right in next Thursday.

Your Assignment: Find out how to write and edit HTML posts on your blogging platform. Hint: for most platforms, you can switch over to HTML view with one click.

Title cards for this series designed by the absolutely wonderful Jenna from Little Bit Heart. She is the best.