As bloggers we usually worry more about the projects we’re posting & the SEO to go along with it right? We don’t usually think too much about how to make a word bold or italic–I mean there are buttons for those right?
Well what about when you want to create a cute sidebar widget area? HTML should be used since it’s better for search engines and overall design.
Plus it’s really simple! (pinky promise!)
HTML Basics for Bloggers
Have you ever clicked the html tab in your post editor? It looks like this:
When you click it the post looks all funny with added characters mixed in:
Most of us don’t need to use that very often and with all the ‘short-cut’ buttons available in the visual editor portion of the post editor we shouldn’t need to for the basics.
But still, sometimes, it’s better to know some basic html.
Perhaps you would like to make some text bold:
<strong>Bold Words</strong> will do this: Bold Words
Need to place some emphasis on a word? Try italics.
<em>emphasis</em> will place emphasis on a word.
Do you need to center an image or some text?
<center>Words To Center</center> will center them:
Words To Center
Need to quote someone in your post? Block quotes will indent and separate it for you.
<blockquote>When Life Hands You Lemons</blockquote> will do this:
When Life Hands You Lemons
(you can change the way a block quote looks using CSS but we won’t get into that here since it is more in depth. Just know that your block quote might look different than this one)
Underlining text isn’t used that often online because it can so easily be mistaken for a link but if you have the need to do it here’s how:
<span style=”text-decoration:underline”>Underline This Text</span> will Underline This Text
Need to Insert an image? (we’ve covered this before in my very first post here on 30 Days: How to Create Your Own Blog Button)
<img src=”http://www.thirtyhandmadedays.com/wp-content/uploads/2012/11/Free-Printable-Cheat-Sheet.png”> will do this:
How about linking a word to a specific page?
<a href=”http://www.creativekristi.com”>Creative Kristi</a> will do this:
Do you need to create an image that is linked to a web page (like a blog button!)?
<a href=”http://www.thirtyhandmadedays.com”><img src=”http://www.thirtyhandmadedays.com/wp-content/themes/30daysv2/images/1-1.jpg”></a> will do this:
Perhaps you need to cross something off a list?
<s>I am totally organized</s> will do this:
I am totally organized
And the best part? You can combine the tags to create a different effect:
<strong><em>This is really important</em></strong> will do this: This is really important
Whew! That’s a lot for the basics isn’t it?
Worried you will forget it? Never fear! I have created a free printable HTML cheat sheet just for you! It is in pdf format and I split it into two 6 inch by 4 inch boxes so you can tape them up in your desk area or inside a binder for easy reference.
Want to download it?
Click the image below to be taken to the page to download!
If you have any questions please feel free to ask in the comments below! I will do my best to answer them!