HTML Simplified: 4 HTML Tips For The Savvy Blogger

Looking for more blogging tips? Everything But the Posts, my new book, shares tips, advice, and templates for setting up a blog, connecting with your community, and monetizing. It’s available in paperback, on KindleNook, and iBooks.



I’m super excited to introduce to you a dear friend of mine, Nicole (she’s an amazing blog/web designer).  I talked her into giving you a few of her best HTML tips because it’s one area that I wish I knew more about. Go ahead and bookmark this post so you can refer back to it when you get stuck!

And? I made that snazzy button up there with all of the Photoshop skillz Nicole taught me – I have finally gotten past my PicMonkey crutch. She has tons of tutorials on her blog – check them out! 


Hey there! I’m Nicole from The Pixel Boutique and I get to call Becca an IRL friend (that’s “In Real LIfe” for you non-geeky, blogger types). Becca asked if I’d guest post for her today and I said a hearty, “Sure!”
So I thought I’d talk about the exhilarating world of HTML. If you’re a blogger, I bet you’ve run into situations where you wished you knew just a little HTML. Am I right?

It can be intimidating, but its a good thing to have in your blogging arsenal. Don’t fret, it isn’t as scary as it seems and I’m going to break it down to its most basic parts and give you 4 real world scenarios where it may come in handy. It will save you so much time you’ll have an extra hour to spend on Pinterest every day. I exaggerate.

The biggest problem people have with HTML is leaving something out or not putting things in the right order. HTML is an exacting science and one missing “ or < will crash your site. I exaggerate again, but it will cause things to not work correctly.

Lets begin with the HTML element. What’s an element? In it’s simplest form, it’s a set of instructions enclosed in two tags…a beginning and an end. The tags are enclosed in brackets…like these: <>. All of these elements tell your computer what to do with the information you give it.

Behold the link element. Its made of 7 parts (according to me.)

HTML tips for bloggers

Let’s go through them one by one.

1. The Brackets –  Like I mentioned, the tag has to have an opening and closing bracket. That tells your computer what to do.

2. The Attribute Name – A fancy word for “this is what kind of tag this is.” In the above example, the attribute is a link. It’s going to tell your computer to make the text between the two tags (in blue) be linked to another website. So far so good?

3. The Equals Sign – There’s no fancy name for this, but it HAS to be there. After the attribute, you have to include it…much like the days of algebra. Remember  x2 + 8 = 3y? Yeah, me either.

4. The Quotes – This is another common thing people forget. Your value (we’ll get to this next) always has to be surrounded by quotation marks…single or double, it doesn’t really matter, but they have to be there.

5. The Attribute Value – This is the other side of the equation. On one side of the equals sign we have the “name” and on the other side we have the “value.” It’s telling your computer, “I want you to LINK (name) to a website and this is the ADDRESS (value).” If you have one, you need to equal it out with the other.

Now, up to this point all of these pieces are part of the first tag. Remember, an HTML element is made of an opening tag, the content and a closing tag. Onward.

6. The Content – This is what goes in between the two tags. In the case of the sample above, it’s the text that gets…you guessed it…linked!

7. The Closing Tag – And last but not least, we have the closing tag, made up of another set of brackets, a “/” to tell the computer, “It’s the end, baby,” and the same attribute label. In this case it’s an “a” short for “anchor link.”

That’s the basics. From there tags are combined, nested, built on, etc. But that’s really all there is to it!

Real World Situation #1: Image Linking

So now what? “What does all of this mean and why do I need to know about it?”, you’re thinking. Well, let’s say Martha Stewart has found your blog and she wants to pay you $10,000 a month to put her small square button at the top of your sidebar, linking to her website. The problem is, she only gives you the image and expects you to know how to add it and link it.

No problem, right? You whip out your handy HTML know-how and write this code like a boss, because you know all the elements that need to be included already…

<a href=””><img src=”http://www.the-address-of-where-your-button-image-uploaded.jpg”></a>

See what you did there? You added TWO elements together… a link element with an image element inside it. (You fast learners may notice no closing “img” tag. You’re right! There doesnt need to be a closing tag on “img” tags. I said HTML was an exacting science…not one without exceptions).

Real World Situation #2: Open a Link in a New Tab/Window

Lets say you are a pro now with your text and image ads, but you notice that when you click on the link, it takes viewers away from your site to the advertisers site. No good. There’s a simple addition you can make to the link element to make sure that doesnt happen. Take our example…

<a href=”” target=”_blank”><img src=”http://www.the-address-of-where-your-button-image-uploaded.jpg”></a>

In the opening tag, I added target=”_blank”, which means, “open the link in a blank (or new) tab.” Now you are starting to see how HTML is so cool and powerful and can build on itself. It makes me giddy.

Real World Situation #3: Centering an Image or Widget

Have you ever wanted to pull your hair out because a widget you installed on your sidebar is left justified and everything else in your sidebar is centered? The Facebook Like box is famous for this. Some try to use a simple <center> tag to do the trick, but to no avail. I won’t go into a whooooole other aspect of HTML here but there’s a little trick you can use to center the most stubborn of widgets. Its call the div tag. See if you notice the pattern we know and love…

