www.websiteadministrator.com.au/articles/target-blank.html
Header

Website Administrator

    delivering administrator solutions for your website...

 


Last Date: 11 Jan 2011
date added: 28 Jul 2010
© 2010 Steve Campisi

Website Administrator Know How Articles

xml, xhtml, html and target="_blank"


This rudimentary article covers how to easily code target="_blank" HTML (or target="_new") into your website and includes live examples demonstrating their use. A valid replacement method for target="_blank" and target="_new" is also available with working examples and live demonstrations for you to personally test the HTML validation process for yourself.

HTML5

If you are seeking current information regarding the wholly resurrection of target="_blank" in html5, you can Jump to HTML5 notes.

HTML4

Before we begin discussing target="_blank", we must go to basics and first ensure we have the correct !DOCTYPE in use. target="_blank" will not work with in a strict doctype declaration. We can check this by looking at the very first line (or two) of our HTML code to see what we have declared. To be valid, it should be one of the following common !doctypes:

(please note: Always back up your work before you make any changes. Also, a complete list of workable doctypes is not offered in this article, however, these are the most common of current declarations and yours should be similar, if not the same. Also important, see next note)

(1) Checking your HTML !doctype for use with the target="_blank" instruction:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

or (if you are using frames)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Note: If have found you are using a doctype that has the word "strict" in it or "xml", and wish to keep coding in "strict" or "xml", then move down the page to the section entitled 'What would a Website Administrator use to replace target="_blank" in HTML' (same applies for target="_new" etc. ).

Now, a typical Website Administrator scenario could be that his hosted client wants to keep the visitor on a particular website page, and yet offer this same visitor the option of further relevant information that is located on another's website page and target="_blank" offers you a simple method in which you can call up a separate web-browser instance to house this other website page for you. And here is the HTML code the promising Website Administrator would insert into his webpage to enable this to occur:

(2) Inserting HTML for the target="_blank" code with a working example.

The following is an HTML example demonstrating the correct usage for the "_blank" target instruction:

<a href="http://www.websiteadministrator.com.au/articles.html" target="_blank">Website Administrator Tips</a>

If you would like to try it in your own website page, then copy/paste/save/upload/refresh the above HTML code into your website page, it will display "Website Administrator Tips" as an active link. This is also the same as clicking our example Try it: link above, which will open our "_blank" target page in a new tab or window and you can see we are now able browse this new tab or window for any perhaps relevant or additional information. Ideally, when the website visitor has exhausted his extraneous avenue of extended research, he would close off that tab or window and find himself back in your originating webpage and at the exact place his little aside journey began. This is a simple solution to make any Website Administrator's dreams come true!

(3) Modifying the anchor link:

Our Website Administrator would replace the [www.websiteadministrator.com.au/articles.html] part of the link with the exact link of the page he wishes to display, and preferably replace also the [Website Administrator Tips] part with a precise description of what the new link promises to unfetter. Having executed these two procedural steps, the budding Website Administrator is now well on his way to having mastered the technique.

Explaining the anchor tags: <a></a>

Whatever the Website Administrator places in between the two tags will display on the screen and if selected (focused), will then initiate any instructions included inside the <a> tag. You could display an image if you wanted an image to act as the selectable link or any common text will also do. In the above example, it is a href [Hypertext REFerence - which is a link to another page or website resource on the internet]. The second HTML instruction, [target="_blank"], tells the browser to open this href in another tab or window.

The relevance of the doctype:

The browser will endeavor to follow the guidelines stipulated in the doctype declaration, which is why a tech savvy Website Administrator would set this first and is why little of the above holds true for target="_blank" if the Website Administrator coded his page in the newer type "Strict" XHTML, HTML or XML formats.

