1×
Become a member
to unlock all features

Save 40% this week only!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Add links to an HTML document

    Taylor BellTaylor Bell
    htmlHTML 5

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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 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.

    Discuss

    Discuss