Great! Congratulations for making it this far! You have learned a lot about HTML and how to create a multipage website. In this lesson, we will take a look at HTML links and anchor tags.
Links are a crucial part of the web, allowing users to navigate between web pages and other resources. Here’s how to create links in HTML:
Creating Links between Web Pages#
To create a link between two web pages, use the <a> tag and specify the URL of the destination page using the href attribute. Here’s an example:
<a href="page2.html">Go to Page 2</a>
This will create a clickable link that takes the user to Page 2 when clicked. Note that the href attribute specifies the relative URL of the destination page. This means that the URL is relative to the current page location. For example, if the current page is located at https://www.example.com/page1.html, the link will point to https://www.example.com/page2.html.
This also means that the file page2.html must be located in the same folder as page1.html. If you want to link to a page in a different folder, you can use a relative path to specify the location of the destination page. For example, if the destination page is located in a folder called “pages”, you can use the following:
<a href="pages/page2.html">Go to Page 2</a>
Understanding the Different Types of Links#
There are two main types of links in HTML:
- Internal Links: Links that point to another page within the same website or domain.
- External Links: Links that point to a page on a different website or domain.
To create an internal link, specify the relative URL of the destination page, just like we did in the previous example. These are useful for linking to other pages on your website, such as a “Contact Us” page or a “Terms and Conditions” page.
To create an external link, specify the full URL including the protocol (e.g., http:// or https://).
<!-- Internal link -->
<a href="page2.html">Go to Page 2</a>
<!-- External link -->
<a href="https://www.example.com">Visit Example Website</a>
Creating Effective and User-Friendly Links#
When creating links on your web pages, there are a few best practices to keep in mind:
- Use clear and descriptive link text that tells the user where the link will take them.
- Use the
titleattribute to provide additional information about the link.
Opening Links in a New Tab or Window#
By default, links open in the same tab or window. However, you can use the target attribute to open links in a new tab or window. In order to do this, set the value of the target attribute to _blank.
<!-- Open link in a new tab -->
<a href="page2.html" target="_blank">Go to Page 2</a>
Creating Links to Specific Sections on a Page#
Let’s say you want to send your user to a specific section of the current page. For example, you want to send the user to the “Contact Us” section of the current page, which is at the bottom of the page. You can do this by creating an anchor tag and specifying the ID of the section using the href attribute. Here’s an example:
<!-- Create an anchor tag -->
<a href="#contact">Contact Us</a>
<!-- Create a section with an ID -->
<h2 id="contact">Contact Us</h2>
When the user clicks on the “Contact Us” link, they will be taken to the section with the ID “contact”.
Creating Links to Specific Sections on Another Page#
Lastly, let’s say you want to send the user to a specific section of another page. For example, you want to send the user to the “Contact Us” section of the “About Us” page. You can do this by creating an anchor tag and specifying the URL of the destination page and the ID of the section using the href attribute. Here’s an example:
<!-- Create an anchor tag -->
<a href="about.html#contact">Contact Us</a>
When the user clicks on the “Contact Us” link, they will be taken to the “Contact Us” section of the “About Us” page.
Summary#
In this lesson, we learned about HTML links and anchor tags. We learned how to create links between web pages and how to create links to specific sections on a page. We also learned about the different types of links and how to create effective and user-friendly links.