Your Guide to Basic HTML Code for Links

Many newer bloggers know very little (if anything) about html coding. That is one thing that is so great about the WordPress platform. You really can start blogging without actually knowing how to code a website.

Plus, there are tons of available plugins for creating items like contact forms and social media icons. You really can have a beautiful website with absolutely no coding knowledge.

That being said, as you get further along in blogging you may realize there are simple things you can do with just a bit of basic coding knowledge that can help to create the best possible reader experience. In doing so, you will also improve your blog’s overall performance.

Basic HTML CodingPhoto Credit: Matti Mattila, Flickr

Basic HTML code for text and image links

Let’s say I am writing a guest post about healthy holiday treats because I have a healthy living blog. In that guest post I might want to include a link back to one of the healthy recipes on my own blog.

Here is an example of the code I might use for a text link:

Here is a great, healthy <a href=”http://www.revealnaturalhealth.com/recipes/whole-wheat-thumbprint-cookie-recipe/”>whole wheat thumbprint cookie recipe</a> to try!

When entered into the WordPress text editor, the text link will look like this:

Here is a great, healthy whole wheat thumbprint cookie recipe to try!

If I wanted to show the link as a picture rather than text, I could use this code instead:

<a href=”http://www.revealnaturalhealth.com/recipes/whole-wheat-thumbprint-cookie-recipe/”><img src=”http://www.revealnaturalhealth.com/wp-content/uploads/2014/10/thumbprint-cookies-small.jpg”></a>

When entered into the WordPress text editor, the image link will look like this:

The a href portion of the code will send the reader to the specified URL to find my recipe when the picture is clicked.

The img src portion of the code includes the URL where the photo has been saved in my WordPress dashboard. You could also use Photobucket or another source for storing images for your blog.

The code described above is just basic HTML code for links, but it is really not doing everything it should.

3 Ways to improve the basic HTML code for links

Below are some simple, basic HTML codes that you should be using in your blog links (where appropriate).

1. To open a link in a separate tab

In order to keep the reader (you) on this site, I want my recipe to open in a separate window or tab. This will allow you to view my recipe but also easily return to this post after you have closed that window when you are done viewing/sharing the recipe (shameless self promotion?).

In order to be sure your link will open in a separate tab I would need to add the code target=”_blank” into the hyperlink portion of the link’s code. Using the image link example from above, adding this code would look like this:

<a href=”http://www.revealnaturalhealth.com/recipes/whole-wheat-thumbprint-cookie-recipe/” target=”_blank”><img src=”http://www.revealnaturalhealth.com/wp-content/uploads/2014/10/thumbprint-cookies-small.jpg”></a>

2. To keep a photo from being pinned on Pinterest

When you go to share this post (because, really, why wouldn’t you want to share this post about basic HTML codes with your blogger friends?), you could have multiple photo options come up for what picture you want to pin. It wouldn’t make sense for my recipe photo to show up as an option for pinning because it has absolutely nothing to do with a post about basic html coding.

In order to keep a picture from showing up as an option when pinning to Pinterest, you would need to add the code nopin=”nopin” to the image portion of the code. In our example, it would look like this:

<a href=”http://www.revealnaturalhealth.com/recipes/whole-wheat-thumbprint-cookie-recipe/” target=”_blank”><img src=”http://www.revealnaturalhealth.com/wp-content/uploads/2014/10/thumbprint-cookies-small.jpg” nopin=”nopin”></a>

3. To keep Google happy by using no follow links when necessary

Google loves when blogs link to reputable sources of information. Google does not like to see other sites pay a blog for links back to their own sites.

In other words, if you are being paid to have links on your site, either through ad sponsorships, sponsored posts or affiliate links, you need to make them no follow links.

Again, this is simply a matter of adding a short code. In this case you would add the code rel=”nofollow” to the URL portion of your link code.

<a href=”http://www.revealnaturalhealth.com/recipes/whole-wheat-thumbprint-cookie-recipe/” target=”_blank” rel=”nofollow”><img src=”http://www.revealnaturalhealth.com/wp-content/uploads/2014/10/thumbprint-cookies-small.jpg” nopin=”nopin”></a>

