You have seen plenty of websites up to now.

Have you ever noticed that some text on a page is blue and underlined? You hover over it and your cursor changes. You click it and it takes you somewhere else. Another page, another website, or even just a different section on the same page.

Those are links. And they are everywhere. Take a look at this page.

👀 Here is what you see on the page

Nadia

---

Nadia (born 1988) is an American software engineer, web developer, educator, and content creator. With over 10 years of professional experience in web development, she has become one of the most influential voices in tech education.

Born: 1988

From: New York City

Known for: Web dev education

See all that blue text? Every single one of those is a link. Click any of them and you go somewhere. That is the whole idea behind links. They connect pages together. They are literally what makes the web a web.

Now let us learn how to make them.

The a Tag

To create a link you use the <a> tag. The a stands for anchor. Think of it like saying "this text points somewhere."

Here is the basic format:

<a href="https://example.com">Click here</a>

Two things are happening here. href is where the link goes. And whatever you put between the opening and closing tag is the clickable text.

Click the link and it takes you there. That is all there is to it.

Opening in a New Tab

By default when you click a link it opens in the same tab. Your current page disappears and the new one takes over.

Sometimes you do not want that. Sometimes you want the link to open in a new tab so your page stays open. For that you add the target attribute with a value of _blank.

Now when someone clicks the link it opens in a new tab and your page stays exactly where it was.

Jumping to a Section on the Same Page

You know how on a long page there is sometimes a table of contents at the top? You click "Early Life" and the page instantly scrolls you down to that section without loading a new page.

That is called an internal link. Instead of giving the link a full URL you just use a # followed by the ID of the section you want to scroll to.

Then on the section you want to jump to you add a matching id attribute. When someone clicks the link the browser looks for an element on the page with that ID and scrolls straight to it.

Link Inside an Image

You know how sometimes you click on a photo and it takes you to another page? That is just a regular link. But instead of wrapping text inside the <a> tag you wrap an image. Same idea, different content inside.

Click the image and it takes you to the link. Clean and simple.

Absolute and Relative Links

You have actually been using two types of links already without realising it.

An absolute link has the full web address including https://. No matter where your HTML file is it will always point to the exact same place.

<a href="https://en.wikipedia.org/wiki/Nadia">Nadia on Wikipedia</a>

A relative link does not have https:// or a domain name. The browser looks in the same folder as your HTML file and finds it from there.

<img src="images/nadia.png">

If the file is not in the right folder the browser cannot find it. That is why it is called relative. It is always relative to where your HTML file lives.