Creating Basic HTML Links
Now that we have a solid understanding of the anatomy of an HTML link, let's explore the different types of links you can create. HTML provides various techniques to connect pages within the same website or to external resources.
Internal links: Navigating within the same website
Internal links are used to connect different pages within the same website. They enable users to navigate seamlessly through the site's content and provide valuable pathways for search engine crawlers. To create an internal link, you can use a relative URL that points to the desired page.
In this example, the /about URL represents the relative path to the "About" page on the same website.
External links: Connecting to other websites
External links, also known as outbound links, connect your website to external resources, such as articles, references, or affiliated sites. They expand the user experience by providing additional information or guiding visitors to related content. To create an external link, you need to provide the full URL of the target page.
Here, the href attribute contains the complete URL of the external website.
Relative links: Linking to resources within the same domain
Relative links allow you to link to resources within the same domain without specifying the full URL. They are particularly useful when you want to create links that adapt to different environments, such as development, staging, or production.
In this example, the href attribute contains a relative path to an image file located in the /assets directory of the current domain.
Advanced Linking Techniques
While basic HTML links provide essential navigation capabilities, advanced linking techniques can add more interactivity and functionality to your webpages. Let's explore some of these techniques that go beyond simple page-to-page connections.
Anchor links: Smooth scrolling within a webpage
Anchor links, also known as internal links or page jumps, allow users to navigate to specific sections within a single webpage. They are particularly useful for long articles, FAQs, or documentation pages. Anchor links use the href attribute with a pound sign (#) followed by the ID of the target element.
In this example, clicking on the "Jump to Section 1" link will smoothly scroll the page to the section with the ID section-1.
Mailto links: Directly opening the default email client
Mailto links enable users to initiate an email composition directly from the webpage by clicking on the link. When clicked, the user's default email client opens with a new message, pre-populated with the specified email address, subject, and body.
In this example, clicking on the "Send email" link will open the default email client with the recipient address set to contact@example.com and the subject line set to "Hello."
Tel links: Initiating phone calls on mobile devices
Tel links provide a convenient way to initiate phone calls on mobile devices by simply tapping on the link. When clicked, the user's device initiates a call to the specified phone number.
In this example, clicking on the "Call us" link will prompt the user's device to initiate a call to the phone number +1234567890.
File links: Downloading files with a single click
File links allow users to download files directly by clicking on the link. Whether it's a document, an image, or a multimedia file, file links enable seamless file access for your website visitors. Simply provide the file's URL in the href attribute.
In this example, clicking on the "Download PDF" link will initiate the download of the PDF file located at https://www.example.com/documents/document.pdf.