The target parent HTML attribute

I love HTML. Love it so much I like to write about it in its purest form. Even attributes people don’t think about or won’t dedicate a single post too. I can’t count how many times I’ve used HTML’s target attribute in my development career. Everyone’s talking about concepts, frameworks, paradigm shifts and all that. I’d like to talk about the target attribute.

_parent isn’t used all too often in my experience, so I’m going to use it in my example below.


<a href="/some-page.html" title="The Title of this Hyperink" target="_parent">HyperLink</a>

_parent is one value we can use, there are others

  • _blank – Opens the linked document in a new window or tab
  • _self – Opens the linked document in the same frame as it was clicked (this is default)
  • _parent – Opens the linked document in the parent frame
  • _top – Opens the linked document in the full body of the window
  • framename – Opens the linked document in a named frame

Of the all the values listed above, I’ve used “_blank” the most. You’ll see a mixture of these utilized when using iframes. Iframes are still pretty relevant nowadays, browsers have done their work in terms of security. I’m not going to go off tangent with the subject of iframes, that deserves it’s own post.

Back to the _parent attribute – I was working on a site where I built a dynamic interactive map and embedded it into a wordpress site. I automatically assumed interlinking would work out of the box, but I ran into an issue where iframes were overlapping, self replicating itself every time a link was clicked within that iframe. See if I was linking to an external site like http://google.com for instance, this wouldn’t be a problem.

I would just implement the _blank attribute. See below.


<-- this would open a new tab on your browser --> 
<a href="/some-page.html" title="The Title of this Hyperink" target="_blank">HyperLink</a>

But what if I wanted to keep everything intact? What I mean is, let the browser know that I’m still on the same website while clicking within the iframe. The website and iframe can be seen as two different entities, they need a way to know that they co exist.

The _parent attributes allows us to bridge this gap, by emulating a parent child relationship between the two – the website being the parent and the iframe being sort of like a child. So the parent attribute does exactly that, creates an identifier for the iframe to look at.

HTML always has a way of surprising me in the simplest of ways and this is a good example of it.