You have seen plenty of websites up to now. Have you ever noticed that some text is blue and looks a little different from the rest? Take a look at this page right here:

See those blue words like "software engineer", "New York City", and "HTML"? Those are links. You can click them and they will take you somewhere else. Could be another page, a different website, or just another section on the same page you are already on.

So how do you make one of those in HTML?

You use the <a> tag. The "a" stands for anchor. Think of it like saying "this text is pointing somewhere." Here is the basic format:

<a href="URL">Link Text</a>

href is where the link goes. Whatever you put between the <a> and </a> is what the user sees and clicks.

Add a Link to Your Webpage

Look at the first paragraph on the Nadia page. It says she used HTML and CSS to build her first fan page. Those words are just sitting there as plain text right now. Let's turn "HTML" into a link that goes to the HTML course page.

Now clicking "HTML" takes the user to the HTML course page.

The target Attribute

By default when someone clicks a link it opens in the same tab. Your page disappears and they are taken somewhere else.

Sometimes you do not want that. That is where the target attribute comes in. To open a link in a new tab, just add target="_blank" like this:

Now when someone clicks "HTML" a new tab opens and the Nadia page stays right where it is.

How Links Open by Default

By default a link opens in the same tab. You do not have to write anything special to make that happen. Behind the scenes the browser is treating your link like this:

<a href="..." target="_self">Link</a>

It assumes target="_self" even if you do not write it. It just means "open this in the current tab." So you only need to add target when you want something different.

Jumping to a Section on the Same Page

Look at the Contents box on the Nadia page up there. It has items like "Early life and education", "Career", "Content creation" and so on. When you click one of those it scrolls you straight down to that section without loading a new page at all.

That is internal linking. You use a regular <a> tag but instead of a full URL you just use a hash # followed by the ID of the section you want to scroll to:

<a href="#career">Career</a>

This is telling the browser: scroll to whatever element on this page has the ID career. Then you go to that section heading and give it that ID:

<h2 id="career">Career</h2>

Now clicking the link scrolls the user right down to that heading.

Assignment – Build the Full Table of Contents

Look at the Contents box on the Nadia page. That whole thing is just a list of internal links. Your job is to build that exact same thing for your page.

Link Inside an Image

You know how sometimes you click a photo and it takes you somewhere? That is just a regular link wrapped around an image instead of text. Same idea, just a different tag inside.

On the Nadia page there is a photo of her in the sidebar. Let's turn that into a link. When someone clicks her photo it should take them to her wiki page.

Now clicking her photo opens her wiki page in a new tab.