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