The respective Document Type Definitions (DTDs) for XML and strict doctypes, will not validate reference to target="_blank" as the tag has been deprecated (It's use is "outright deplorable" or meets with "strong disapproval"). The tag is not depreciated, it is deprecated. No matter, the bottom line is that use of target="_blank" in your HTML will fail as one hundred percent compliance to the Document Type Definition has not been achieved. One of these (or newer releases) is most likely to be the doctype you are using:

<?xml version="1.0"?>
or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And it is as simple as that to enforce simple HTML encoding on the simple folk writing simple HTML. Or maybe not...

 

 

(HTML5 Note: The W3C specification draft for HTML5 plans to remove the deprecated status from the "_blank" declaration for the Target attribute. Official HTML5 notes relating to this can be found in the W3C Working Draft 19 October 2010 citing HTML5 differences from HTML4 as listed in the following current specification notes (following link opens in new window - Section 3.2 New Attributes: base [refer to expanded Target notes under this heading])...

W3.org HTML5 specification quote: "the target attribute for the a and area elements is no longer deprecated, as it is useful in Web applications, e.g. in conjunction with iframe."

See also on the above linked page section: 5.7. Changes from 22 January 2008 to 10 June 2008 "The target attribute can now have the value _blank."

(Just to make it 100% clear... Yes, target="_blank" is 100% valid in HTML5!)

That's right. There are the smoking guns. So I guess the rabid hordes of garrulous Target="_Blank" naysayers are eating crow about now.

To correct any HTML5 validation issues, first check the following, (1) the validator and your browser are fully HTML5 compliant. (2) You are using the HTML5 Doctype declaration which is simply <!doctype html> (the doctype declaration is not case sensitive and a path to a definition sheet is no longer required). If you are still having issues with validation, then try (3) Validate your code in HTML4, (yes, -go back to the top of the page and write your code in 'old school' html4 like the rest of us are still doing)...and review these other steps again at a later date for HTML5 conversion.

Also, users of target="_new" may begin to encounter difficulty as HTML5 rolls out. Please review our Target=New page linked at the page bottom.

Thinking of replacing _blank?

And whilst still using HTML4, any Website Administrator is likely to ask: Is there another way around this problem to open a new window or tab in spite of what the strict doctypes dictate? And most importantly, will it still pass validation? Yes, and replacing target=_blank in your code is very easy do. (Skip a couple of paragraphs to jump straight to this most common work around)

Though, before you skip ahead, there are a couple of other points any brighter Website Administrator might want to consider. Firstly, does this particular page need to be presented in xml or strict format? Or, should he just add extra content and/or navigation to his website so that instead of using target="_blank", the visitor would be lead to navigate back to the original page. This would remove the need for the visitor to go off-site. There are other avenues he may want to consider, and if he would err on the side of making the website more informative and useful, all would win in the long run.



What would a Website Administrator use to replace target="_blank" in HTML:

('copy and paste' code to use as a replacement for target="_blank")

<a href="http://www.websiteadministrator.com.au/articles.html" onclick="window.open(this.href); return false;">Website Administrator Tips</a>

Then modifying this anchor is the same as per (3) above.

The onclick="window.open(this.href); return false;" operates similar to target="_blank". It is really that simple and this will validate in those three stubborn strict doctypes listed above.

But what if the Website Administrator wanted to reference not one, but two new pages at the same time with one mouse click? And you should use this sparingly, it could be annoying to no end if this onclick="window.open(this.href); return false;" method is used too much in this way. Click the following 'Try it: Website Administrator Tips' link two or three times to see what i mean.

<a href="http://www.websiteadministrator.com.au/articles/css-in-tables-5x5xhtml-template-demo-01.xhtml" onclick="window.open(this.href);window.open('http://www.websiteadministrator.com.au/articles/css-in-tables-introduction-lesson-01.html'); return false;">Website Administrator Tips</a>

The above "try it" example will launch our css-in-tables-introduction-lesson-01.html page which includes a live link to W3C and will demonstrate validation of this onclick="window.open(this.href); return false;" method as a valid replacement for target="_blank" and target="_new" in strict doctypes.

window.open needs a javascript meta tag

Now if these last two "try it" examples did not work for you in your page, then check your <meta> tags in the <head> section of your html file and make sure you have this next piece of copy code given below included amongst your meta declarations. The onclick="window.open(this.href); return false;" is actually an inbuilt javascript method and this is a requisite <meta> declaration to enable this _blank method to work in your xml, strict xhtml or html4 source code page. Here is the tag to insert with your other <meta> statements:

<meta http-equiv="Content-Script-Type" content="text/javascript">

Making use of the data on this page should now have fixed all your target="_blank" woes for an overwhelming majority of your website visitors.

To see further practical examples, review our tables Lesson One where at the bottom of the page, we have a table with "live" example website pages coded in "xHTML" and "xml" which include links to demonstrate W3C validation.

Else, this page is purposely coded in STRICT HTML 4.01 so that you can attempt to validate it and see it will only fail on the one and only live target="_blank" example on this page. Otherwise, it would have validated just fine.

In my honest opinion, i think there is some twisted 'think' regarding whether or not target="_blank" should be used. I like sites that use it. I use it myself. It is my preferred method of browsing. Whilst researching, i prefer to hold the power of choice and manually close each page as i deem them to be no longer needed. It is your job as a coder to know what the visitor would probably like in a new tab and what they wouldn't and then code accordingly. That's why i'll come back to your website, or never again if you abuse the use of target="_blank" windows. Oftentimes i'll have many tabs in use at once. Isn't that normal?

And to your target=blank detractors say only this... Like any program, a website too will only ever be as efficient as the mind that codes it and though they may be unaware of the principles of least astonishment, it doesn't mean you are. And furthermore, like it or not, this domain shall forever be overrun with the literates of any contemporary time. So think freely and code as you wish for you will be damned if you do and damned if you don't. Which only leaves you the guarantee of being damned. But you kinda knew that coming into this game didn't you?

Website Administrators who have sought information on target blank or onclick html code, have also found these similar articles worthy of reading, see link(s) below. -Fin


 
| downloads | home | articles index |