HTML Tips and Tricks – Target Practice

Today we’re going to look at linking to other blogs, etc, in a little more detail. We’ve shown you previously how to insert a link to something else on your blog, but here’s a quick reminder:

<a href="http://www.bonjourblogger.com">Bonjour, Blogger!</a> has lots of blogging information available

This is the basic link HTML – you will need this at the very minimum to be able to link to something else.

This link to <a href="http://www.bonjourblogger.com" target="_blank">Bonjour, Blogger!</a> will open in a new window!

See that target=”_blank” section inside the link tag? That tells the browser when you click the link to open the link in a new window. There are a few other names that you can replace _blank with to make the link do different things (although most of them relate to frames based HTML layouts, which aren’t really as popular as they used to be)…

 _self – this will load the link in the same frame that the link was clicked in
_parent – this will load in the parent frame set (so if you had a frame nested inside another frame, it would open in the first one)
_top – this will force the link to open in the window that the link was clicked in (so taking the reader away from your page completely)
name – If you put anything in the target=”” section that isn’t listed above, then it will open in a browser window that it will give that name to e.g. target=”blog” will open a link in a window the browser gives the name blog to. That’s fine, but when another website gives a link the same name, then the browser will go “Ah ha! I already have a window called blog, they obviously want the link opening in there!”

Why is the target attribute important to bloggers? Basically – because it will keep people on your site, even as you direct them to new places. You obviously want to link people to things like your Twitter feed, or a dress you really like, but you also want them to keep reading your blog, right? It’s useful to know the HTML coding for this, in case your blog platform forgets to include the target attribute on your links. (WordPress, looking at you there!)

However, something to be aware of is that opening links in new windows is sometimes seen to be a negative thing. Check out this post on Smashing Magazine for more details why. If you prefer to open all links in new windows, it can be possible to set your browser to do this automatically, especially with a plugin. This article on the New York Times is really useful if you want to make sure all links on your computer open in new windows.

(Also, since it’s not enough to create a whole post about it, here’s how to create a link to send you an email:

<a href="mailto:hi@bonjourblogger.com">E-mail</a>

You can see that instead of the usual http:// for a webpage, it’s replaced with mailto: – this tells the browser when someone clicks the link to open up a new email message instead of a website.

You can also have the e-mail that pops up when someone clicks that link to include a specific subject line. Just remember, spaces between words should be replaced by %20, so they won’t get cut off or mashed together:

<a href=mailto:hi@bonjourblogger.com?subject=This%20is%20a%20subject%20line>E-mail</a> with a subject line

Obviously you’ll need to change the addresses to suit you!)

Hayley Constantine

Hayley has been blogging since before most people knew what a blog was! She started Bonjour, Blogger! in May 2013 as a way to share her knowledge and experiences - if you ever have a question, get in touch!

Leave a Reply

})(jQuery)