Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn to use anchor elements and id attributes to navigate to specific sections of a web page.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
How's it going?
0:04
You've learned so
much about semantic-markup,
0:05
displaying images, structuring and
formatting page content and more,
0:07
that you're ready to start using
what you've learned to code
0:10
websites on your own.
0:13
In these final videos you'll push
your HTML coding skills further
0:14
by learning more about file paths and
linking to web pages.
0:17
You'll also learn to work
with special HTML characters,
0:20
comment your code and explore tips and
0:23
resources that will help
you go forward with HTML.
0:25
Links can also navigate to
a specific section of a webpage.
0:28
For example,
0:31
if you're building a single-page
website similar to our VR site.
0:32
Where the main content sections
like about articles and
0:36
contact appear on the same page.
0:38
You'll want your navigation to link to
those specific sections of the page.
0:41
Also, on long webpages that users
have to scroll through to read.
0:47
Developers often include a back to
top link at the bottom of the page.
0:52
To make it easier for users to get back to
the top without having to scroll up from
0:56
the bottom of the page.
1:00
So, now let's set our main nav
to link to each of the main
1:02
content sections of our webpage.
1:06
Linking to a specific section of
a webpage is a two step process.
1:08
First, you identify the parts
of the page you want to link to.
1:12
Then, you set your links to navigate
to the parts you've identified.
1:16
We'll first identify the parts of
the page we want our links to navigate to
1:21
using the id attribute.
1:25
The id attribute can be used on any HTML
element to give it a unique identifier.
1:26
So let's give the section
element containing our about
1:32
content an id attribute.
1:37
And we'll set the value to about.
1:39
Let's scroll down to the VR section and
1:42
give the opening section tag an ID
attribute with the value articles.
1:45
And we'll give our contact
section the ID contact.
1:54
Since ID's are unique, no two ID's in the
same HTML file should have the same value.
2:01
In other words, now that we've defined
the ID names about, articles and contact,
2:07
we shouldn't set any other
elements' ID to these values,
2:12
here in index.html.
2:16
Next we'll link the nav to these three
sections by targeting each of the ID
2:19
values within the href attributes.
2:23
And the values need to
start with the hash or
2:26
pound symbol followed by the value
of the ID you want to link to.
2:29
So for example, to set the about link to
navigate to the about ID we just set,
2:32
set the href value to #about,
and so on.
2:39
So, we'll set articles to #articles
and contact to #contact.
2:43
Save the file, refresh the page and
if we click the about navigation link,
2:51
it navigates us to the about section.
2:56
Clicking Articles takes us to
the latest VR article's heading,
2:59
and Contact takes us down
to the contact section.
3:02
Great.
3:05
So when linking to a specific
section of a different webpage.
3:06
You need to include the path to the file
before the pound symbol and the ID name.
3:11
So for example, to set the read more
link here to navigate directly to
3:15
the beginning of the article
in article.html,
3:20
I'll give the article the ID vr-article.
3:23
Over in index.html, the path to
article.html is already defined.
3:33
So we'll add #vr-article to the path.
3:40
I'll give index.html a save,
3:52
refresh the browser and
clicking one of the read more links
3:55
navigates us to the start of the article,
here on article.html.
3:59
Next, we should update the navigation
links in the article.html file.
4:08
To point to the unique sections
we defined earlier in index.html.
4:13
Now, one way you can do this
is by including the path and
4:19
name of the file index.html before
the hash symbol and ID names.
4:23
Remember the ../ instructs the browser
to move out of the current directory.
4:28
So we include two to move up
to the root of the project.
4:34
Then move into index.html and
4:39
navigate to the section with
the ID about, article or contact.
4:41
In this case we'll do #about.
4:47
And let's update the other two.
4:50
This one will be #articles,
4:56
and #contact.
5:00
All right, that works great!
5:13
Now we've been using document
relative paths so far.
5:14
And these indicate the path
from one file to another file.
5:19
But there's also another type of
path called a root-relative path.
5:22
This describes the path from the main,
5:27
or root folder of the
site to a file on that site.
5:29
Now root relative paths have
some benefits and draw backs.
5:33
And I'll teach you about
them in the next video.
5:36
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up