I want external links to open in a new tab

[Mary H]

Hi,

I am wondering if there is a CSS command or an xml command that will allow me to open external links on my website into a new tab.

I would like my internal links to just move through the site on the current tab but put the new ones in another tab (or even another window).

If I can do it in css can I create a new class (ie: .ext) to open in a new tab so I would only add it to the links that are external, or would I have to create a new link (ie: a.ext) identification.

Thanks, Mary

 

[angelwatt]

CSS is only for styling. It can't help with behavior. XML is not relevant unless you meant XHTML. The links will have to have the target attribute added to any external link to open in new window. The attribute won't be able to tell it to open in a new tab since that attribute existed before tabbed browsers and not all browsers currently have tabs. It's browser dependent whether a "new window" target will open a new window or a new tab. There's nothing you can do to change that for visitors.

Opens new window:

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Alternatively, you could add the target attribute to external links using JavaScript so you don't have to add them manually, but this isn't a great solution. I tend to let visitors decide if they'll open a link in a new tab if they want rather than forcing anything on them. If you want to indicate to them that the link is for an external page then I would add a class name to those links then style them differently. The way do it (which I took from Wikipedia) is to apply a background image to the anchor tag (<a>) and set the padding off the right side to be large enough to fit the image, which is of an arrow pointing out of a box.

 

[Mary H]

Thanks a lot!

Thanks so much. The target worked... at least in Firefox which is the only browser I have checked it in so far.

 

[davethewave]

Please note that the target attribute is deprecated from xhtml 1.0
bye DaVe

 

[SrWebDeveloper]

Please note that the target attribute is deprecated from xhtml 1.0
bye DaVe

Quick technical comment on that. Yes it's true, and aside from JavaScripting or using transitional to overcome this some folks create custom DTD's because XHTML is intended to be modular in the first place. However, many developers feel doing so is unnecessary because most major browser engines (Mozilla, IE, Opera) invoke Standards Mode at the sight of any unknown DOCTYPE, as well as for DOCTYPEs extended via an internal subset. But if you're into standards compliance and also want to validate properly, here is how to add the target module locally to create a custom DOCTYPE plus how to reference the new DTD in your HTML for your own domain.

-jim