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.
Photo 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.
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.