Lecture 8 HTML Link Targets

When you click on a link in a webpage, 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 webpage and somebody clicks on that link, whoosh! They are taken off your site and onto the side of the product you are promoting. This may not be the perfect scenario because 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 a 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 are more likely to come back and check out more of your site. So on this video, I want to show you how you can craft these target attributes.

I have got the basic coding setup for our HTML 5 page and a little bit of the content down here in the body section. And what I want to do here is I have got in this header section here.

I have got three areas. I have got my site. I have got big affiliate site number 1.

I need to put a link there. This is going to open up in a different window or tab. And I have got big affiliate site number two, which also I want to open up in a separate window or tab. So we are actually going to be demonstrating two different methods that you can have a 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 and you put the opening anchor tag, that is the <a href=”” the. The double quotes contain the address that I am going to be sending them to, that is the big affiliate site 1.

But now I need to put in the attribute to define the target, and in this one, it is going to be _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.

<a href=”_”>. And this is the code that we use to open up a new window. And of course, I have 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 is 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 are going to use this.

Then I am going to demonstrate the difference between the two me. Let me go ahead and move this one over here. So I am going to add basically the same thing. Copy and paste, this way up to here anyway, for big affiliate site number 2. Now in this particular attribute is a little bit different.

We are still going to be using the target equals attribute, but instead of _blank, I am going to use new. Space, and close off that. And get my closing anchor tag out of the way there. Put it at the end here. 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 is where the similarities end. With the _blank, this will open up a new window each and every time. And using the target=” 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 open by somebody clicking on the link with the target value of new. I am sure that made a whole bunch of sense.

But let me just demonstrate just in case it did not.

So let me go ahead and save this. I am going to open it up in our Chrome browser. So let us come over here to preview in our Chrome browser, pull this guy over here. And it did not open the right one. We open up in this one.

So now that the big affiliate site number 1 is the target_blank. That is the one that is going to open up a new window each and every single time.

This one here, target=” new” and that is the one that is going to open a new window one time, and that one window is what is going to be used for each and every link that uses the target reference new. Let me demonstrate this one. New tab, come on back here.

Another new tab, and I think you get the idea. It will always open a new tab. Close these out. And with this one here with the target=”new” opens a new tab, but it always goes to that one. It is not going to open up any more new tabs.

Just 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 that the other links would be replacing the prior link that was open originally in this particular. Now on a side note, the target attribute was deprecated in HTML 4. But HTML 5 has reverse that. So, if you are using the HTML 5 declaration like we are, come on back here right here, then the target attribute will validate.

Now if you are using an HTML 4 declaration, meaning you are creating an HTML 4 webpage, then it might not validate. More than likely, it will not. And by the way, validation basically looks for HTML errors and nonstandard coding. Most browsers today are pretty forgiving, but some might display your nonstandard coded webpage all kind of funky. That is why it is a good idea to follow proper coding standards.

And in the HTML 5 environment, the target attribute is good to go. And that is going to bring us to the end this video on the Link Targets for your html page. Thanks for watching you have great day.

https://theclickmultiplier.com/splash.php?ref=https://warriorplus.com/o2/a/zs32509/0