Learn to customize your own blog with confidence
Code it Pretty is an archive of tutorials from 2012-2015. Tutorial details may be outdated. More Info
On 10/24/12 I had another Hangout with Blogger. We talked about why I chose Blogger as my platform for Code It Pretty. If you missed it, the whole Hangout video is still available at:
Hangout on Air: Why I Chose Blogger (in a Nutshell)
Many thanks to those who attended the live Hangout for your questions and feedback!
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!
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!
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!
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!
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!
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!
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.
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.
<p><strong>DO NOT</strong> taunt a bear with a firecracker.</p>
I enlarged the text and turned it red with this bit of CSS:
strong {
font-size: 1.6em;
color: red;
}
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:
<p>Today I'm making <i title="Spanish - sweetened milk dessert">dulce de leche</i></p>
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!
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.
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):
The two most commonly used HTML list styles are: Unordered Lists and Ordered Lists.
An unordered list is a "bullet point" list, like this:
An ordered list is a numbered list, like this:
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:
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:
I just taught you how to do some HTML and the Time Warp. Multitasking!
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.
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.
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!
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.
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.
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!
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!
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?
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.
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.
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.
If you saw my Blogger Hangout yesterday, you may remember that I talked a bit about Blogger's new Custom Page Not Found option, which allows you to control what your visitors see if they follow a dead link to your blog. As an example I showed the custom error page I made for my blog.
That's just a screenshot, you can check it out live here Page Not Found.
I promised I'd share the HTML and CSS I used to make that happen, so here it is!
This is HTML format I used in the field under Settings > Search Preferences > Custom Page Not Found:
<div class="notfound">
<div class="suggestions">
<h2>Uh oh, page not found!</h2>
<h3>Were you looking for one of these tutorials?</h3>
<ul>
<li><a href="">Link One</a></li>
<li><a href="">Link Two</a></li>
<li><a href="">Link Three</a></li>
</ul>
</div>
</div>
To use that template, you'll need to fill in your own links inside the quotation marks after each <a href=, and the titles of your links between the angle brackets of the <a> </a> tags.
After I saved the HTML markup, I entered these CSS rules in Template > Customize > Advanced > Add CSS:
.status-msg-border {visibility: hidden; }
.notfound {
background-color: white;
background-image: url(YOUR IMAGE URL HERE);
height: 400px;
}
.suggestions {
width: 80%;
margin: 0 auto;
position: relative;
top: 20%;
background: white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.suggestions h2 { padding-top: 3em; }
.suggestions ul {
list-style: none;
padding-bottom: 3em;
}
If you're using this CSS, you'll need to add your own background image url into the parentheses in background-image: url(), otherwise the whole thing will just be white.
Here's what each of those rules do, one by one:
Again this is just an example of what you can do with the new Custom Page Not Found option. You can get very creative with CSS and match the page to the look and feel of your blog. Have fun!
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!
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:
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!
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:
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.
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!
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.
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.
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.
This afternoon, I gave a live tutorial on Blogger search features during Blogger's "Hangout on Air". If you missed it, you can watch the video on YouTube:
Hangout on Air: Blogger Search Features 101
Big thanks to the Blogger team for having me, and thanks to everyone who cheered me on live :)
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:
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.
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.
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.
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!
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.
