Learn

Let’s explore how hypertext works by adding a link to a basic website!

Reading and modifying code is an essential first step in learning to build things for the web. This practice can take you a long way while you’re learning to build websites from scratch.

An attribute in HTML provides additional information about an HTML element. It comes in a name and value pair with the structure name="value". For example, you can specify the width of an HTML element with the attribute width="500".

Links are created in HTML with something called the href attribute, which stands for hyperlink reference. The href attribute allows us to specify the URL, or address on the web, that a link should take users to. See below for an example of the href attribute in action.

When we set the href property on an anchor tag (abbreviated to <a>) we can specify both the text that should be rendered for the user (the text within the anchor tag) and the URL that the browser should navigate to.

With this code, we’re assigning the value www.codecademy.com to the href attribute. When a user clicks on the text of this link (Learn to code!), they will be directed to www.codecademy.com.

<a href="www.codecademy.com">Learn to code!</a>

Instructions

1.

Alejandra has begun to build out her business’s website. She wants to link from her homepage to a different page that contains her resume.

To start, look in index.html for the text that says 25 years of experience — it should be near line 20. Put an anchor tag (<a>) around this text.

2.

Add a href attribute to this anchor tag, and give it the value /resume.html.

This URL is called a relative path and it looks a little different from the full URLs you’re used to seeing. That’s because it’s actually a link to another page on the same website, so we can omit the first part. Instead of www.jetsetter.com/resume.html we can abbreviate the link to just /resume.html.

Open the hint if you need a reminder on how to set attributes for html tags.

3.

Click on the link that you just made to navigate to see Alejandra’s resume!

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?