{"id":165,"date":"2008-04-30T22:40:28","date_gmt":"2008-04-30T22:40:28","guid":{"rendered":"http:\/\/lachy.id.au\/log\/?p=165"},"modified":"2008-10-28T22:01:52","modified_gmt":"2008-10-28T22:01:52","slug":"target-attribute","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2008\/04\/target-attribute","title":{"rendered":"Conforming target Attribute"},"content":{"rendered":"

One of the biggest annoyances on the web, and something I really hate, is popup windows. It frustrates me, and many others, whenever a site attempts to forcibly open a new window for any reason whatsoever. So, it may be surprising to hear that the target<\/code> attribute<\/a> has actually been made conforming in HTML5, even though it was non-conforming in HTML 4.01 Strict, and that this is a good thing. There are in fact several valid reasons for making it conforming, which I will attempt to explain.<\/p>\r\n\r\n

When embedding documents within an iframe<\/code>, it\u2019s important to be able to set the target of links and forms to be the iframe<\/code>. This is a useful technique for cases where it\u2019s undesirable to refresh the entire page to update a small section. Although there are alternative techniques that could be used, such as the many AJAX solutions, the simplicity of using an iframe<\/code> can outweigh the cost of using an alternative JavaScript solution.<\/p>\r\n\r\n

Similarly, it\u2019s important to be able to cause links within a framed document to be able to set the target to the _parent<\/code> or _top<\/code> in order to break out of frames. Without those values, links would default to opening within the frame itself, which is not always useful. When done well, using target<\/code> in this way can actually be quite beneficial for the usability of a site.<\/p>\r\n\r\n

The purpose of _blank<\/code> value, however, is to cause a link to open within a new window or tab. Although there are many valid arguments against forcing a new window, mostly related to usability and accessibility, the reason for allowing this becomes clear when you consider the alternatives.<\/p>\r\n\r\n

There are many authors who, for whatever reason, really want to have links opened in new windows, and nothing will convince them otherwise. But experience has shown over the years that because it is non-conforming in HTML 4.01 Strict, many authors will go to sometimes extreme lengths to get a popup window, while still writing technically valid markup.<\/p>\r\n\r\n

Such techniques range from dynamically adding the target<\/code> attribute to the DOM with script, to using event handlers and calls to window.open()<\/code>. Such approaches actually ignore the reason for making it non-conforming in the first place, which was presumably to avoid the usability issues, and in fact have chosen to give validity a higher priority.<\/p>\r\n\r\n

When a new window is desired, the benefit of using the target<\/code> attribute over many of the other techniques is that it is actually more beneficial to the user because it is easier to override. Many browsers offer options to cause such links to open in a new tab instead of a window, and some even allow it open in the same tab. While it is also possible to do that with window.open()<\/code>, doing so can actually interfere with sites that depend upon the new window to function correclty.<\/p>\r\n\r\n

Allowing authors to get what they want using the least user-hostile method<\/em> is significantly better than inadvertently forcing them to find more harmful workarounds. So this is why the target<\/code> attribute has been made conforming in HTML 5.<\/p>\r\n","protected":false},"excerpt":{"rendered":"An explanation of why the target attribute has been made conforming in HTML 5.","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,7,21,19],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/165"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/165\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}