Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

XHTML Strict 1.0 - target="_blank" not valid?

People also ask

What is target _blank in HTML?

target="_blank" is a special keyword that will open links in a new tab every time. target="blank" will open the first-clicked link in a new tab, but any future links that share target="blank" will open in that same newly-opened tab.

What is xhtml strict?

XHTML 1.0 Strict is the XML equivalent to strict HTML 4.01, and includes elements and attributes that have not been marked deprecated in the HTML 4.01 specification. As of November 2015, XHTML 1.0 Strict is the document type used for the homepage of the website of the World Wide Web Consortium.

Can you add target _blank to URL?

Conclusion. You can use the target="_blank" attribute if you want your users to click on a link that opens up a new browser tab. The target="_blank" attribute is used inside the opening anchor tag like this.

What does the target _blank attribute do?

A target attribute with the value of “_blank” opens the linked document in a new window or tab. A target attribute with the value of “_self” opens the linked document in the same frame as it was clicked (this is the default and usually does not need to be specified).


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.


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


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.


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'));
    });
});

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.