Chapter 4. HTML: Add Links and Images

Add Hyperlinks to Specific Location on Web Page

Tag:

Back to the course page

You can also set a hyperlink to a specific part of a web page. In order to implement this, you need to do two things:

Set a unique address (id) at the destination location: define the id attribute
Set the id at the origin location: specify the id in the href attribute in the <a> tag

Here are more detailed explanations.

1. Set the unique address (id) in the target location

These are the key points to set a unique address (id) in the destination location:

Add the id attribute at the destination location (element)
The id attribute can be any text (string value)
The same id can be used only one time in the same HTML file (on the same web page)

2. Set the id for href in the <a> tag

These are the key points to set the address at the origin location:

Specify the id in the href attribute in the <a> tag
Use #id for the attribute value for href in the <a> tag. For example, if you set id="top" for the target location of the web page, you can set the href value like href="#top".

Tips: Specify a certain location on another web page

You can also target a certain location on another web page as a hyperlink destination by adding a #id value after the file path or URL. For example, if you want to add a link to the location with id="top" in index.html, the code will be like the one below.

<a href=index.html#top></a>

Practice

Objective:
Add hyperlinks to specific locations on the same web page

More specifically, create two sections on the same web page and set hyperlinks to switch views like shown in the illustration below.

Add-Hyperlinks-to-Specific-Location-on-Web-Page

1. Update the body section of the HTML document

Open the chapter4.html file
Type the following code before the </body> tag (the body end tag).
This example uses the style attribute to add CSS for demonstration purposes, but you don't need to worry about it now. Just type the CSS code as shown. We'll explain CSS later.

chapter4.html

<!--Hyperlinks to Specific Location on Web Page-->
<section id="section_1" style="height:100vh;background-color:green">
  <h1>Section 1</h1>
  <a href="#section_2">Go to section 2</a>
</section>
<section id="section_2" style="height:100vh;background-color:yellow">
  <h1>Section 2</h1>
  <a href="#section_1">Go to section 1</a>
</section>

2. Check the result with a browser

Open the chapter4.html file with a browser and check how the hyperlinks are working. The code you have implemented will result in the video shown below.

demo code