Skip to content
Azril Hakim
LinkedInGitHub

Links & Navigation

In web development, creating links is a fundamental skill. Links allow you to connect web pages, external websites, and even email addresses, enabling users to navigate through your content seamlessly. This section will cover the following topics:

Hyperlinks, often referred to simply as links, are clickable elements that transport users to another location, such as a different web page or resource. In HTML, you create hyperlinks using the <a> (anchor) element. Here’s a basic example:

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

This code creates a link that, when clicked, takes the user to the ”https://www.example.com” website.

Relative vs. Absolute URLs

Hyperlinks can use either relative or absolute URLs to specify the destination:

  • Absolute URLs provide the complete web address, including the protocol (http/https) and domain (e.g., ”https://www.example.com”). They link to resources on external websites.

  • Relative URLs specify a path relative to the current page’s location. They are used for linking to pages within the same website. For example:

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

This relative URL points to a page named “about.html” in the current website’s root directory.

Linking to External Websites

To link to external websites, use absolute URLs like the one shown in the first example. Be sure to include the full web address, including “http://” or “https://“.

Anchor links are used to navigate within the same webpage. They are handy for creating table of contents or linking to specific sections of a long page. To create an anchor link, follow these steps:

<a id="section1"></a>

2. Create a link elsewhere on the page that points to the anchor using the href attribute:

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

When users click this link, the page will smoothly scroll to the section with the id of “section1.”

Linking to Email Addresses

You can also create links that open the user’s email client with a pre-filled email. Use the mailto: scheme followed by the email address in the href attribute:

<a href="mailto:contact@example.com">Contact Us</a>

Clicking this link will open the user’s default email application with ”contact@example.com” in the recipient field.

Mastering links and navigation is crucial for providing an engaging and user-friendly web experience. Understanding the difference between relative and absolute URLs and how to create various types of links will be a valuable skill in your web development journey.