<div align=”center”>the code you want to center…all of it</div>

The div align tag takes all of the code and centers it (or left or right justifies, if you choose). Try it the next time you can’t get something to center…just remember both the beginning and the end tags!

Real World Situation #4: Page Breaks

Finally, lets say you have a bunch of text to add in a widget or in the footer of your blog. You typically don’t have to worry about page breaks in your post because your blogging platform takes care of that for you. But lets say you want to put a page break between two paragraphs or sentences. Enter the “br” tag…

Text text text text text text text text text text text text text

text text text text text text text text text text text text text

<br />

Text text text text text text text text text text text text text

text text text text text text text text text text text text text

If you want a blank line in between your text, then use two <br /> tags next to each other. Using only one just breaks the lines apart, but doesn’t separate them. As I said before, there are exceptions in HTML and this is another one. It looks a little different, doesn’t it? There’s no need to have an opening and closing <br /> tag. It just is what it is.

Now that your head is spinning and you hate me, go test it out! And if you want more, check out Its an excellent and easy to follow resource on HTML and much much more.

Happy blogging!


  1. 1
    Cameron says:

    I absolutely LOVE using HTML. Its so fun to sit around and play with until things are looking just right! :D

  2. 2
    dadblunders says:


    Thanks for bringing this awesome guest, Nicole, to your site! I love to learn more HTML and I am constantly trying to find more things online to help me. These are some great tips and I didn’t know them all! thank you so much!


    P.S. Becca, I am nominating you and your blog for the Liebster Award

    • 2.1
      Becca says:

      Thanks for stopping by, Aaron! Isn’t Nicole awesome? I’ve already used a few of these tips!
      And thank you for the Liebster award! I’ll post about it this week – how fun!!

  3. 3

    Such great tips. I’m going to come back to this, for sure.

  4. 4
    Jenny F says:

    Brilliant! I am so lost when it comes to HTML! Thank you for the simple guide through what it really all means! Great post! Thanks Nicole and Becca!

  5. 5
    Bridget A says:

    Wonderful tips! Thanks so much for sharing!

  6. 6

    This is AWESOME!! So very easy to understand now! I know when I was first beginning I was soooo intimidated by html. Thanks for this helpful post!

  7. 7

    Thank you for this!! I am so html confused! This helps! Bookmarked, and pinned!

  8. 8

    Before I started using Myspace a long time ago, I had never heard about HTML – who would have thought that I’d learn so much from Myspace? LOL

  9. 9
    Alicia says:

    Thank you, thank you! I always need tech help and I love helpful tutorials!

  10. 10

    Ahhh, I learned so much HTML when I was on blogger. LOL I was always having to go into the HTML to fix the strange things blogger would do to my formatting. These are invaluable tips for bloggers!

  11. 11

    […] guest post for By Nicole · September 17th, 2012 This weekend I guest posted over at Becca’s crazy […]

  12. 12
  13. 13

    Love these tips! They’re very helpful and you make it so easy to understand and apply. Thanks!

  14. 14

    These are great tips! Thanks for sharing!

  15. 15
    Becky Smith says:

    Thank you, thank you, thank you! I am always grateful when something as seemingly scary as HTML and coding is laid out in a simple (color coded, even!) way.

    My blog, my computer, my brain and I are all filled with happiness . . . as well as new knowledge. Hooray!

  16. 16
    Amy says:

    This is helpful… now can you please help me find the time to use it???? kidding. Love you.

  17. 17
    Jill says:

    Ha! Thank you…but I’m so new and so HTML challenged that I’m not even sure these tips will help! Finding the time to play with it is the hardest part. Definitely coming back to this!

  18. 18
    Marvia says:

    Love this! So helpful. I am very novice at using HTML in my blog posts. You lay out simple explanations and tips. Much appreciated!

  19. 19
    Links we love: August 16, 2013 says:

    […] HTML Simplified: 4 HTML Tips For The Savvy Blogger (My Crazy Good Life) – Great article on basic HTML tips for anyone with a website or blog. […]

  20. 20

    […] If you want to know more about this link, you’ll probably want to take a look at this post that gives 4 HTML Tips for Bloggers. […]

  21. 21
    unique gifts says:

    Great information. Lucky me I found your site by accident
    (stumbleupon). I have saved it for later!

  22. 22

    […] bit of HTML knowledge is a must. But it doesn’t have to be intimidating. I wrote an article here with several real-world situation and a step by step guide to working with basic […]

Leave a Reply

Affiliate Links:

A Small Orange Shop Amazon
POGO Pass Promo Code
Health & Fitness
Parent Movie Reviews
Parent Auto Reviews

Visit my top posts:

Running Tips
Printable phone contracts for tweens and teens
Shakeology Recipes
Basic Burlap Wreath Tutorial
21 Day Fix Recipes
Dangerous Apps for Teens and Tweens
What I wish I knew before that post went viral


Site Disclosure and Privacy Policy