Easy HTML Codes Every Blogger Should Know

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!

---

[clickToTweet tweet=”HTML Cheat Sheet: HTML codes every blogger should know!” quote=”HTML Cheat Sheet: HTML codes every blogger should know!”]

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