In this tutorial, you will learn HTML Links or the use of hyperlinks
- Start by creating an HTML document with the basic structure in place, including the <html>, <head>, and <body> elements.
- To create a link, you need to use the <a> (anchor) tag. The <a> tag requires a destination URL, which is specified using the href attribute. For example, the following code creates a link to the Google homepage:
<a href="https://www.google.com">Visit Google</a>
- You can also create a link to other pages within your own website by specifying the relative file path of the page in the href attribute. For example:
<a href="about.html">About Us</a>
- You can also use links to create jump within the same page, by adding an id attribute to the element you want to jump to, and linking to it using the href attribute with the id preceded by #
<h2 id="services">Services</h2> <a href="#services">Jump to Services</a>
- You can customize the appearance of a link by using CSS styles. For example, you can change the color of a link on hover and when it is active by using the :hover and :active selectors:
<style>
a:hover {
color: red;
}
a:active {
color: blue;
}
</style>
- The <a> tag also has a target attribute which allows opening the link in a new tab or window. Use the _blank to make it open in a new tab or window.
<a href="https://www.google.com" target="_blank">Visit Google</a>
Links are a fundamental part of HTML, and they allow you to navigate between pages and create connections between related content. By using links, you can create an intuitive and user-friendly experience for your website’s visitors. Remember, to keep your link in a good state, it’s a good practice to use clear and descriptive anchor text.