Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed HTML Basics!
You have completed HTML Basics!
Preview
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