21 Website Authoring - Hyperlinks

What is a Hyperlink?

A hyperlink, often simply called a link, is a reference to another part of a document or a different document. It allows users to navigate quickly between different locations on the web or within a website. Hyperlinks are a fundamental part of web browsing and are essential for creating interconnected and navigable websites.

How Hyperlinks Work

Hyperlinks are created using HTML code. They essentially tell the web browser where to go when a user clicks on a specific piece of text or an image. When a user clicks a hyperlink, the browser requests the resource specified by the link, and then displays that resource.

Creating Hyperlinks in HTML

Hyperlinks are created using the <a> tag (anchor tag). The href attribute of the <a> tag specifies the destination of the link. The destination can be:

• Another webpage (using a full URL)
• A specific section within the same webpage (using an anchor within the same document)
• An email address (using the mailto: protocol)
• A phone number (using the tel: protocol)

Example Hyperlink Code

Here are some examples of how to create hyperlinks:

1. Linking to another website:

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

2. Linking to a section within the same page:

   <a href="#section2">Jump to Section 2</a>

   In this case, there must be an <h2> tag with the id="section2" somewhere on the page.

3. Linking to an email address:

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

4. Linking to a phone number:

   <a href="tel:+15551234567">Call Us</a>

Visual Appearance of Hyperlinks

By default, hyperlinks are typically displayed in blue and underlined. This visual cue helps users identify clickable elements on a webpage. The appearance of hyperlinks can be customized using CSS, but this is outside the scope of this topic.

Table: Hyperlink Destinations

Destination	HTML Code	Description
Another Webpage	<a href="URL">Text</a>	Links to a different website.
Section within the same page	<a href="#section_id">Text</a>	Links to a specific section on the same page. Requires an ID attribute on the target section.
Email Address	<a href="mailto:email@example.com">Text</a>	Opens the user's default email client with a new message addressed to the specified email.
Phone Number	<a href="tel:+15551234567">Text</a>	Initiates a phone call on devices that support it.

Understanding hyperlinks is crucial for creating well-structured and user-friendly websites. They enable navigation and provide access to a wealth of information.