Add links to an HTML document

Taylor Bell
InstructorTaylor Bell
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

Browsing the internet wouldn't be as fun if there wasn't a way to click links to jump to other places. In this lesson, we'll look at how to use the a tag and the href attribute to point to external websites, as well as jump to different anchor points of the same page.

Instructor: [00:00] In order to add links to our HTML page, we're going to make use of the a tag, a being short for anchor. Let's go ahead and delete this p tag. Then we will add the a tag. In order to tell our link where we want to go, we'll make use of the href attribute.

[00:14] Inside of the quotes, we will paste the link to the web page where this burrito image came from. Then the text that we type inside will become the link. You can see here that we have the source. We can click it and get to the Wikimedia Commons. You'll also notice that the word "source" is next to the burrito. What we can do is wrap our a tag inside of a p tag.

[00:35] Another thing we can do with links is link to different parts of the page. We'll do this with an h2. Then we'll use the id attribute. We will call it "second head." Then we'll add the text "More info below."

[00:49] Now we'll scroll back up to our source. We will add another link below this. We'll do another p tag and an a tag with the href attribute set to #second-head. We'll write, "Jump down." Now, over here, when we click "Jump down," it scrolls our "More info below" into view. This is actually the bottom of the page, which is why it didn't jump up higher.

[01:14] Let's add another p tag. We'll have a sentence that contains a link to email us. We want the word "email" to be the link. We'll do an a tag. This time, our href is mailto:burrritopage@Gmail.com, which is probably taken by somebody.

[01:34] Then we'll write the word "email." Now when we save it, down here, at the bottom, we can see "Send me an email." When we click it, our email client loads up.

egghead
egghead
~ 39 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today