I am not exactly sure if or how your website may get punished by Google if you are not using no follow links properly. However, I would prefer not to get on the bad side of Google as I am working to build my blog.

Obviously there is a lot more that could be discussed as far as coding goes. That’s why I tried to limit the scope of this post to just coding for links.

Your Turn:

Is there anything you would like to add regarding basic coding for links in a blog post that I may have forgotten?

Please share your thoughts below.

email

Written by

Dawn is a work-at-home wife and mom with a passion for health and nutrition. She blogs about healthy eating, family, skin care and natural health solutions at her blog, RevealNaturalHealth.com. You can also find Dawn on Facebook, Twitter and Bloglovin’.

8 Responses to “Your Guide to Basic HTML Code for Links”

written by Marc On 17 October 2014 Reply

Having a basic knowledge of HTML (and CSS for that matter) is a good practice for any blogger. Even aside from using it in the content editor there are a lot of different ways you may want to tweak or customize a theme. Even something small like making a minor change to an optin form can be helpful.

written by Catherine Holt On 19 October 2014 Reply

I agree Marc, having some basic knowledge is always a good thing. It’s amazing how many times you have to do a tweak here or there, and that little bit of knowledge saves a whole heap of stress!

Thanks for sharing :-)

written by Kevin Duncan On 18 October 2014 Reply

Hi Dawn and Catherine,

Good to see you here back on Catherine’s site, Dawn! (Catherine, thanks for bringing her back!)

This is a very helpful posts for newer bloggers, Dawn. Good job.

And guess what? I have been web development for 13 years (and I know HTML code like the back of my hand), but you just taught me something I didn’t know.

Pinterest.

Gosh, I’m a Pinterest novice. So, it’s probably not a surprise I was unaware you could add nopin=”nopin” and prevent certain images from being pinned. Very handy.

Hope you both are doing great. Have happy and blessed weekends!

- Kevin

written by Catherine Holt On 19 October 2014 Reply

Lol, you made me laugh Kevin. I actually have a Pinterest post coming very soon….so stay tuned!!

It’s great that even though you have a wealth of experience, there can always be new things to learn. And all the little tips and tricks all add up don;t they. So pleased that Dawn was able to teach you something new here today.

Thanks for stopping by, have a great week!

written by Steven J Wilson On 18 October 2014 Reply

These are some excellent tips.

I remember a time when it took me at least 5 minutes to add a no follow link.

It took me a few times to remember so every time I wanted to add one, I had to Google it etc.

Sharing now. These will be helpful to others for sure.

Have a great weekend ladies!

written by Catherine Holt On 19 October 2014 Reply

Lol…we have all been there Steven!!

I recall trying to add my Google authorship….blimey, it took me ages. I could not work it out for the life of me. And to think about linking a page to a picture?? Well I would zone out at that point…lol. Just goes to show that we all start somewhere.

Having a bit of basic knowledge goes a long long way and every little bit of coding helps.

I appreciate you sharing here Steven :-)

written by Adrienne On 21 October 2014 Reply

Hi Dawn,

Welcome to Catherine’s blog and I appreciated you sharing this with us. I remember when I wish I had known all of this and had to keep searching Google to learn how to do an anchor text. Oh my goodness, those were the days.

The funny thing is that although I know all of this now, and I sure as heck better, there are brand new bloggers coming online every single day that will jump for joy when they see you’ve laid this out of them. I was talking to a new prospect last week and we were laughing about when I was too embarrassed to ask people what HTML meant. I didn’t want to look like a complete dummy but I soon learned I was NOT the only dummy online. LOL!!!

Great share so thank you again and I’ll have to hang onto this post for all those new bloggers who will be asking me about this. I love it when it’s already laid out for them.

You ladies have a great week now.

~Adrienne

written by Catherine Holt On 21 October 2014 Reply

You were certainly not the only “dummy” out there Adrienne. When I started blogging I didn’t even know what a ‘blog’ was, let alone HTML and all of that other unknown scary stuff! It’s great to be able to look back on how far you have come though.

I love that Dawn wrote this post, because it means I now don’t have to!! Lol.

Thanks for sharing with us Adrienne and hope you have an awesome week too :-)

Leave a Comment