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.

  • 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