Anchors

6:38

In this video, we'll learn how to use the anchor elements. This special element allows us to link different parts of a webpage together.


Video Transcript

  • 0:00

    [? upbeat music ?]

  • 0:08

    Sometimes you'll need to connect various parts of your page together.

  • 0:13

    In this video, we'll start learning about the anchor element.

  • 0:17

    So here we have our text editor, and

  • 0:19

    I've already set up a very basic web page here,

  • 0:22

    with a head, body, HTML, and doc-type tags.

  • 0:26

    Let's go ahead and create what's called an anchor tag.

  • 0:32

    So to do that we'll just type A and

  • 0:35

    put it inside of 2 angle brackets, just like that,

  • 0:39

    and this is how we actually create links on web pages.

  • 0:44

    So between these 2 tags, I'm just going to go ahead and type

  • 0:48

    My Link, save it out, and

  • 0:51

    when we switch over to our web browser,

  • 0:54

    and refresh the page,

  • 0:56

    we can see that it now says, "My Link."

  • 0:59

    However, it doesn't do anything.

  • 1:01

    We can't actually click on it, and it doesn't

  • 1:03

    have the normal link styling that

  • 1:05

    you would expect with a blue color and an underline.

  • 1:10

    We'll get to that in just a second.

  • 1:13

    So let's go back here, and let's add in some space.

  • 1:18

    So I'm going to create a few break tags here,

  • 1:23

    and we'll just copy and paste this line a few times.

  • 1:28

    This is actually bad practice.

  • 1:30

    We're doing this to create some space on the page,

  • 1:34

    but having this many BR tags isn't normal.

  • 1:37

    The reason we're creating all of these

  • 1:39

    is just to space another element further down the page

  • 1:43

    which we'll add in just a second.

  • 1:45

    Now normally an element that's further down the page

  • 1:48

    would simply be pushed down by other content that's

  • 1:51

    contained on a more complex website.

  • 1:54

    When we get to CSS, after HTML,

  • 1:57

    we'll learn about ways to better space content apart.

  • 2:02

    So let's go ahead and add in a paragraph here.

  • 2:05

    [onscreen typing]

  • 2:09

    And here we'll just say,

  • 2:11

    "The anchor takes us here."

  • 2:16

    And we're going to use a new attribute, called

  • 2:19

    the ID attribute.

  • 2:22

    So we'll add that to our paragraph tag, and

  • 2:25

    we'll give it the value "some text."

  • 2:28

    The ID attribute identifies an element.

  • 2:32

    This is good for CSS, which we'll get to later on,

  • 2:35

    because it allows you to select a specific element

  • 2:38

    and then apply styling to it, such as changing the color,

  • 2:42

    changing the background, and so on.

  • 2:45

    However, in this case, we're going to go ahead

  • 2:48

    and use this ID attribute in combination with our anchor.

  • 2:53

    We're going to introduce another new attribute here

  • 2:57

    called the H-ref attribute or hyperlink reference.

  • 3:02

    We're going to give this the value,

  • 3:04

    a pound sign or a hash sign,

  • 3:07

    and then some text which is exactly the same

  • 3:11

    as the ID of our paragraph.

  • 3:14

    So we'll go ahead and save that out,

  • 3:17

    switch back to the browser, and refresh, and now

  • 3:20

    you can see that our link has the normal

  • 3:23

    blue styling and underline that you would expect,

  • 3:28

    and if we scroll down the page here,

  • 3:30

    down at the bottom we have the text.

  • 3:34

    The anchor takes us here.

  • 3:37

    So if we scroll back up and click this link,

  • 3:40

    it takes us down to this anchor.

  • 3:43

    Now let's go ahead and switch back, and

  • 3:46

    let's actually add some space below that paragraph,

  • 3:50

    switch back and try it again.

  • 3:53

    [onscreen typing]

  • 3:56

    So when we click the link, it brings us down to the paragraph,

  • 3:59

    and the thing that you should notice is that

  • 4:02

    it brings us to the top of the element.

  • 4:06

    So not only are anchor tags useful for linking to other web pages,

  • 4:11

    which we'll learn about later on,

  • 4:14

    they're actually useful for linking to the same web page

  • 4:17

    and linking to other content within the same page.

  • 4:21

    That's actually why it's called an anchor.

  • 4:24

    Now let's go ahead and switch back and examine this.

  • 4:28

    A link has 2 ends; it has an anchor and a direction.

  • 4:33

    The anchor is the actual tag with the link here,

  • 4:39

    and the direction is contained within the hyperlink reference attribute.

  • 4:45

    The direction in this case is to the paragraph.

  • 4:49

    However, you can also link to other web pages.

  • 4:53

    Now let's go ahead and go back to the browser,

  • 4:56

    and take another look at what we have here.

  • 4:58

    We click this link, and it brings us down to this paragraph,

  • 5:02

    but what if we want to get back to the top?

  • 5:04

    We have to scroll back up,

  • 5:06

    which is not really a great user experience.

  • 5:10

    We should really add a way for users to

  • 5:13

    get back up there themselves without having to scroll.

  • 5:16

    Similarly, you should avoid forcing the users to use the back button.

  • 5:22

    You should always provide a way for

  • 5:24

    the users to get back from within your website.

  • 5:27

    So let's go ahead and try to fix this.

  • 5:30

    To do that, we'll add another link below our paragraph here.

  • 5:34

    [onscreen typing]

  • 5:38

    We'll say, "Go back,"

  • 5:41

    and we need to hook up this link to this anchor up here.

  • 5:47

    So let's go ahead and fill this in

  • 5:50

    with "hash My Link,"

  • 5:53

    and up here,

  • 5:56

    we'll give it the same ID of My Link.

  • 6:00

    We'll save that out,

  • 6:02

    switch back and refresh,

  • 6:04

    and now we can click this link.

  • 6:08

    It'll bring us down the page to this paragraph,

  • 6:11

    and we can click this other anchor tag,

  • 6:14

    and it will bring us back up to the top.

  • 6:18

    So we'll try that one more time, click,

  • 6:21

    brings us down, and click again,

  • 6:23

    and it brings us back up.

  • 6:25

    The anchor element can do more than

  • 6:27

    just link together single parts of a page.

  • 6:30

    It can also link together separate HTML pages,

  • 6:33

    forming the foundations of a website.

  • 6:35

    [? upbeat music ?]

  • 6:37

    [Treehouse]

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.