HTML CSS - Links

Creating hyperlinks in HTML

Hyperlinks, or links, are a fundamental part of the web, allowing users to navigate between different pages and resources. In HTML, links are created using the <a> (anchor) element. This tutorial covers how to create and use hyperlinks in HTML.

Basic Link Syntax

The basic syntax for creating a hyperlink is:

<a href="URL">link text</a>
            

The href attribute specifies the URL of the page or resource that the link points to. The text between the opening <a> and closing </a> tags is the clickable part of the link.

Here is an example:

<a href="https://example.com">Visit Example.com</a>
            

Linking to External Websites

To create a link to an external website, you simply set the href attribute to the URL of the website:

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

When the link is clicked, the browser will navigate to the specified URL.

Linking to Internal Pages

To create a link to another page on the same website, you can use a relative URL:

<a href="about.html">About Us</a>
<a href="/contact.html">Contact Us</a>
            

In these examples, the links point to pages within the same website. The first link points to a file named about.html in the same directory, and the second link points to a file named contact.html in the root directory.

Opening Links in a New Tab

To open a link in a new tab, you can use the target attribute with the value _blank:

<a href="https://example.com" target="_blank">Visit Example.com</a>
            

This attribute tells the browser to open the linked page in a new tab or window.

Linking to Specific Parts of a Page

You can create links that jump to specific parts of a page using the id attribute and fragment identifiers. First, assign an id to the target element:

<h2 id="section1">Section 1</h2>
<p>Content of Section 1</p>
            

Then, create a link that points to this id using a fragment identifier:

<a href="#section1">Go to Section 1</a>
            

When the link is clicked, the browser will scroll to the element with the specified id.

Email Links

You can create links that open the user's default email client with a new message using the mailto protocol:

<a href="mailto:someone@example.com">Send Email</a>
            

When the link is clicked, it opens the user's email client with a new message addressed to the specified email address.

Linking to Files

Links can also point to files such as PDFs, images, or other documents:

<a href="files/document.pdf">Download PDF</a>
<a href="images/photo.jpg">View Photo</a>
            

When these links are clicked, the browser will either display the file or prompt the user to download it, depending on the file type and browser settings.

Summary

In this tutorial, you learned how to create hyperlinks in HTML using the <a> element. You explored linking to external websites, internal pages, specific parts of a page, email addresses, and files. Understanding how to create and use links is essential for web navigation and creating interconnected web pages.