By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Images and Links in HTML

This HTML Tutotial shows how to work with Images, and how to insert links using the a tag of HTML.

Edited: 2011-03-18 06:01

Its important that you have a basic understanding of URLs, before you start working with images and links in HTML.

Note. Some WYSIWYG editors will use local file paths, likely due to incorrect use. Be sure that the URLs don't include "c:" or something like that. You should always either use Absolute or Relative Path when working with pages for the web.

Images

Images are inserted using the img element, but for the image to show up we first need to define the location, this can be done using either an Absolute or Relative Path, which is defined using the SRC attribute. The SRC attribute tells the browser where to look for the resource, or in the case of the img tag, its associated image.

The path may also be mentioned as the URL, or URI, but for simplicity i used path in this Tutorial. Futher more, img elements have no closing tag.

Note. Images are inline-elements, and should be inclosed in the relevant block elements.

<p><img src="MyImage.jpg" alt="An Image"></p>

When using this, Remember that content goes between the body tags.

Links

The a element is used to insert links, and the "href" attribute of the a element, contains the URL where you want the user to be taken to, when they click the link.

Note. Links are inline-elements, and needs to be enclosed in One of: P, H1-H6, DIV, td, li, ADDRESS.

The below is a link contained inside a p element:

<p><a href="about.html">About this Website</a></p>

Added to the body section of the page, this brings us to the below HTML. You can view an example by using the Vision Tool.

<!DOCTYPE html>
<html lang="en-US">

  <head>
  <title>My first Website</title>
  </head>

  <body>
      <p>My first Website.</p>
      <p><a href="about.html">About this Website</a></p>
  </body>

</html>

Brugbart Vision!

Our next step would be, to create the "about.html" page (using same approach), and place it in the same directory.

Images as links

You can also use images as links, which can be done by inserting a img element between the Start and End tags of the a element.

<p><a href="about.html"><img src="MyImage.jpg" alt="Image linking to the About Page."></a></p>

This would result in something like:Brugbart in Danish. Learn HTML and CSS, in Danish!As you may have noticed, theres an Ugly Border around the image. To remove this we would simply add the "style" attribute, with the CSS specification "border:0;" see below:

<p><a href="about.html"><img src="MyImage.jpg" alt="Image linking to the About Page." style="border:o;"></a></p>

Which brings us to something like:Brugbart in Danish. Learn HTML and CSS, in Danish!

An example of how exactly this will look, can be seen in the Vision Tool.

<!DOCTYPE html>
<html lang="en-US">

  <head>
  <title>My first Website</title>
  </head>

  <body>
      <p>My first Website.</p>
      <p><a href="about.html"><img src="/saek/mappen-billeder/brugbartL_Normal.png" alt="Image linking to the About Page." style="border:0;"></a></p>
  </body>

</html>

Brugbart Vision!

Past: Semantic elements of HTML Next: Tables in HTML