…An introduction to HTML for beginner Web Editors and Bloggers.
EDITOR’S UPDATE: Although these tips may work, some of them are out of date and not considered to be best practice.
Please reference the Super Handy HTML Cheat Sheet: Take 2 for the most recent and correct informaiton. Thanks!
If you’re going to be managing—or regularly contributing to—a WordPress blog, it’s helpful to know some basic HTML. I know it can seem a bit intimidating, but it’s just like anything else in life—it’s not as complicated as it looks. And it’s your friend! It can help you to do amazing things when telling your story to the world.
You are painting a picture with words on the internet. The more brushes you have in your art kit, the more freedom you have on the canvas. You don’t even have to memorize anything. You just have to copy and paste, but you have to be able to find the code you need.
Write this down. Get out a pen and paper and write what I am about to give you: four words that are going to expand your knowledge exponentially without any effort at all. Ready? Write:
Did you Google it?
…in nice big letters and tape it next to your computer. When you can’t figure something out, go to the internet browser of your choices and search for it, and get as specific as you want.
Or be as vague as you want and see what catches your eye…
The codes are there for you to use! You just have to find them, copy them, and paste them in the right places in the Text view of your blog or website.
Let’s break it down.
HTML stands for HyperText Markup Language, and it’s a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects in your blog and on your website. You can see your blog post HTML by viewing the “Text” instead of “Visual.”
Sure, you can make things bold or italic using the controls in WordPress…
But sometimes, no matter what you do, things in the Visual window just won’t work right. The spacing seems off, something won’t center, you can’t seem to make a space after your numerical list or series of bullet points… There are times that it’s simply easier (or more effective) to work in the Text view and insert the HTML than to switch views from Text to Visual to insert the proper command.
Here are the HTML codes I use most in my WordPress blogs. I hope you find them handy.
<b></b> Creates bold text
HTML Sample: To make text <b>bold</b> simply insert the code. It’s important to remember the command to close the bold command on the other side of the word or words you want <b>bolded</b>.
Visual Sample: To make text bold simply insert the code. It’s important to remember the command to close the bold command on the other side of the word or words you want bolded.
<i></i> Creates italic text
HTML Sample: Some people use italics for movie titles in their posts. <i>Gone With The Wind</i>, or </i>Die Hard</i> would then be italicized.
Visual Sample: Some people use italics for movie titles in their posts. Gone With The Wind, or Die Hard would then be italicized.
<font size="3"></font> Sets size of font, from 1 to 7
Want to change the size of your font? You have 7 options for font sizes in your WordPress blog posts.
<font color="green"></font> Sets font color, using name or hex value
You can make your fonts pretty much any color of the rainbow using their hex values which you will find HERE!
<a href="URL"></a> Creates a hyperlink
So for example you would see this in the Text view:
This is a <a href=”https://twitter.com/cjarabia” target=”_blank”>HYPERLINK</a> to my twitter profile.
Which looks like this in the Visual view:
This is a HYPERLINK to my twitter profile.
You’ll notice that after the url I added target=”_blank” to the code. This will force your hyperlink to always show up in a new tab, instead of linking people away from your website.
<a href="mailto:EMAIL"></a> Creates a mailto link
You are going to bet a much better response from a call to action that involves emailing someone if you make their email address a MailTo link.
You will see this in the Text view:
Send us your ideas at
<a href="[email protected]">[email protected]</a>.
And this in the Visual view:
Send us your ideas at [email protected].
<br> Inserts a line break
Great for lists.
<p></p> Creates a new paragraph
Very useful when you’re having spacing issues and need to force a new paragraph.
But now you might be wondering, what the difference is between an line and a paragraph break…well, I’ll show you.
So there is a space between a paragraph break, and no space between line breaks.
Bonus code:
<tt></tt> Creates teletype, or typewriter-style text
Simply wrap those little tt codes around your text and you’ll get a cool old fashioned typewriter effect on your font like this.
Those are just some of the HTML basics that I use the most when blogging and writing articles.
What are your favorite HTML codes? Let us know and we’ll put together a printable cheat cheet for everyone to share and referenece!
16 Comments