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="#top-test"><img src="images/sample.gif" class="imagel" alt="Demo"></a>

Id attribute was used in the h1 header tag at top of page:
<h1 id="top-test">HTML Code Tutorial</h1>

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

The links:

<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

Inline Icons as Links

HTML5 makes adding images inline a little easier.

We'll demonstrate by creating an image class.

The Basic HTML5 code

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>

Helps

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.

Free Tools and Resources

Have you tried our FREE Responsive Design template kit? Download Template #402 - 6 Page Kit