HTML internal links

Links are
a great way of connecting

one webpage to another webpage.

But they can also connect
one part of a webpage

to another part of that same webpage,

especially on really long webpages,
like for a table of contents.

I have now added
a bunch more information to this page,

so that I could give you a
history of the web,

and a history of HTML versions.

And I think it's enough content that
it deserves a table of contents.

And I've started one up here,
just an unordered list,

with list items
with each of the section titles.

And I want to link each of these
section titles,

so that you can click them,
and just go to that part of the page.

To do that, I once again
use the `` tag,

so I'll start by just
wrapping this title

in the start and end tags for ``

Now, what should go
as the href of this link?

Well, we need to somehow
tell the browser

where to jump to in the webpage.

Some way of uniquely identifying
that part of the page.

If you've learnt CSS selectors already,

you've actually seen
how to do this, in fact.

We can do it by adding
an `` attribute to a tag.

Let's scroll down
and find the heading here.

And we'll add an `` attribute
to this heading.

So I'm going to put my cursor in ``,

type `id = "`

and come up with
a good identifier that's unique,

like "web-history".

Okay, let's scroll back up to the link.

And now, in order to tell the browser
to go to this internal link,

we need to start with a hash sign,

and then type exactly the id
like we typed it below.

Okay, so now,

pause this talk-through,
and try clicking the link.

Go on, I will wait.
Clicky-clicky!

Okay, did you see it scroll down
to this section?

Then it worked!

We can add more links like that

by putting the id attributes on,
on every heading,

and making `` tags
that point at them.

But I'll leave that for you to try.

The big to remember
is that the IDs must be unique,

because otherwise the browser
won't know where to jump to.

So make them nice and descriptive.