Cool Things You Can Do with HTML Anchors, Iframes and Target Attribute

August 23rd, 2011 8 Comments

HTML anchor tags are so much more useful than just linking to another page!

Check out these three demos for awesome and simple things you can do using HTML anchors, iframes and targets:

An HTML-Only Image Gallery

Restaurant Menus (Or any new content you want to load without leaving the page)

Single Page Website

The HTML Set-up

For the first two demos, you will use four HTML elements together: a, iframe, name and target.

Say you want a restaurant website to have a “Menu” page. Within the menu page, you want the user to be able to switch between the breakfast, lunch and dinner menus without leaving the page. Example:

Here’s how you do it:

1. Create your menu page like any other page on the restaurant’s site, but leave space for the content you want to change. You will put an iframe in that space.

2. Create small html files with the variable content, such has breakfast.html which would just have a simple unsorted list or table with your breakfast menu items.

3. On your regular page, you will need links which the user will click when they want to see new content. In the restaurant example, you could have a navigation at the top of the screen with links to “Breakfast Menu”, “Lunch Menu” and “Dinner Menu”

4. Now you just need to get all of these elements to work together.
Here is the structure:

Link Area:

<div id="my_links"><a href="breakfast.html" target="my_target_area">Breakfast Menu</a>
<a href="lunch.html" target="my_target_area">Lunch Menu</a>
<a href="dinner.html" target="my_target_area">Dinner Menu</a></div>

Reloadable Content Area:

<iframe name="my_target_area" src="breakfast.html" width="320" height="240"></iframe>

That’s it! You just specify a target area in your anchor links. When a user clicks that link, the browser will look for the selector with the same name as the target, and instead of loading a new page, it will load the content in the specified area. The important thing here is that the anchor “target” matches the iframe “name.”

HTML Only Image Gallery

This works exactly as above, except in your link section, insert a small image instead of the link text:

<a href="breakfast.html" target="my_target_area">Breakfast Menu</a>

<a href="breakfast.html" target="my_target_area"><img src="scrambled_eggs.jpg" alt="" /></a>

Your html file (breakfast.html) will only have an image on it.

Creating a Single Page Website

You can use a similar technique, with internal anchors, to create a single-page website. For more info, check out the Single Page Website tutorial I wrote for Insite Design Lab

8 Responses

  1. Anonymous says:

    Awesome post!

  2. Kyvne says:

    pretty good could use some work

  3. AmberxIsxSexy says:


  4. says:

    Hi, Thanks for the post. I will be using your code of “Single Page Website inshaAllah”

  5. James Dobbins says:

    Wow, nice. I’m taking computer science one, and this helped me figure out a good way to change webpages. Thanks

  6. watch parts says:

    I’ll without delay clutch i465 ones feed because i are unable to to get the e-mail monthly subscription backlink or even e-newsletter program. Do you have any kind of? Kindly make me aware so that I could just signed up. Thank you.

  7. M***fckr says:

    This doesnt make serds ya nerds

Leave a Reply