Skip to main content

Creating Links

In this tutorial, we're going to learn how to create links in HTML. Links are a crucial part of web development, as they allow for navigation between pages and resources, both within a website and to external websites. The HTML element used to create links is the anchor tag, <a>.

The Anchor Tag​

The anchor tag is a simple HTML element written as <a href=""></a>. The href attribute stands for "hypertext reference" and it specifies the URL the link should go to. Here's a simple example:

<a href="https://www.google.com">Visit Google</a>

When you click on the text "Visit Google", you will be taken to https://www.google.com.

Relative and Absolute URLs​

When specifying the href attribute, you can use either a relative URL or an absolute URL. An absolute URL includes the full path to the resource, including the protocol (http or https) and domain. On the other hand, a relative URL is a shorthand way to specify the path to a resource on the same domain. For example:

<a href="https://www.mywebsite.com/blog">Blog</a>  <!-- Absolute URL -->
<a href="/blog">Blog</a>  <!-- Relative URL -->

By default, clicking a link will open the target URL in the current tab. To force the link to open in a new tab, you can use the target attribute with the value _blank.

<a href="https://www.google.com" target="_blank">Visit Google</a>

The title attribute can be added to a link to provide additional information about the link. This information will be displayed as a tooltip when the user hovers over the link.

<a href="https://www.google.com" title="Click to visit Google">Visit Google</a>

Links can also be used to open the user's email client and create a new email. This is accomplished by using the mailto: protocol in the href attribute.

<a href="mailto:[email protected]">Email me</a>

Similarly, you can create a link that, when clicked on a device that supports phone calls, will start a new phone call. This is done by using the tel: protocol in the href attribute.

<a href="tel:1234567890">Call me</a>

That's it! You now know how to create various types of links in HTML. Remember, links are a fundamental part of the web, allowing users to navigate and access resources. Practice creating and using different types of links to become comfortable with them. Happy coding!