🔗How to Use Anchor Tags and Images as Links

The image tag is actually an anchor.

It is used to add an image to a page at a desired location.

It can also be used as a link to another document or image.

The code:
<img src="image.gif" alt="alternate text">

This code simply displays the image.

Required Attributes: (There are only 2 in HTML5)

src path/filename of image

alt Brief description of image

*All other attributes are set using style sheets.

Approved Alignment Methods
The float property
<img src="sam.gif" style="float: left / right" alt="text">

The margin for centering
<img src="sam.gif" style="display: block; margin: 0 auto">.

Other Possible Attributes

border Set in style sheet.

box-shadow Set in style sheet.

display: block/inline Set in style sheet. (very handy)

Image as Hyperlink

To use an image as a hyperlink, the code is:

<a href="samesite.htm"><img src="image.gif"></a>

Actual code:
<a href="#heading"><img src="images/sample.gif" class="imagel" alt="Demo" title="Go To TOP"></a>

Id attribute was used in the header tag at top of page:
<header id="heading"></header>

Thumbnails and Larger Images

To use Thumbnail images to present larger images.

<a href="large_image"><img src="thumbnail"></a>

Click on the Little Buddy to see the Big Buddy in the iframe below.

The code:
<p><"images/buudy-2-400.jpg" target="picdisplay"><img src="images/buddy-2-100.jpg" alt="buddy image"></a></p>

iframe code
<iframe name="picdisplay" width="400px" height="433px" style="display:block; margin: 0 auto;box-shadow: 5px 5px 10px #202020"></iframe>

Thumbnail Demo (Not Liquid)

Swapping Technique Used for Responsive Design

We were presented with a problem in the iframe demo presented above. Note the line 'Thumbnail Demo (Not Liquid)'. When viewed at 360 pixels device width the fixed width iframe was too large at 400 pixels wide.

Couldn't find anyone that knew how to create an elastic empty iframe that would adapt to a targetted image, so we used the swapping technique that is used for swapping different sized images on a page. Heres the actual code and CSS we used to solve the problem.

HTML5 Code

<p class="iframelink1"><a href="images/buddy-2-400.jpg" target="picdisplay1">
<img src="images/buddy-2-100.jpg" alt="Buddy Thumb" class="l-img"></a></p>

<p class="iframelink2"><a href="images/buddy-3-300.jpg" target="picdisplay2">
<img src="images/buddy-2-100.jpg" alt="Buddy Thumb" class="l-img"></a></p>

The iframes:
<iframe class="iframeswap1" name="picdisplay1"></iframe>
<iframe class="iframeswap2" name="picdisplay2"></iframe>

The CSS

iframe.iframeswap1 {
display:block;
width: 400px;
height:433px;
margin: 0 auto;
box-shadow: 2px 2px 4px #202020
}

iframe.iframeswap2 {
display:block;
width: 300px;
height:325px;
margin: 0 auto;
box-shadow: 2px 2px 4px #202020
}

iframe.iframeswap2 , p.iframelink2 {display:none}

The Media Query:

@media all and (max-width: 470px){
iframe.iframeswap1 , p.iframelink1 {display:none}
iframe.iframeswap2 , p.iframelink2 {display:block}
}

Display in a New Browser Window

You can also choose to have the larger image open in a new browser window.

Click the little Buddy again to see what it does.

The Actual HTML5 code

<p><a href="images/big-buddy.jpg" target="_blank"><img src="images/little-buddy.jpg" alt="Little Buddy" style="float: left;box-shadow:4px 2px 6px #010101; border: none"></a></p>

Inline Icons as Links

HTML5 makes adding images inline a little easier.

We'll demonstrate by creating an image class.

The Basic HTML5 code

<p><img src="" class="inline" alt=""></p>

The CSS

img.inline {
  display: inline;
  border:none;
  box-shadow:none;
  padding: 0 2px;
  margin: 0 0
}

Click the icon find out more about using pictures in HTML pages.

Actual HTML5 Code for this Link

<p>Click the icon <a href="paragraph_images.html"><img src="images/buddy-2-100.jpg" class="inline" style="max-width: 25px" alt="buddy icon"></a> and find out more about using pictures in HTML pages.</p>

And Then Came Wing Dings

It's very easy to use WingDing images as links. I place them in paragraphs here and use the title attribute to tell the user where the link goes. I've tested them on Windows, Linux and cellphones.

Some links will take you to another page. Just use the back button to return.

<p><a href="#heading" style="text-decoration:none" title="Go to top of Page"><span style="font-size :40px; text-shadow: 1px 1px 2px #000">&#128070;</span></a></p>

<p><a href="index.html" style="text-decoration:none" title="Go to Home Page"><span style="font-size :40px; text-shadow: 1px 1px 2px #000">&#127968;</span></a></p>

<p><a href="color_chart.html" style="text-decoration:none" title="Go to Color Chart"><span style="font-size :40px; text-shadow: 1px 1px 2px #000">&#127912;</span></a></p>

<p><a href="anchor_tag.html" style="text-decoration:none" title="Go to Links and Anchor Tag"><span style="font-size :40px; text-shadow: 1px 1px 2px #000">&#128279;</span></a></p>

We use lists of anchor tags to create our Drop Down Menus
SeeAlso: Unordered Lists

Free Tools and Resources

Need more advanced information? Visit our Web Developer Resources page for a collection of other great tutorials and reference guides on the subjects of HTML5, CSS3, Responsive Design and SEO.

Things Things Have you found Thiings yet?.
Over 6000 Free 3D images that you can download (individually or the complete set) and use for personal or commercial projects. You have got to SEE this!!

Free Bullet Images and WingDings for Unordered Lists
🔵 🔶 😀 🎈 🐝 🏀 👉

Have you tried our NEWEST template kit with scrolling columns?
Download Template Kit #601 - 4 Page Kit or Test Drive It!