HTML can be a very scary thing, especially for a new blogger. And while it’s not imperative that you learn HTML since Blogger, WordPress and other blogging software have WYSIWYG blog post editors, I still think that every blogger should at least know the basics, like how to add a link to text or an image using HTML.
For example, what if you want to add a linked image on your sidebar? In both Blogger and WordPress, there are simple widgets that will allow you to do that with no HTML knowledge, but those widgets limit how you can arrange the photos since each photo is its own widget, and individual widgets are generally stacked on top of each other.
So, a major step towards having complete control over the arrangement of your sidebar items is to learn how to link text and images using HTML. Once you start to learn the basics of HTML, you’ll see that HTML isn’t just a bunch of random code. It’s actually very structured and very logical. In fact, I prefer to write my posts in HTML rather than using the WYSIWYG editor. I find that I have much more control over the way my posts look when I write them in HTML…and I like to have full control. 🙂
So we’ll start with links today. I’ll start with a basic link, and then add in some more advanced options.
How to add a basic text link using HTML
We’re all familiar with text links in a blog post. We see them in every post we read. They look like this…
Have you seen my tiny condo kitchen makeover? It took me two years, but I finally got it finished!
So now let’s take a look at the basic minimum code necessary to turn the words “tiny condo kitchen makeover” into a link. That code looks like this…
<a href=”https://www.addicted2decorating.com/before-and-after-small-kitchen-makeover.html”>tiny condo kitchen makeover</a>
That doesn’t look too scary, does it? Now I’ll show you in a different way. This is the basic structure for every single text link..
<a href=”http://www.url-of-site-you-are-linking-to.com”>words that you want linked</a>
Here’s a bit of info to help this all make sense:
- all of the code to create a link must be enclosed between the < > brackets, and it must be placed immediately before the link or image that you want to link;
- immediately after the text or image that you want linked, you must place the </a> code to indicate that the link ends.
- the linked text that shows on a blog post or web page is often referred to as anchor text or a hyperlink;
- the “a” in the <a code stands for “anchor”.
- the “href” stands for “hypertext reference”.
- immediately after “href” you must use the equals sign, and then place the url to the page to which you’re linking inside quotation marks.
I’ll give you one more example of a sentence with three links.
And here’s what the HTML looks like for that sentence…
Last fall, I made a <a href=”https://www.addicted2decorating.com/my-10-diy-fall-wreath-and-an-x-acto-knife-giveaway.html”>wreath out of cardstock paper</a>, a <a href=”https://www.addicted2decorating.com/cheap-easy-fall-decor-decoupaged-vasecandle-holder.html”>decoupaged candle holder</a>, and some <a href=”https://www.addicted2decorating.com/mini-pumpkin-vases%e2%80%94one-idea-five-ways.html”>miniature pumpkin vases</a>.
How to add a link to a photo using HTML
The HTML for a linked image is almost the same as the HTML for linked text. The only difference is that instead of text, you have to include the URL for the image that you want linked.
Before you can add a linked image to your blog (e.g., on your sidebar), you first have to upload that picture to an online host. If you blog on WordPress, simply upload the picture to your Media Library. After uploading the image, you’ll need the URL for that image. The URL for an image should end in .jpg, .png, .gif, or any other photo file format. A picture file won’t ever have a .html ending. On WordPress, you can get this info from the field called File URL after you upload the picture.
So here is an example of a linked image…
And here’s the code that creates that link…
<a href=”https://www.addicted2decorating.com/diy-framed-gravy-boat-succulent-planter.html”><img src=”https://www.addicted2decorating.com/wp-content/uploads/2012/06/diy-framed-gravy-boat-mosaic-tile-succulent-planter-wall-hanging1.png”></a>
As you can see, there is a code there for a photo file instead of text. Much like the HTML needed to create the link, the HTML needed to make the photo appear must be enclosed in the < > brackets. The code starts with img src, which means image source, and then the actual URL for the image follows, enclosed in quotation marks.
That is the very basic HTML to create a linked image. That’s not difficult at all, right?
How to center a linked image
If you’re adding a linked image to your sidebar, chances are that you’ll want that picture centered in your sidebar. That’s really quite simple. All you need to do is add a bit of code to the beginning and to the end of the code for the linked image. That code looks like this…
<center>Add code for linked image here</center>
So added to a linked image, that code would look like this…
<center><a href=”https://www.addicted2decorating.com/diy-framed-gravy-boat-succulent-planter.html”><img src=”https://www.addicted2decorating.com/wp-content/uploads/2012/06/diy-framed-gravy-boat-mosaic-tile-succulent-planter-wall-hanging1.png”></a></center>
Now I’ll share three more important attributes that you need to be familiar with and know how to use…
How to make the link open in a new browser tab
If you’re linking to another website or blog, it’s a good practice to make those links open up in a new tab in the browser. That way, you can link to helpful information on other sites, while also keeping your visitors on your site even when they click the link. In other words, you never want to intentionally send visitors away from your site to another site.
So telling the browser to open the link in a new tab requires just a small snippet of code after the <a link code. That code looks like this…
So if we add that to the code above, the whole thing looks like this…
<center><a target=”_blank” href=”https://www.addicted2decorating.com/diy-framed-gravy-boat-succulent-planter.html”><img src=”https://www.addicted2decorating.com/wp-content/uploads/2012/06/diy-framed-gravy-boat-mosaic-tile-succulent-planter-wall-hanging1.png”></a></center>
How to add a title attribute to a link
Have you ever noticed those little tags that pop up when you hover your mouse over certain linked information? They look like this…
See the little tag that says “Rooms designed by Kristi”? That pops up when you hover your mouse over the “My Room Makeovers” picture at the top of my blog. That’s called a title attribute, and it’s a great way to add additional information for your readers.
Adding a title attribute to your link is quite easy, and simply requires the addition of a bit of info after the <a tag. It’ll look like this…
<center><a title=”Learn how to make a framed gravy boat succulent planter” target=”_blank” href=”https://www.addicted2decorating.com/diy-framed-gravy-boat-succulent-planter.html”><img src=”https://www.addicted2decorating.com/wp-content/uploads/2012/06/diy-framed-gravy-boat-mosaic-tile-succulent-planter-wall-hanging1.png”></a></center>
Of course, you can write anything you want in the title attribute. Just include any information you think would be helpful for your readers to see when they hover their mouse pointer over the link.
Make a link “no follow”
Since this isn’t a lesson on search engine optimization, I won’t go into detail on how links affect your website. Suffice it to say that the way in which you link to other sites is very important in the eyes of Google. You can read more about linking on Google webmaster tools.
The bottom line is that if you have received any type of compensation for a link, whether it’s a paid text link, a button advertisement in your sidebar, a sponsored post, a post that you’re writing to review free product that you’ve received, etc., then those links have to be “no follow” links to be in accordance with Google’s webmasters guidelines.
In order to make a link “no follow”, you need to add a simple snippet of code to the link that looks like this…
So if we add that to the previous linked image code, it’ll look like this…
<center><a title=”Learn how to make a framed gravy boat succulent planter” rel=”nofollow” target=”_blank” href=”https://www.addicted2decorating.com/diy-framed-gravy-boat-succulent-planter.html”><img src=”https://www.addicted2decorating.com/wp-content/uploads/2012/06/diy-framed-gravy-boat-mosaic-tile-succulent-planter-wall-hanging1.png”></a></center>
Once it’s all broken down into sections, it doesn’t looks quite as scary, right? And of course, the key to understanding it is to practice!
Addicted 2 Decorating is where I share my DIY and decorating journey as I remodel and decorate the 1948 fixer upper that my husband, Matt, and I bought in 2013. Matt has M.S. and is unable to do physical work, so I do the majority of the work on the house by myself. You can learn more about me here.
I hope you’ll join me on my DIY and decorating journey! If you want to follow my projects and progress, you can subscribe below and have each new post delivered to your email inbox. That way you’ll never miss a thing!