HTML Cheat Sheet: 19 Essential Tags for Non-Techie Bloggers

HTML coding is for developers, not bloggers, right? That’s true to a certain degree. The WordPress blogging platform makes it almost unnecessary to know HTML.

Compared to years ago, I almost never use HTML. Back in the day, I used to hand-code my sites. Of course, it took forever and they didn’t look very good. 🙂

But there are times that you’ll need to know some HTML. (And given that you’re reading this post, I’m guessing that you need it now.) 

To help you, I’ve created this HTML cheat sheet with all the essential tags.

Let’s get started!

What You’ll Learn

Here’s what you’ll learn in this post:

• How HTML Works
• When You Need HTML

19 Ways to Use HTML: HTML Cheat Sheet

• 13 Text Formatting HTML Tags
• 3 Image Formatting HTML Tags
• 3 Hyperlink HTML Tags

How HTML Works

As you’ve probably noticed, HTML requires an opening and closing tag. Each tag modifies what follows it. When you want to stop modifying the content, you need to tell it to stop. So you insert a closing tag. For example:

To create this bolded header: How HTML Works

You would enter this: <b>How HTML Works</b>

As you can see, there is an opening bold tag <b>. To stop it from bolding the rest of the post, you need to add a closing bold tag </b>. It really is that simple.

As you write a new post, you’ll see the option to switch between Visual and Text mode (see image below).

Important: You must be in Text Editor mode to edit HTML code.

When You’ll Need HTML

While the Visual Editor will work for most settings, there are times that you’ll need to get into the HTML code. Here are a few examples:

1. Copy and Paste From Another Page/Site: Maybe you copied a line of text from somewhere else on your site and now everything is gone weird on your post. Don’t worry! Switch to the Text Editor mode and take a look. The most common issue is the errant addition of <div> tags. These can mess up any page. To fix the formatting errors, just delete all instances of the <div> and </div> code.
2. Add Images to Sidebar: To create custom buttons or ads in your sidebar, you’ll need to know a little basic HTML. It isn’t hard – and there is a section below for that.
3. Fix Wonky Formatting: Sometimes things just go sideways. Maybe your header has become part of your ordered list. Or a paragraph is center aligning with the photo below it. With the basic HTML explained below, you’ll fix this in no time.
4. Improve Your Blog Formatting: Sometimes the presets just don’t cut it. With some basic HTML, you’ll be able to tweak your post and improve its design and readability.

HTML Cheat Sheet: 19 Ways to Use HTML in Your Blog

In this post, I’ll give the opening/closing tags to accomplish each of the features. Make sure you are in Text Editor mode when you use these!

Here’s your HTML cheat sheet: the 19 HTML tags for non-techie bloggers:

13 Text Formatting HTML Tags

1. Paragraph: <p>Paragraph text</p> You won’t need to add these. WordPress is smart enough to break your paragraphs automatically. But you might want to force a break – especially in your sidebar if you add a combination of text and images. 
2. Heading: <h1>Heading 1</h1> These are available in six different levels: H1 – H6. The appearance of these preset headers depends on your theme settings. A general rule of thumb is to never use H1. This is reserved for your blog title – and used automatically by your theme. Use H2 to show primary content themes and H3 for sub-sections. I never use H4-H6. Heading tags are important for both organizing your content for readers and search engines. It clearly defines what your text copy is about.
3. Block Quote: <blockquote>These are great for highlighting content or quotations.</blockquote> If your theme allows, these will often intent, add a colored background and make them italic. It all depends on what the theme presets are.
4. Bold: <b>Make it Stand Out!</b> This is good to use for headers (I often bold my H2 headings) and key expressions in the post. If not overused, bolded text makes the post more scan-able. You can also use the code <strong></strong>. This tag will give the same result as bold.
5. Italic: <i>Add emphasis with italics</i> These are good for questions and for highlighting individual words and phrases. You can also use the code <em></em>. This tag will give the same result as italics. The <em> is short for “emphasized”.
6. Strikethrough: <s>This is a good way to update your post, without deleting the incorrect information.</s>
7. Underline: <u>Similar to bolding, but not as common</u> Underlining helps draw the eye to key points. Might work well for a header or a call to action. I generally don’t use underlining.
8. Ordered List (numbered): <ol>Complete list</ol> This will create a numbered list of points (just like this list). Each item on the list will open/close with the tags <li>List Item</li>.
9. Unordered List (bulleted):  <ul>Complete list</ul> This will create a bulleted list of points. Each item on the list will open/close with the tags <li>List Item</li>.
10. Paragraph Alignment: Paragraphs and headers can be left, right, and center-aligned. <p style=”text-align: center;”>Your paragraph here</p>
11. Header Alignment: Headers are more often centered. Here’s how to do it:  <h3 style=”text-align: center;”>Your heading here</h3>
12. Page Break: Using the single tag <br /> you can create a forced, measured space. This might be useful for creating a space between text and graphics. Note: this only needs one tag – and there is a space between the “br” and the “/”.
13. Horizontal Line: Place a horizontal line anywhere in your post. This is good for dividing content. Enter the single tag <hr /> Note: this only needs one tag – and there is a space between the “hr” and the “/”.

Want to use more than one tag at a time? No problem! Here’s how it will look:

To create the header below (a bolded H2 header) you’ll type this: <h2><b>3 Image Formatting HTML Tags</b></h2>

3 Image Formatting HTML Tags

1. Insert Image: <img src=”https://yourdomain.com/yourimageurl.jpg/”> This is another example of a single tag. Because it is only inserting an image, this is all that’s needed. There is no closing tag.
2. Image Align: Inside of the image tag above, you’ll insert the following: <img src=”https://yourdomain.com/yourimageurl.jpg/” align=”right”> In place of the word right, you can also insert “left” or “center”.
3. Image Dimensions: By adding the dimensions of the image, your page will load faster and will help search engine ranking. <img src=”https://yourdomain.com/yourimageurl.jpg/” width=”100″ height=”150″>. This is something I haven’t done much of.

3 Hyperlink HTML Tags

1. Link Text: <a href=”http://yourdomain.com”>Your Anchor Text</a> This code will turn the anchor text into a clickable link. Your anchor text can be any word (or set of words).
2. Link Image:  To turn a link into a clickable button or ad, just combine two elements. Instead of using anchor text like in the above example, use the image code. For example: <a href=”http://yourdomain.com”><img src=”https://yourdomain.com/yourimageurl.jpg/”></a> will turn the image into a clickable button that directs to the url you entered. Don’t forget your closing tag of </a> or else everything below that on the page will also become a hyperlink.
3. Control Where Link Opens: Generally speaking, you’ll want your links to open in the same tab as it was clicked. This is the default, so you don’t need to add any extra code for this to happen. If you are linking to another site (including an affiliate offer) you should add target=”_blank” to the link code. For example: <a href=”http://yourdomain.com” target=”_blank”>Your Anchor Text</a>. This keeps your original tab open for your reader to return to, after they finish reading the new page. This also works on the linked image code.

So there you have it! The complete HTML cheat sheet for bloggers.

Knowing how to use HTML is important. Now learn about how to properly format your post. Of course, no amount of formatting can cause readers to overlook heinous word crimes.

Here’s how to edit blog posts that you didn’t write.

Your Turn

What HTML causes you problems? Is there one I’m missing?

Please share it in the comments below.