HTML was one of the first things I took notes on when I first started blogging. I wanted to know what did what and how to make this do that. All of my posts are written on the Text side of WordPress (aka the HTML side). Very rarely do I use the Visual side to write my posts. I’ve been writing in this format ever since I was on blogger. It just always made it easier and made my control-freak self feel like I was in control of the look/feel of my posts. 😉 I forget sometimes that a lot of newbie bloggers (or maybe even some veteran bloggers) may not be comfortable with HTML. So I’m giving you a cheat sheet. In this #bloggingedumacation, I’m sharing some common HTML used in blogging.
So before we get started, let’s talk about some HTML basics. All HTML codes start with a tag and always close with a “closing tag”. Let’s take a look at what I’m talking about…
<strong>This html turns your text bold</strong>
The <strong> is the opening tag of HTML. Anything that comes after that opening tag will be turned into whatever you told the text to do. So for in the example above, the text will be bold. In order to turn the bold text off, you need a closing tag. The closing tag in the example of above is </strong>. The forward slash is what closes the tag. But the entire tag is super important to turn “off” whatever it is you had asked the text to do.
Okay, so now let’s talk about some common HTML used in Blogging:
<br> = page break (inserts a page break aka makes your text appear on the next line down)
<b>bold</bold> = also is another code for bold
<u>underline</u> = underline’s your text
<strike>strikethrough</strike> = creates a strikethrough on your text
<font size=”5″>makes your font size bigger</font> = make your font size bigger or smaller, just change the number!
<font color=”red”>colored text</font> = change the color of your text
<a href=”http://pinkheelspinktruck.com/”>Pink Heels Pink Truck</a> = create a link with text
rel=”nofollow” = turns your links into ‘no follow’ links (use this code on all links that you’ve been paid to write about or received product in exchange for a post (read this #bloggingedumacation post for more details on “No-Follow” vs “Do-Follow”)
You would insert the code above in this manner:
<a rel=”nofollow” href=”http://pinkheelspinktruck.com/”>Pink Heels Pink Truck</a>
<img src=”http://pinkheelspinktruck.com/wp-uploads/blogging-edumacation-graphic.jpg”> = inserts an image (just insert your image link in between the quote marks)
<center>Centers your text within your text body</center>
Want more blogging help? Check out my podcast! Boss Girl Creative
(Where I Party)
Shanice Cameron says
This is such a helpful post! As a web designer, I’m always sending HTML codes to my clients via email when they need to add something simple to their posts and sidebars. So, I’m sure a post like this will come in handy for a lot of bloggers who aren’t familiar with HTML. Sharing this!
Sharon Wilharm says
Thank you so much for this! I have really wanted to highlight words in a different color and had no idea how to do that. I just tested it, and it worked! Now I’m looking into more HTML and CSS so I can try some more advanced options. Thanks!