The a tag, or hyperlink is essentially what the web is all about. Linking one document to another is what makes the world wide web go round and is what laid the groundwork for HTML to be written. That’s all great and dandy you say, but what does it mean for bloggers? So glad you asked!

As a blogger you spend half your time linking text and images to others’ work, your social networking sites, other blogs, etc. For example :

<a href="http://www.tenacious-dee.com">Dennise</a> and <a href="http://imbreannarose.com">Bre</a> love working with HTML!

As you can see, the names Dennise and Bre are in between <a> and </a> tags ( in dark grey ) and are linked to two different sites. When you click on a name, you are taken to each site respectively.

You can also link pictures by surrounding the picture with the <a> and </a> tags. In the first example below, you’ll see just an image HTML code. In the second example, you’ll see that same image HTML code surrounded with a link code, as shown in dark grey.

<img src="http://www.YourImageHere.jpg">
<a href="http://www.YourLinkHere.com">
<img src="http://www.YourImageHere.jpg"></a>

BONUS TIP
Do you notice an annoying border around the images on your posts? When you click on your images do they lead nowhere except the same picture? If you don’t have a specific site or page to link your images to, then you need to remove the <a> and </a> tags from your images. Take this wordpress example ( in the HTML tab on your post editor ) :

<a href="http://tenaciousdeedotcom.files.wordpress.com/2012/09/example.jpg"><img src="http://tenaciousdeedotcom.files.wordpress.com/2012/09/example.jpg" alt="" width="580" height="386" /></a>

The hyperlink is in dark grey in this example, and if you’ll notice, all it’s doing is linking back to the image itself. I see no need for this hyperlink so I’m gonna remove it by erasing the code in dark grey from above. Here is what the new code looks like :

<img src="http://tenaciousdeedotcom.files.wordpress.com/2012/09/example.jpg" alt="" width="580" height="386" />

When I publish my post, the image will have no annoying border and won’t link to anything and that’s just the way I like it. Click here to learn more about the a tag and what it can do.

GUEST COLUMNIST / DENNISE SAXTON
Dennise Saxton is a designer, web developer & blogger who is a tailored thought organizer. She disects and develops easy to understand tutorials for the HTML Lessons column.
  1. Cathryn says:

    Ohmygosh…these tips are SO helpful!
    Thanks ladies

    xx

  2. juliet says:

    Thanks so much for the lessons! Keep ’em coming!

  3. […] co. have started a fabulous new series. ✚ And Denise Saxton (via Breanna Rose) shares some more HTML tips — these are great. ✚ Annnnd Pugly Pixel’s photog basics could come in handy, too. ✚ I […]

Sorry, the comment form is closed at this time.