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. 

https://app.egghead.io/api/v1/lessons/html-5-add-links-to-an-html-document/subtitles

Add links to an HTML document

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.

Add links to an HTML document

Share this video with your friends