Welcome to the Easy HTML Codes Cheat Sheet for Bloggers
Here’s the thing. Whether or not you’re a tech-y person, whether you love it or hate it, if you’re a blogger, you will come across HTML code in one way or another. Instead of running and hiding, let’s learn the basics so you can own it like the awesome blogger you are! 😉
I’ve created this cheat sheet so you can copy/paste the code you need 🙂
Bold / Strong Text
Both these tags will get you the same result visually but there’s an important distinction between the two that I’ll talk about in a minute.
Bold Text
<b>This text is bold</b> and this is normal text.
Strong Text
<strong>This text is bold</strong> and this is normal text.
From an aesthetic point of view there is no difference between a bold or strong text. They both look well… bold. From a SEO point of there is a difference. Bold text or text surrounded by the <b> tag is just that, text that has been stylized to look bold.
Using the <strong> tag on the other hand, while it looks just like bold text, signals that a piece of text emphasis or is more important than other text around it. So keep that in mind when deciding what text to bold or emphasized.
Italicized / Emphasized Text
Italicized and Emphasized text are very similar to Bold vs. Strong text above. They visually look the same (italicized) but semantically speaking, they are different so keep this in mind when choosing one of the other.
Italicized Text
<i>This text is in italics</i> and this is normal text.
Emphasized Text
<em>This text is emphasized</em> and this is normal text.
Crossed Out Text
Crossed our or strike out text looks like this. For this to happen you need to surround the text with the <del> tag like so
<del>This text is striked out</del> and this is not.
Underlined Text
To underline text, you simple add the <u> and its closing partner. Do keep in mind that many times users expect underlined text to be signaled linked text, so use with caution.
<u>This text is underlined</u> and this is not.
Link
If you learn nothing else from this guide, please learn this HTML code. I can almost guarantee you’ll need it at one point or another in your blogging life! All you have to do to add a link it to use the anchor tag <a> followed by the hyperlink before what you want to link and the closing anchor tag, </a> after it like such:
<a href="LINKHERE">This is a link</a>
Link In A New Window
In order to get a link to open in a new window, you must add the target attribute set to _blank.
<a href="LINKHERE" target="_blank">This is a link</a>
No-Follow Link
Another blogger must-know. If you’re writing sponsored posts or using affiliate links, you have to make those links no-follow. You can do that by adding the rel attribute. Otherwise, all links are do-follow links.
<a href="LINKHERE" rel="nofollow">This is a link</a>
Want to learn more about No-Follow links and when to use them? Read the Bloggers’ Guide to No-Follow Links
Adding An Image
Adding images using HTML is no different than adding links or the like. The first thing you need to do is upload the image somewhere and get the direct link to the image. On WordPress, you can add the image under “Media” in the dashboard. Once the image is done uploading, click “Edit”. You’ll be taken to Attachment Details page. On the right side of the screen, find the URL text box. This is the URL you will use in the code below.
<img src="IMAGEURL"/>
Image Attributes
With HTML you can do a lot more than simply adding an image. There’s a lot you can specify regarding that image through attributes, here are the basic ones
- Width and Height:
width="200" height="auto"
- Title:
title="King's Cage Book Cover"
- Alt Tag:
alt="Victoria Aveyard's King's Cage, the third book in the Red Queen series"
If you put all of those together, it would look like this.
<img src="IMAGEURL" width="200" height="auto" title="King's Cage Book Cover" alt="Victoria Aveyard's King's Cage, the third book in the Red Queen series"/>
And produce the following image –
Adding A Linked Image
So what if you want to add an image that links somewhere? Simply wrap the image code with the anchor tags, essentially replacing the text with the image code as such:
<a href="LINKHERE"><img src="IMAGEURL" width="200" height="auto" title="King's Cage Book Cover" alt="Victoria Aveyard's King's Cage, the third book in the Red Queen series"/></a>
Headings
Have you ever wondered how to add sub-headings or different title sections to your posts? Headings tags are it! Think of and treat heading tags as the outline of your blog posts. They are the labels to the different sections of your blog posts.
You have headings 1-6 at your disposal:
<h1>Main Heading</h1>
<h2>Heading</h2>
<h3>Sub-Heading</h3>
<h4>Sub-Heading</h4>
<h5>Sub-Heading</h5>
<h6>Sub-Heading</h6>
How each heading looks varies by theme but generally speaking the lower the number, the higher the priority, therefore usually bigger font. Some themes will also switch colors and even fonts for each heading.
However, headings shouldn’t be used for their design. They are used to provide structure to, and help organize, your blog posts.
<h1>
should be reserved for the blog post title (usually coded into a theme’s structure already. So when adding heading tags to your blog posts, start with <h2>
for all the main sections, <h3>
for sub-sections and so forth.
Adding a break
To add a break between two lines of text or after any other elements, you can add the self-closing br tag.
<br />
Blockquote
So if you are quoting another blogger, article, or book, you can use the <blockquote> tag to let your readers and Google know you’re quoting someone and not stealing this content.
<blockquote>This is a blockquote</blockquote>
The look of a blockquote section changes depending your theme but here’s an example on my site
The <blockquote> tag specifies a section that is quoted from another source. (w3schools)
Horizontal Line (Horizontal Rule)
Do you ever wish you could separate out your content with a nice horizontal line? You totally can using the <hr /> tag
<hr />
It looks like this –
Lists
Lists are another great way to break up the text of your post and make ton of information easier to digest. Here’s how to add both ordered and unordered lists!
Ordered / Numbered List
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
Looks like this:
- List Item 1
- List Item 2
- List Item 3
Unordered / Bulleted List
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Looks like this:
- List Item 1
- List Item 2
- List Item 3
HTML Cheat Sheet: HTML codes every blogger should know!Click To Tweet
Phew! That was a lot of HTML code but it’s honestly all so simply and all bits you should know a blogger. Trust me when I say you’ll need these at some point or another and knowing this little bit of HTML will make you a stronger, better blogger!
Photo by Andrew Neel on Unsplash
I love this guide!! It’s amazing how these little subtle differences can have a huge impact on your SEO. Thank you for sharing!
P.S. Love the new layout of your website! ☺️
For sure – all those little things really add up for SEO!
And thank you so much Miranda!
These are so handy! I’m going to be referring back to this all the time!
I honestly use these ALL the time writing posts!
Great list! Knew a few of these so the new ones are super helpful
Thanks! I honestly use all of these all the time when writing posts!
This is what I needed. It is so easy to follow all the information on WordPress . Thank you. Now I can set up a Blog
This is so helpful! I just took the first step in starting a blog for the first time, there’s so much to learn it’s overwhelming! This is so simple and easy to follow, thank you for sharing!!