Links are one of the key features of HTML. They allow us to link to other HTML pages on the web. In fact, this is why it’s called the web.
In this lesson, we will learn how to create links and add some visual flair to our websites by embedding images.
This section contains a general overview of topics that you will learn in this lesson.
- How to create links to pages on other websites on the internet
- How to create links to other pages on your own websites
- The difference between absolute and relative links
- How to display an image on webpage using HTML
To get some practice using links and images throughout this lesson we need an HTML project to work with.
- Create a new directory named
- Within that directory, create a new file named
- Fill in the usual HTML boilerplate.
- Finally, add the following h1 to the body:
To create a link in HTML, we use the anchor element. An anchor element is defined by wrapping the text or another HTML element we want to be a link with an
Add the following to the body of the index.html page we created and open it in the browser:
You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where we want to link to. We have to tell it a destination to go to. We do this by using an HTML attribute.
An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In our case, we need to add a href (hyperlink reference) attribute to the opening anchor tag. The value of the href attribute is the destination we want our link to go to.
Add the following href attribute to the anchor element we created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
<a href="https://www.theodinproject.com/about">click me</a>
By default, any text wrapped with an anchor tag without a
href attribute will look like plain text. If the
href attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
To display an image in HTML we use the
<img> element. Unlike the other elements we have encountered, the
<img> element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths.
For example, using an absolute path we can display an image located on The Odin Project site:
To use images that we have on our own websites, we can use a relative path.
Create a new directory named
Next, download this image and move it into the images directory we just created.
Rename the image to
Finally add the image to the
<body> <h1>Homepage</h1> <a href="https://www.theodinproject.com/about">click me</a> <a href="pages/about.html">About</a> <img src="images/dog.jpg"> </body>
index.html file and open it in a browser to view Charles in all his glory.
What if we want to use the dog image in the about page? We would first have to go up one level out of the pages directory into its parent directory so we could then access the images directory.
To go to the parent directory we need to use two dots in the relative filepath like this:
../. Let’s see this in action, within the body of the
about.html file, add the following image below the heading we added earlier:
To break this down:
- First, we are going to the parent directory of the pages directory which is
- Then, from the parent directory, we can go into the
- Finally, we can access the
Using the metaphor we used earlier, using
../ in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
Besides the src attribute, every image element should also have an alt (alternative text) attribute.
The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
This is how the The Odin Project logo example we used earlier looks with an alt attribute included:
As a bit of practice, add an alt attribute to the dog image we added to the
This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
- What element is used to create a link?
- What is an attribute?
- What attribute tells links where to go to?
- What is the difference between an absolute and relative link?
- Which element is used to display an image?
- What two attributes do images always need to have?
- How do you access a parent directory in a filepath?
- What are the four main image formats that you can use for images on the web?
This section contains helpful links to related content. It isn’t required, so consider it supplemental.