0:00:00.192,0:00:02.681
Links are [br]a great way of connecting

0:00:02.681,0:00:04.765
one webpage to another webpage.

0:00:04.765,0:00:07.236
But they can also connect [br]one part of a webpage

0:00:07.236,0:00:09.487
to another part of that same webpage,

0:00:09.487,0:00:13.825
especially on really long webpages, [br]like for a table of contents.

0:00:13.825,0:00:16.884
I have now added [br]a bunch more information to this page,

0:00:16.884,0:00:19.501
so that I could give you a [br]history of the web,

0:00:19.501,0:00:21.848
and a history of HTML versions.

0:00:21.848,0:00:26.046
And I think it's enough content that [br]it deserves a table of contents.

0:00:26.046,0:00:29.420
And I've started one up here, [br]just an unordered list,

0:00:29.420,0:00:32.831
with list items [br]with each of the section titles.

0:00:32.831,0:00:35.226
And I want to link each of these [br]section titles,

0:00:35.226,0:00:38.564
so that you can click them, [br]and just go to that part of the page.

0:00:38.564,0:00:41.701
To do that, I once again [br]use the `` tag,

0:00:41.701,0:00:45.112
so I'll start by just [br]wrapping this title

0:00:45.112,0:00:48.564
in the start and end tags for ``

0:00:48.564,0:00:54.624
Now, what should go [br]as the href of this link?

0:00:54.624,0:00:57.808
Well, we need to somehow [br]tell the browser

0:00:57.808,0:00:59.929
where to jump to in the webpage.

0:00:59.934,0:01:03.313
Some way of uniquely identifying [br]that part of the page.

0:01:03.313,0:01:06.337
If you've learnt CSS selectors already,

0:01:06.337,0:01:09.108
you've actually seen [br]how to do this, in fact.

0:01:09.108,0:01:13.766
We can do it by adding [br]an `` attribute to a tag.

0:01:13.766,0:01:18.657
Let's scroll down [br]and find the heading here.

0:01:18.657,0:01:22.791
And we'll add an `` attribute [br]to this heading.

0:01:22.791,0:01:25.366
So I'm going to put my cursor in ``,

0:01:25.366,0:01:27.429
type `id = "`

0:01:27.429,0:01:30.082
and come up with [br]a good identifier that's unique,

0:01:30.082,0:01:32.956
like "web-history".

0:01:32.956,0:01:35.776
Okay, let's scroll back up to the link.

0:01:35.776,0:01:39.556
And now, in order to tell the browser [br]to go to this internal link,

0:01:39.556,0:01:41.797
we need to start with a hash sign,

0:01:41.797,0:01:45.940
and then type exactly the id [br]like we typed it below.

0:01:45.940,0:01:48.090
Okay, so now,

0:01:48.090,0:01:51.355
pause this talk-through, [br]and try clicking the link.

0:01:51.355,0:01:56.387
Go on, I will wait. [br]Clicky-clicky!

0:01:56.387,0:01:59.575
Okay, did you see it scroll down[br]to this section?

0:01:59.575,0:02:01.208
Then it worked!

0:02:01.208,0:02:02.877
We can add more links like that

0:02:02.877,0:02:05.555
by putting the id attributes on, [br]on every heading,

0:02:05.555,0:02:07.705
and making `` tags [br]that point at them.

0:02:07.711,0:02:09.498
But I'll leave that for you to try.

0:02:09.498,0:02:12.153
The big to remember [br]is that the IDs must be unique,

0:02:12.153,0:02:15.372
because otherwise the browser [br]won't know where to jump to.

0:02:15.372,0:02:17.831
So make them nice and descriptive.