Master HTML 5 #8: HTML Link Targets

When you click on a link in a web page, you are then taken to the destination defined in the hyperlink URL. This video will show you the different targets you can define in the HTML link syntax that allow you more control in how the link acts when the visitor clicks on it. Getting back to my first point, if you have an affiliate link, for example, on your web page and somebody clicks on that link, whoosh, they're taken off your site and onto the site of the product you are promoting. This may not be the perfect scenario because web Whether the visitor buys from clicking on your affiliate link or not, they are no longer on your website and may never get back there again. Bye-bye. But there is a way you can craft the code on the affiliate link so that when the visitor clicks on it, an entirely new window or tab opens and takes the visitor to the affiliate's product. This leaves your website still active and open on the visitor's browser. This way, whether or not the visitor buys from your affiliate link, they still have your website open so they're more likely to come back and check out more of your site. Cha-ching! So in this video I want to show you how you can craft these target attributes. That's what they're called. And I've got the basic coding set up for our HTML5 page and a little bit of the content down here in the body section. Now what I want to do here is I've got in this header section here I've got 3 areas. I've got my site, I've got Big Affiliate Site #1, I need to put a link there that's going to open up in a different window. Or tab. And I've got Big Affiliate Site Number 2, which also I want to open up in a separate window or tab. So we're actually going to be demonstrating 2 different methods that you can have the link open in a different window. So let me go ahead and craft the link for the Big Affiliate Site Number 1. Come on over here at the beginning. I need to put the opening anchor tag. That's the opening bracket, a space, href equals double quotes, and then close my double quotes because that's the address I'm going to be sending them to is the Big Affiliate Site Number 1. But now I need to put in the attribute to define the target, and in this one it's going to be underscore blank. So I use the attribute target equals double quote underscore and then blank, close off my double quotes and close off the syntax with the closing bracket. And this is the code that we use to open up a new window. And of course I've also got the closing tag which I need to relocate By cutting that and putting it at the end of what I want to be clicked on. And that's just automatically put in there with the particular settings that I have on the Komodo editor here. So now let me show you the other way that we're going to use this, then I'll demonstrate the difference between the two. Let me go ahead and move this on over here. So I'm going to add basically the same thing, copy and paste these ways up to here anyway. Big Affiliate Site Number 2. Now then, this particular attribute is a little bit different. We're still going to be using the target equals attribute, but instead of underscore blank, I'm going to use new space. Close off that and get my closing anchor tag out of the way there. Put it at the end here. Now both of these different setups will kind of sort of do the same thing in that they will both open a new window or a tab. That's where the similarities end. With the _blank, this one will open up a new window each and every time. And using the target equals new will only open one new window. And every link clicked with the target value of new will replace the page loaded in the previously open window that was opened by somebody clicking on the link with the target value of new. I'm sure that made a whole bunch of sense, but let me just demonstrate just in case it didn't. So let me go ahead and save this. I'm going to open it up in our Chrome browser. So let's come on over here to preview in our Chrome browser. Pull this guy over here, and it didn't open in the right one. Let me open it up in this one. There we are. So now that the big affiliate site number 1 is the target underscore blank, that's the one that's going to open up a new window each and every single time. This one here, target equals new, and that's what's only going to open a new window one time, and that one window is what's going to be used for each and every link that uses the target reference new. Let me demonstrate this one. New, new tab. Come back here, another new tab. And I think you get the idea. It will always open a new tab. Let me close these out. And with this one here, with the target equals new, opens a new tab, but it always goes to that one. It's not going to open up any more new tabs. It's only going to open up one. So if there were a whole bunch of different links on here and each one of those had the target new attribute, they would all be using this one tab. Just the other links would be replacing the prior link that was open originally in this particular tab. Now on a side note, the target attribute was deprecated in HTML4, but But HTML5 has reversed that. So if you're using the HTML5 declaration like we are— come on back here, right here— then the target attribute will validate. Now if you're using an HTML4 declaration, meaning you're creating an HTML4 web page, then it might not validate. More than likely it won't. And by the way, validation basically looks for HTML errors and non-standard coding. Most browsers today are pretty forgiving, but some might display your non-standard coded web page all kind of funky. So that's why it's a good idea to follow proper coding standards. And in the HTML5 environment, the target attribute is good to go. And that's going to bring us to the end of this video on the link targets for your HTML page. Thanks for watching, and you have a great day.