WEBVTT

00:00:00.192 --> 00:00:02.681
Links are 
a great way of connecting

00:00:02.681 --> 00:00:04.765
one webpage to another webpage.

00:00:04.765 --> 00:00:07.236
But they can also connect 
one part of a webpage

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

00:00:09.487 --> 00:00:13.825
especially on really long webpages, 
like for a table of contents.

00:00:13.825 --> 00:00:16.884
I have now added 
a bunch more information to this page,

00:00:16.884 --> 00:00:19.501
so that I could give you a 
history of the web,

00:00:19.501 --> 00:00:21.848
and a history of HTML versions.

00:00:21.848 --> 00:00:26.046
And I think it's enough content that 
it deserves a table of contents.

00:00:26.046 --> 00:00:29.420
And I've started one up here, 
just an unordered list,

00:00:29.420 --> 00:00:32.831
with list items 
with each of the section titles.

00:00:32.831 --> 00:00:35.226
And I want to link each of these 
section titles,

00:00:35.226 --> 00:00:38.564
so that you can click them, 
and just go to that part of the page.

00:00:38.564 --> 00:00:41.701
To do that, I once again 
use the `` tag,

00:00:41.701 --> 00:00:45.112
so I'll start by just 
wrapping this title

00:00:45.112 --> 00:00:48.564
in the start and end tags for ``

00:00:48.564 --> 00:00:54.624
Now, what should go 
as the href of this link?

00:00:54.624 --> 00:00:57.808
Well, we need to somehow 
tell the browser

00:00:57.808 --> 00:00:59.929
where to jump to in the webpage.

00:00:59.934 --> 00:01:03.313
Some way of uniquely identifying 
that part of the page.

00:01:03.313 --> 00:01:06.337
If you've learnt CSS selectors already,

00:01:06.337 --> 00:01:09.108
you've actually seen 
how to do this, in fact.

00:01:09.108 --> 00:01:13.766
We can do it by adding 
an `` attribute to a tag.

00:01:13.766 --> 00:01:18.657
Let's scroll down 
and find the heading here.

00:01:18.657 --> 00:01:22.791
And we'll add an `` attribute 
to this heading.

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

00:01:25.366 --> 00:01:27.429
type `id = "`

00:01:27.429 --> 00:01:30.082
and come up with 
a good identifier that's unique,

00:01:30.082 --> 00:01:32.956
like "web-history".

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

00:01:35.776 --> 00:01:39.556
And now, in order to tell the browser 
to go to this internal link,

00:01:39.556 --> 00:01:41.797
we need to start with a hash sign,

00:01:41.797 --> 00:01:45.940
and then type exactly the id 
like we typed it below.

00:01:45.940 --> 00:01:48.090
Okay, so now,

00:01:48.090 --> 00:01:51.355
pause this talk-through, 
and try clicking the link.

00:01:51.355 --> 00:01:56.387
Go on, I will wait. 
Clicky-clicky!

00:01:56.387 --> 00:01:59.575
Okay, did you see it scroll down
to this section?

00:01:59.575 --> 00:02:01.208
Then it worked!

00:02:01.208 --> 00:02:02.877
We can add more links like that

00:02:02.877 --> 00:02:05.555
by putting the id attributes on, 
on every heading,

00:02:05.555 --> 00:02:07.705
and making `` tags 
that point at them.

00:02:07.711 --> 00:02:09.498
But I'll leave that for you to try.

00:02:09.498 --> 00:02:12.153
The big to remember 
is that the IDs must be unique,

00:02:12.153 --> 00:02:15.372
because otherwise the browser 
won't know where to jump to.

00:02:15.372 --> 00:02:17.831
So make them nice and descriptive.