• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

    Announcement Bar

    • Bloglovin
    • Dribbble
    • Facebook
    • Instagram
    • Pinterest
    • Twitter

    Welcome to 259 West, formerly known as freeborboleta!

  • Support
  • Log In
  • Cart

259 West

Lifestyle Blog + Design Studio specializing in feminine custom WordPress design and themes

  • Themes
  • Services
    • Web Services
    • Portfolio
  • Blog Planner
  • Blog
  • About
  • Contact

Easy HTML Codes Every Blogger Should Know

09.26.17 • Blogging Tips

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 🙂

Full HTML cheat sheet for bloggers. Simply copy/paste the HTML codes you need. Everything from adding links, images, linked images, and much more!

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 –

Victoria Aveyard's King's Cage, the third book in the Red Queen series

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:

  1. List Item 1
  2. List Item 2
  3. 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

Pin
Tweet
Share

About Fran

Hi there! I'm Fran and welcome to 259 West, lifestyle blog + design studio! This little place is parts blogging tips, printables, books, with a dash of life. I look forward to getting to know you!

Get monthly emails with insights into my life + latest blogging news.

Reader Interactions

Comments

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Miranda Nahmias says

    09.26.17 at 10:22 am

    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! ☺️

    Reply
    • Fran says

      10.03.17 at 3:40 pm

      For sure – all those little things really add up for SEO!

      And thank you so much Miranda!

      Reply
  2. Jane Davidson | Typically Jane says

    09.26.17 at 2:50 pm

    These are so handy! I’m going to be referring back to this all the time!

    Reply
    • Fran says

      10.03.17 at 3:47 pm

      I honestly use these ALL the time writing posts!

      Reply
  3. Jen says

    09.28.17 at 9:02 pm

    Great list! Knew a few of these so the new ones are super helpful

    Reply
    • Fran says

      10.03.17 at 3:48 pm

      Thanks! I honestly use all of these all the time when writing posts!

      Reply
  4. Ismay Ramus says

    03.21.18 at 10:48 pm

    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

    Reply
  5. Miranda Cline says

    08.17.18 at 12:51 pm

    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!!

    Reply

Primary Sidebar

Hi there! I'm Fran and welcome to 259 West, lifestyle blog + design studio! This little place is parts blogging tips, printables, books, with a dash of life. I look forward to getting to know you! Read More →

sort posts by:

  • Blogging Tips
  • Lifestyle
  • Book Talk
  • Crafts + Printables
  • Travel
  • View All
  • Work With Me
  • Shop Themes
  • Blogging Resources

Get Started

  • About
  • Shop Themes
  • Work With Me
  • Blog Planner
  • Say Hello

259 West © 2019
Policies + Disclosures

Get Help

  • Help Center
  • Submit Ticket
  • Resources
  • Start A Blog
  • Terms