XHTML Strict 1.0 - target="_blank" not valid?
Asked Answered
P

8

29

I just validated my actual XHTML Strict 1.0 doc with the w3c validator service.. and it says that,

<ul id="socialnetwork">
            <li><a href="http://www.twitter.com" target="_blank"></a></li>
            <li><a href="http://www.flickr.com" target="_blank"></a></li>
            <li><a href="http://www.xing.com" target="_blank"></a></li>
            <li><a href="http://www.rss.com" target="_blank"></a></li>
</ul>

the target="_blank" is not valid.. but I need the target blank so a new tab will open in the browser, so that the user does not leave the main page.

What can I do? Why is this not valid?

Pectize answered 12/1, 2011 at 8:9 Comment(0)
K
18

You might want to check out the W3 Frequently Asked Questions: http://www.w3.org/MarkUp/2004/xhtml-faq#target

Why was the target attribute removed from XHTML 1.1?

It wasn't. XHTML 1.0 comes in three versions: strict, transitional, and frameset. All three of these were deliberately kept as close as possible to HTML 4.01 as XML would allow. XHTML 1.1 is an updated version of XHTML 1.0 strict, and no version of HTML strict has ever included the target attribute. The other two versions, transitional and frameset, were not updated, because there was nothing to update. If you want to use the target attribute, use XHTML 1.0 transitional.

Keelung answered 12/1, 2011 at 8:22 Comment(4)
Okay then I've to drop Strict.. now its time for transitional.Pectize
How do you open a link in a new tab without the target attribute, and without JavaScript, in this scenario?Kalila
Please do not try to remove good useful answers like that. Even if you are done with SO, they still benefit others.Equestrienne
@Kalila you don't. It should not be done in strict. If you want to use something elseHeelpost
H
9

The question you should be asking yourself is not how to "circumvent" the restriction of Strict but why you want to use XHTML Strict 1.0 in the first place?

In your case I would simple use Transitional as the DTD. Unless of course you are developing for a specific operating system that for instance doesn't allow multiple windows to be opened for instance in a car systems, an IOT, or more exotic appliances. Which is btw the reason why target is absent in the HTML Strict. Strict being deliberately restrictive.

But as you seem to develop for "normal" use, your doc type should reflect that and you should be using:

<!DOCTYPE html> 

also see why was target removed from xhtml cheers J

Heelpost answered 9/3, 2013 at 10:56 Comment(0)
S
7

I suggest not adding in the target attribute. It was dropped due to accessibility reasons, and I dislike it when the page decides for me how my browser tags open. Of course, you are free to do so, if you wish to. I will show you a JavaScript method that Darin mentioned above that allows you to validate as XHTML 1.0 Strict or XHTML 1.1:

HTML code:

<!-- Added link titles for better testing purposes -->
<ul id="socialnetwork">
    <li><a href="http://www.twitter.com/" class="targetblank">Twitter</a></li>
    <li><a href="http://www.flickr.com/" class="targetblank">Flickr</a></li>
    <li><a href="http://www.xing.com/" class="targetblank">XING</a></li>
    <li><a href="http://www.rss.com/" class="targetblank">RSS</a></li>
</ul>

JavaScript code:

window.onload = function() {
    // Code if document.getElementByClassName() doesn't exist
    if (document.getElementsByClassName == undefined) {
        document.getElementsByClassName = function(className) {
            var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
            var allElements = document.getElementsByTagName("*");
            var results = [];

            var element;
            for (var i = 0; (element = allElements[i]) != null; i++) {
                var elementClass = element.className;
                if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                    results.push(element);
            }

            return results;
        }
    }

    var anchorList = document.getElementsByClassName('targetblank');
    for (var i in anchorList) {
        anchorList[i].target = '_blank';
    }
}

Of course, you can omit the window.onload if you already include it elsewhere, but I recommend using it (or using another load function, such as JQuery's $(document).ready();) so the JavaScript loads when the page finishes loading. Now, all you need to do is give each anchor link a class of "targetblank", and the links should open in a new tab.

Sapowith answered 13/1, 2011 at 5:34 Comment(0)
S
2

For this situation I use a simple jQuery solution that validates it with XHTML Strict, and allows new windows to appear.

<a href="http://www.example.com" class="linkExternal">Example URL</a>

<script type="text/javascript">
$(function(){
    $('a.linkExternal').on('click',function(e){
        e.preventDefault();
        window.open($(this).attr('href'));
    });
});
Spam answered 10/7, 2012 at 7:56 Comment(0)
H
1

While I cannot say why this attribute is considered invalid as a workaround you could add this attribute with javascript if you want your site to validate as XHTML Strict.

Hydro answered 12/1, 2011 at 8:12 Comment(0)
R
1

The best way to use target in XHTML STRICT is: onclick="target='_blank';"

<a href="http://botje.tnhteam.com/" onclick="target='_blank';">Botje is overal</a>

Example: click the STRICT button at the bottom

if you need _self or any other target you can change the _blank to _self for example: onclick="target='_self';"

I hope this answer is helpful to some of you...

Ronna answered 4/9, 2014 at 7:28 Comment(3)
Simply removing the attribute to pass static validation doesn't make it correct.Oubre
yes it will validate when the attribute has been removed but he want to open the url in a new window or tab so best option to use _blank is to use onclick="target='_self';" to get the page to validate and this doesn't kill SEO, href has a valid value. Never use # in href I think it's no good for SEO...Ronna
You have XHTML 1.0 Strict and pagespeed_no_defer in script pagespeed_no_defer="" not valid for XHTML 1.0 StrictProlamine
G
0

Try this:

<a href="#" onclick="window.open('urlgoeshere');">Link</a>
Generation answered 18/10, 2012 at 21:30 Comment(1)
2 issues; 1- href='#' will jump on top of the page. 2- you killed SEO.Shellback
S
-1

I prefer this

<a href="http://myurl.com" onclick="this.target='_blank'">Anchor text</a> 
Silverweed answered 19/9, 2013 at 14:10 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.