On a Wikipedia page, you’ve probably noticed that some text is blue.
That means it’s a link — you can click it, and it’ll take you somewhere else. Could be another page, a different website, or just another section on the same page.
So how do you make a link in HTML?
You use the <a> tag.
The a stands for anchor. Think of it like saying “this text points to somewhere.”
Here’s the basic format:
<a href="URL">Link Text</a>hrefis where the link goes- Whatever you put between the
<a>and</a>is the clickable text
Add Link to webpage
In the sentence:
Her films as a leading actress have grossed over $15.1 billion worldwide, making her the highest-grossing lead actor in history.
“Her films” take you to different pages when clicked.
Here’s how it’s done in HTML:
<a href="https://en.wikipedia.org/wiki/Scarlett_Johansson_filmography">
Her films
</a>Output
Clicking that opens a page with all her movies.
Assignment
In the paragraph about Scarlett, there’s this line:
Her films as a leading actress have grossed over $15.1 billion worldwide, making her the highest-grossing lead actor in history.
Right now, that last part is just plain text.
Your task:
Turn “highest-grossing lead actor in history” into a link that points to the Wikipedia page for highest-grossing actors.
The link you’ll need is:
https://en.wikipedia.org/wiki/List_of_highest-grossing_actors
Expected Output
When the link is clicked it should go to:
https://en.wikipedia.org/wiki/List_of_highest-grossing_actors
Solution
<a href="https://en.wikipedia.org/wiki/List_of_highest-grossing_actors">
highest-grossing lead actor in history
</a>.target attribute
So you’ve learned how to make a link in HTML using the <a> tag.
By default, when you click that link, it opens in the same tab.
But sometimes, you don’t want that.
That’s where the target attribute comes in.
To open a link in a new tab, just add:
target="_blank"Here’s the full example:
<a href="https://en.wikipedia.org/wiki/List_of_highest-grossing_actors" target="_blank">
highest-grossing lead actor in history
</a>Now, when someone clicks that text, it’ll open in a new tab, and your page stays open.
That’s it. Simple.
Assignment
You already made “Her films” a link. Right now, it opens in the same tab when someone clicks it.
Let’s change that.
Your task:
Make the “Her films” link open in a new tab.
To do that, just add the right target attribute to your <a> tag.
You already know how this works — give it a shot.
Solution
<a href="https://en.wikipedia.org/wiki/Scarlett_Johansson_filmography" target="_blank">
Her films
</a>How links open by default
By default, when you click a link in HTML, it opens in the same tab.
You don’t have to write anything special to make that happen. It’s just how links work normally.
Behind the scenes, the browser is treating the link like this:
<a href="...">Link</a>
Which is the same as saying:
<a href="..." target="_self">Link</a>The browser assumes target="_self" even if you don’t write it. It means “open this link in the current tab.”
Jumping to a Section on the Same Page
You know when you’re on a long Wikipedia page and there’s that “Contents” box on the side?
You click on “Early life” or “Acting career” and the page scrolls you straight to that section?
That’s not magic. It’s just a simple trick using internal links in HTML.
Internal Linking
You use a regular anchor tag <a>, but instead of giving it a full URL, you just use a hash # followed by the ID of the section you want to scroll to.
Example:
<a href="#early-life">Early Life</a>Output
So this is saying:
“Hey browser, when someone clicks this, scroll them to the part of the page where the ID matches ‘early-life’”
You’re not linking to another page. You’re linking to a spot on this same page.
Step 2: Give That Section an ID
Now you go to the section you want to jump to, and give it that same ID using the id attribute.
<h2 id="early-life">Early Life</h2>
<p>Scarlett Johansson was born in...</p>This is what makes the whole thing work. The browser sees the link and says, “Oh, I know where that is. Let me scroll to it.” and scrolls to Early Life section.
Assignment
You’ve already seen how to jump to the Early Life section using internal links. Now do the same thing for the Acting Career section.
👉 Here’s What You’ll Do:
Create a link that says Acting Career
When clicked, it should scroll to the Acting Career section.
When clicked on Acting Career, it should jump to the Acting Career section.
Solution
1. The link somewhere near the top:
<a href="#acting-career">Acting Career</a>2. Add the id to your <h2> for the Acting Career section:
<h2 id="acting-career">Acting Career</h2>
<p>She began acting as a child and appeared in several minor roles before her breakout...</p>Assignment
At the top of your page, create a Table of Contents. Give it a heading using <h2> and call it “Table of Contents”.
Then make a list of all the main sections on your page — things like Early Life, Acting Career, Music Career, Public Image, and so on.
Each item in that list should be clickable. When someone clicks on one, it should scroll them down to that exact section on the page.
To make that work, you’ll need to add IDs to each section so the links know where to jump.
Solution
At top of the page:
<h2>Table of Contents</h2>
<ul>
<li><a href="#early-life">Early Life</a></li>
<li><a href="#acting-career">Acting Career</a></li>
<li><a href="#music-career">Music Career</a></li>
<li><a href="#public-image">Public Image</a></li>
<li><a href="#see-also">See also</a></li>
<li><a href="#notes">Notes</a></li>
<li><a href="#references">References</a></li>
<li><a href="#movies">Movies</a></li>
</ul>
Then make sure each of your headings in the page has the matching id:
<h2 id="early-life">Early Life</h2>
<h2 id="acting-career">Acting Career</h2>
<h2 id="music-career">Music Career</h2>
<h2 id="public-image">Public Image</h2>
<h2 id="see-also">See also</h2>
<h2 id="notes">Notes</h2>
<h2 id="references">References</h2>
<h2 id="movies">Movies</h2>Link Inside an Image
You know how sometimes you click on a photo and it takes you to another page? That’s not anything special — it’s just a regular link. But instead of wrapping it around some text, you wrap it around an image.
That’s it. Same idea, just a different tag inside.
Let’s do that now.
We’re going to take the image under the Early Life section and turn it into a clickable link. So when someone clicks on the image, it should open the Lee Strasberg Theatre and Film Institute Wikipedia page.
<figure>
<a href="https://en.wikipedia.org/wiki/Lee_Strasberg_Theatre_and_Film_Institute" target="_blank">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Lee_Strasberg_Institute_115_East_15th_Street.jpg/800px-Lee_Strasberg_Institute_115_East_15th_Street.jpg"
width="300"
height="auto"
alt="Lee Strasberg Theatre and Film Institute building in New York City"
/>
</a>
<figcaption>The Lee Strasberg Theatre and Film Institute, where Johansson learned to act as a child</figcaption>
</figure>Now when someone clicks the image, it’ll open that Wikipedia page in a new tab. Simple and useful.
Assignment
In the 2005–2009: Collaborations with Woody Allen section, you already have an image — the one where Johansson is on the Columbia University campus.
Now let’s turn that image into a link.
When someone clicks it, it takes them to this page:
https://en.wikipedia.org/wiki/Columbia_University
Solution
Find this part of your code (currently in 2005–2009 Section):
<figure>
<img
src="images/campus.jpg"
width="250"
height="auto"
alt="Scarlett Johansson during her 2005–2009 collaborations"
/>
<figcaption>Johansson on the campus of Columbia University during the filming of The Nanny Diaries, 2006</figcaption>
</figure>
Now wrap the <img> in an anchor tag (<a>) like this:
<figure>
<a href="https://en.wikipedia.org/wiki/Columbia_University" target="_blank">
<img
src="images/campus.jpg"
width="250"
height="auto"
alt="Scarlett Johansson during her 2005–2009 collaborations"
/>
</a>
<figcaption>Johansson on the campus of Columbia University during the filming of The Nanny Diaries, 2006</figcaption>
</figure>Absolute Link and Relative Link
So here’s the thing. Absolute and relative links sound like big technical terms, but they’re actually really simple. You’ve already been using both without realizing it.
Take a look at one of your images that comes straight from the web:
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Scarlett_Johansson-8588.jpg/800px-Scarlett_Johansson-8588.jpg"
alt="Scarlett Johansson at an event"
>That’s an absolute link. It has the full web address. No matter where your HTML file is, it’ll always open that exact Wikipedia page.
Now compare it with this one:
<img
src="images/transition.jpg"
alt="Scarlett Transition"
>That’s a relative link. It doesn’t have https:// or a domain. The browser looks at the same folder where your HTML file lives, then checks inside the images folder. If it finds the file there, it shows the picture.
If the images folder isn’t in the same folder as your HTML file, the browser can’t find it and the image won’t load. That’s why it’s called a relative link — it’s always relative to where your HTML page is saved.
Assignment
From the code we’ve written so far, look at the links and figure out which ones are absolute links and which ones are relative links.
Solution
Absolute links:
<a href="https://en.wikipedia.org/wiki/Scarlett_Johansson_filmography">Her films</a>
<a href="https://en.wikipedia.org/wiki/List_of_highest-grossing_actors">highest-grossing lead actor in history</a>
<a href="https://en.wikipedia.org/wiki/Lee_Strasberg_Theatre_and_Film_Institute" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Lee_Strasberg_Institute_115_East_15th_Street.jpg/800px-Lee_Strasberg_Institute_115_East_15th_Street.jpg">
</a>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Scarlett_Johansson-8588.jpg/800px-Scarlett_Johansson-8588.jpg">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Scarlett_Johansson%27s_signature.svg/1920px-Scarlett_Johansson%27s_signature.svg.png">Relative links:
<img src="images/transition.jpg" alt="Scarlett Transition">
<img src="images/campus.jpg" alt="Scarlett Johansson during her 2005–2009 collaborations">