06. Links and Images

Introduction

This lesson explains how to create links and images in HTML.

Learning Outcomes

By the end of this lesson, you should be able to:

  • Create links that open in the same tab
  • Create links that open in a new tab
  • Explain the difference between an absolute and relative link
  • Insert an image into HTML

Links are created with the a tag, like so:

<a href="https://google.com/">Google</a>
Code language: HTML, XML (xml)

The href value is the URL or hyperlink. The text between the tags is what shows up on the page.

A link that is created this way will open in the same window, which means it will take users away from your website when clicking it.

A good website practice is to make links going out (to other websites) open in a new tab. We can do that by modifying the above code like this:

<a href="https://google.com/" target="_blank">Google</a>
Code language: HTML, XML (xml)

By adding target=”_blank”, we are telling the browser to open that link in a new tab.

We wouldn’t want to do this for every link, though, because then whoever is using your page will end up with a zillion tabs open.

Let’s see what happens if we put two links next to each other:

See the Pen Links by Sadness (@sadness97) on CodePen.

Now there are two links! The two links above are side-by-side, but what if you wanted to show them like a list, with a line break in between? (Hint: The answer is in the previous lesson!)

Absolute links contain the entire address starting with https://

Relative links start with a / and contain the location following the domain.

For example, my absolute link to my blog is https://sadgrl.online/blog/

My relative link to my blog would be /blog

So for relative links, your root directory is considered to be /.

If, inside of my blog folder, I made a folder called “archives” and set it up with an index.html file, the relative URL would look like /blog/archives/

Images

An image must be hosted somewhere before you can post it in a way that everyone can see. This means you must upload your image to your webserver (e.g., Neocities, etc.) and copy the link to the image in order to use it.

If you're hosting locally, you can just paste the image into a folder off of the root called /images/ and then your image URL would always be /images/imagename.jpg for example.

An image can be linked using absolute or relative links.

<img src="https://sadgrl.online/images/cybermanifesto.png"> <!-- absolute --> <img src="/images/cybermanifesto.png"><!-- relative -->
Code language: HTML, XML (xml)
Images are considered self-closing tags, which means you don't need to add an </img> tag at the end.

Linking Images

You can wrap most elements with a link, including images! This just means that you’re putting the image element inside of the link. If you do so, then someone can click on your image to go to a different webpage.

When one tag is inside of another tag, that is called nesting. Think of each tag like a Russian doll, neatly fitting inside of another tag.

<a href="https://google.com"> <img src="https://sadgrl.online/images/cybermanifesto.png"> </a>
Code language: HTML, XML (xml)

Exercises

  • In CodePen, try making a couple of links and images! You can host images for free at catbox.moe which gives you a URL to work with.



Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.