Linking to Sections of a Web Page5:38 with Guil Hernandez
Learn to use anchor elements and id attributes to navigate to specific sections of a web page.
[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 white page. 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 an app to these three sections by targeting each of the ideal 2:19 values within the href attributes. 2:23 And the values need to start with the hash or 2:26 harm symbol followed by the value of the idea you wanna 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 pound about, and so on. 2:39 So, we'll set articles to pound articles and contact to pound 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 pound 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 pound about. 4:47 And let's update the other two. 4:50 This one will be pound articles. 4:56 And pound 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 up