1
00:00:00,192 --> 00:00:02,681
Links are 
a great way of connecting

2
00:00:02,681 --> 00:00:04,765
one webpage to another webpage.

3
00:00:04,765 --> 00:00:07,236
But they can also connect 
one part of a webpage

4
00:00:07,236 --> 00:00:09,487
to another part of that same webpage,

5
00:00:09,487 --> 00:00:13,825
especially on really long webpages, 
like for a table of contents.

6
00:00:13,825 --> 00:00:16,884
I have now added 
a bunch more information to this page,

7
00:00:16,884 --> 00:00:19,501
so that I could give you a 
history of the web,

8
00:00:19,501 --> 00:00:21,848
and a history of HTML versions.

9
00:00:21,848 --> 00:00:26,046
And I think it's enough content that 
it deserves a table of contents.

10
00:00:26,046 --> 00:00:29,420
And I've started one up here, 
just an unordered list,

11
00:00:29,420 --> 00:00:32,831
with list items 
with each of the section titles.

12
00:00:32,831 --> 00:00:35,226
And I want to link each of these 
section titles,

13
00:00:35,226 --> 00:00:38,564
so that you can click them, 
and just go to that part of the page.

14
00:00:38,564 --> 00:00:41,701
To do that, I once again 
use the `` tag,

15
00:00:41,701 --> 00:00:45,112
so I'll start by just 
wrapping this title

16
00:00:45,112 --> 00:00:48,564
in the start and end tags for ``

17
00:00:48,564 --> 00:00:54,624
Now, what should go 
as the href of this link?

18
00:00:54,624 --> 00:00:57,808
Well, we need to somehow 
tell the browser

19
00:00:57,808 --> 00:00:59,929
where to jump to in the webpage.

20
00:00:59,934 --> 00:01:03,313
Some way of uniquely identifying 
that part of the page.

21
00:01:03,313 --> 00:01:06,337
If you've learnt CSS selectors already,

22
00:01:06,337 --> 00:01:09,108
you've actually seen 
how to do this, in fact.

23
00:01:09,108 --> 00:01:13,766
We can do it by adding 
an `` attribute to a tag.

24
00:01:13,766 --> 00:01:18,657
Let's scroll down 
and find the heading here.

25
00:01:18,657 --> 00:01:22,791
And we'll add an `` attribute 
to this heading.

26
00:01:22,791 --> 00:01:25,366
So I'm going to put my cursor in ``,

27
00:01:25,366 --> 00:01:27,429
type `id = "`

28
00:01:27,429 --> 00:01:30,082
and come up with 
a good identifier that's unique,

29
00:01:30,082 --> 00:01:32,956
like "web-history".

30
00:01:32,956 --> 00:01:35,776
Okay, let's scroll back up to the link.

31
00:01:35,776 --> 00:01:39,556
And now, in order to tell the browser 
to go to this internal link,

32
00:01:39,556 --> 00:01:41,797
we need to start with a hash sign,

33
00:01:41,797 --> 00:01:45,940
and then type exactly the id 
like we typed it below.

34
00:01:45,940 --> 00:01:48,090
Okay, so now,

35
00:01:48,090 --> 00:01:51,355
pause this talk-through, 
and try clicking the link.

36
00:01:51,355 --> 00:01:56,387
Go on, I will wait. 
Clicky-clicky!

37
00:01:56,387 --> 00:01:59,575
Okay, did you see it scroll down
to this section?

38
00:01:59,575 --> 00:02:01,208
Then it worked!

39
00:02:01,208 --> 00:02:02,877
We can add more links like that

40
00:02:02,877 --> 00:02:05,555
by putting the id attributes on, 
on every heading,

41
00:02:05,555 --> 00:02:07,705
and making `` tags 
that point at them.

42
00:02:07,711 --> 00:02:09,498
But I'll leave that for you to try.

43
00:02:09,498 --> 00:02:12,153
The big to remember 
is that the IDs must be unique,

44
00:02:12,153 --> 00:02:15,372
because otherwise the browser 
won't know where to jump to.

45
00:02:15,372 --> 00:02:17,831
So make them nice and descriptive.