HTML Links – Hyperlinks: Definition, Types, Attributes, and Usage

HTML Links – Hyperlinks

HTML links, also known as hyperlinks, are elements used to connect web pages together by creating clickable references from one page to another. They allow users to navigate between different documents, sections within the same document, external resources, or specific parts of a page. Links are an essential component of the web, enabling the interconnected nature of websites.

Here’s an overview of HTML links, including their types, attributes, uses, importance, and some complete code examples:

Types of HTML Links:

Anchor Links:

These links are used to navigate within the same web page by linking to different sections or IDs within the document.

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

...

<h2 id="section1">Section 1</h2>
<p>This is the content of Section 1.</p>

Here’s a complete HTML code example that demonstrates the usage of an anchor link to navigate within the same web page:

<!DOCTYPE html>
<html>
<head>
  <title>Anchor Link Example</title>
</head>
<body>
  <h1>Anchor Link Example</h1>
    <nav>
    <ul>
      <li><a href="#section1">Go to Section 1</a></li>
      <li><a href="#section2">Go to Section 2</a></li>
    </ul>
  </nav>
    <section id="section1">
    <h2>Section 1</h2>
    <p>This is the content of Section 1.</p>
  </section>
    <section id="section2">
    <h2>Section 2</h2>
    <p>This is the content of Section 2.</p>
  </section>
</body>
</html>

Explanation:

In this example, we have a simple web page with two sections: Section 1 and Section 2.
The navigation menu at the top contains two links, each using an anchor link to navigate to the respective section within the page.
When a user clicks on the “Go to Section 1” link, they will be taken to the Section 1 content, and when they click on the “Go to Section 2” link, they will be directed to the Section 2 content.
The href attribute of each anchor link is set to the corresponding section’s id value, allowing the browser to scroll to the desired section.

Please note that for anchor links to work properly, the id attribute of the target section should match the value specified in the href attribute of the anchor link.

External Links:

These links connect to other websites or web pages hosted on different domains.

syntax:

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

complete code example

Here’s a complete HTML code example that demonstrates the usage of an external link to navigate to another website:

<!DOCTYPE html>
<html>
<head>
  <title>External Link Example</title>
</head>
<body>
  <h1>External Link Example</h1>
    <p>Click the link below to visit Example.com:</p>
    <a href="https://www.google.com" target="_blank">Visitgoogle.com</a>
</body>
</html>

Explanation:

In this example, we have a simple web page with a heading and a paragraph.
The paragraph contains a link that will navigate the user to the Example.com website when clicked.
The href attribute of the anchor link is set to “https://www.example.com”, which is the URL of the external website. The target attribute is set to “_blank”, which specifies that the linked document should open in a new browser tab.
When a user clicks on the “Visit Example.com” link, a new tab will open in their browser, and they will be directed to the Example.com website.
In this example, we have a simple web page with a heading and a paragraph.
The paragraph contains a link that will navigate the user to the Example.com website when clicked.
The href attribute of the anchor link is set to “https://www.example.com”, which is the URL of the external website.
The target attribute is set to “_blank”, which specifies that the linked document should open in a new browser tab.
When a user clicks on the “Visit Example.com” link, a new tab will open in their browser, and they will be directed to the Example.com website.

Remember to replace “https://www.example.com” with the actual URL you want to link to in your own web page.

Email Links:

These links allow users to send emails to specific email addresses.

Syntax:

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

Here’s a complete HTML code example that demonstrates the usage of an email link:

<!DOCTYPE html>
<html>
<head>
  <title>Email Link Example</title>
</head>
<body>
  <h1>Email Link Example</h1>
    <p>Click the link below to send an email:</p>
    <a href="mailto:info@example.com">Contact Us</a>
</body>
</html>

Explanation:

In this example, we have a simple web page with a heading and a paragraph.
The paragraph contains a link that, when clicked, will open the user’s default email client with a new email message addressed to “info@example.com“.
The href attribute of the anchor link is set to “mailto:info@example.com”.
The “mailto:” prefix indicates that this is an email link, and “info@example.com” is the email address to which the email will be sent.
When a user clicks on the “Contact Us” link, their default email client will open, pre-populated with a new email message addressed to “info@example.com”.
Users can then compose and send the email using their preferred email client.

Remember to replace “info@example.com” with the actual email address you want to use in your own web page.

File Links:

These links enable users to download or open files, such as PDFs, images, documents, etc.

Syntax:

<a href="path/to/file.pdf" target="_blank">Download PDF</a>

File Link:

Here’s a complete HTML code example that demonstrates the usage of a file link to download or open a file:

<!DOCTYPE html>
<html>
<head>
  <title>File Link Example</title>
</head>
<body>
  <h1>File Link Example</h1>
    <p>Click the link below to download a PDF file:</p>
    <a href="path/to/file.pdf" download>Download PDF</a>
</body>
</html>

Explanation:

In this example, we have a simple web page with a heading and a paragraph.
The paragraph contains a link that, when clicked, will initiate the download of a PDF file.
The href attribute of the anchor link is set to the file path of the PDF file.
Replace “path/to/file.pdf” with the actual path to your PDF file relative to the location of the HTML file.
The download attribute is included in the anchor link to indicate that the linked file should be downloaded instead of opening it directly in the browser.
This attribute is optional, and if omitted, the browser may choose to either download the file or open it directly, depending on the user’s browser settings.
When a user clicks on the “Download PDF” link, the file specified in the href attribute will be downloaded to their device.

Remember to replace “path/to/file.pdf” with the actual file path of your PDF file in your own web page.

Image Links:

These links associate an image with a specific URL, making the image clickable.

Example:

<a href="https://www.example.com">
  <img src="path/to/image.jpg" alt="Image Description">
</a>

These examples demonstrate different link types and how to use the href, target, and other attributes to specify destinations, behaviors, and additional information about the linked content.

Remember to replace the URLs, file paths, and email addresses with the appropriate values for your specific use case.

Here’s a complete HTML code example that demonstrates the usage of an image link:

<!DOCTYPE html>
<html>
<head>
  <title>Image Link Example</title>
</head>
<body>
  <h1>Image Link Example</h1>
    <p>Click the image below to visit Example.com:</p>
    <a href="https://www.example.com">
    <img src="gogoacademy.png" alt="Example Image">
  </a>
</body>
</html>

Explanation:

In this example, we have a simple web page with a heading and a paragraph.
The paragraph contains an image that is also a clickable link to the Example.com website.
The href attribute of the anchor link is set to “https://www.example.com“, which is the URL of the external website that the image will link to.
The src attribute of the <img> tag specifies the path to the image file.
Replace “path/to/image.jpg” with the actual path to your image file relative to the location of the HTML file.
The alt attribute of the <img> tag provides alternative text for the image, which is displayed if the image fails to load or for accessibility purposes.
When a user clicks on the image, they will be directed to the Example.com website.

Remember to replace “https://www.example.com” with the actual URL you want to link to and “path/to/image.jpg” with the actual path to your image file in your own web page.

Button as a Link :complete code example

Here’s a complete HTML code example that demonstrates the usage of a button as a link:

<!DOCTYPE html>
<html>
<head>
  <title>Button as a Link Example</title>
</head>
<body>
  <h1>Button as a Link Example</h1>
  
  <p>Click the button below to visit Example.com:</p>
    <button onclick="window.location.href = 'https://www.gogoacademy.net';">Visit gogoacademy.net</button>
</body>
</html>

Explanation:

In this example, we have a simple web page with a heading and a paragraph.
The paragraph contains a button that acts as a link to the Example.com website.
The onclick attribute of the <button> tag is used to define the JavaScript code that is executed when the button is clicked.
In this case, window.location.href is set to the desired URL, which is “https://www.example.com“. Clicking the button will navigate the user to the specified URL.
When a user clicks on the “Visit Example.com” button, they will be directed to the Example.com website.

Remember to replace “https://www.example.com” with the actual URL you want to link to in your own web page.

Common HTML Link Attributes

href:

Specifies the destination of the link.

target:

Defines where the linked document should open (e.g., in a new tab, the same tab, or a specific frame).

rel:

Describes the relationship between the current document and the linked document.

title:

Provides additional information about the linked document, displayed as a tooltip on hover.

Importance of HTML Links:

Navigation:

Links allow users to move between different web pages or sections within the same page, enhancing website usability and providing a clear site structure.

External Resources:

Links enable the inclusion of external resources like stylesheets, scripts, or images, enhancing the functionality and appearance of a webpage.

SEO (Search Engine Optimization):

Links play a crucial role in determining a website’s visibility on search engines, as search engine algorithms use links to discover and index web content.

Content References:

Links can be used to reference sources, provide citations, or direct users to related content.

User Engagement:

Links encourage users to explore additional content, navigate through a website, or perform specific actions.

HTML Link Tags

In HTML, there are several link tags that serve different purposes.

Here are some commonly used link tags:

<link rel="stylesheet" href="style.css">:

This link tag is used to include an external CSS stylesheet file in an HTML document. The rel attribute specifies the relationship between the current document and the linked stylesheet, which is set to “stylesheet” in this case.

The href attribute specifies the path to the CSS file.

<link rel="icon" href="favicon.ico" type="image/x-icon">:

This link tag is used to specify the favicon, the small icon that appears in the browser tab or next to the page title. The rel attribute is set to “icon” to indicate that it is an icon link.
The href attribute specifies the path to the favicon image file, and the type attribute specifies the MIME type of the file.

<link rel="preconnect" href="https://example.com">

This link tag is used to indicate to the browser that it should establish an early connection to the specified URL.
It helps improve performance by reducing the time needed to establish a connection when the resource is actually requested.

<link rel="canonical" href="https://www.example.com/page.html">

This link tag is used to specify the canonical URL for a page.
It helps search engines understand the preferred URL when there are multiple URLs that can lead to the same content.<link rel=”alternate” hreflang=”en” href=”https://www.example.com”>
This link tag is used to specify alternate versions of a page for different languages or regions.
The hreflang attribute specifies the language or region code, and the href attribute specifies the URL of the alternate version.

<link rel="next" href="page2.html"> and <link rel="prev" href="page1.html">

These link tags are used to indicate the relationship between paginated content.
The rel attribute is set to “next” to indicate the next page in the sequence, and “prev” to indicate the previous page.

These are just a few examples of the link tags commonly used in HTML.

Each link tag serves a specific purpose and has its own set of attributes.

By using appropriate link tags, you can enhance the functionality, performance, and SEO of your web pages.

complete code example

Here’s a complete HTML code example that demonstrates the usage of multiple link tags:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Link Tags Example</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="preconnect" href="https://example.com">
  <link rel="canonical" href="https://www.example.com/page.html">
  <link rel="alternate" hreflang="en" href="https://www.example.com">
  <link rel="next" href="page2.html">
  <link rel="prev" href="page1.html">
</head>
<body>
  <h1>HTML Link Tags Example</h1>
    <p>This is an example of using various link tags in HTML.</p>
    <!-- Rest of the HTML content -->
</body>
</html>

Explanation:

In this example, we have a simple HTML document with a title, heading, and a paragraph.
The head section contains multiple link tags demonstrating different use cases.
The first link tag includes an external CSS stylesheet file named “styles.css” using the rel=”stylesheet” attribute.
The second link tag specifies the favicon using the rel=”icon” attribute and provides the path to the favicon file, “favicon.ico“.
The third link tag uses the rel=”preconnect” attribute to establish an early connection to “https://example.com“.
The fourth link tag specifies the canonical URL of the page using the rel=”canonical” attribute and provides the URL “https://www.example.com/page.html”.
The fifth link tag demonstrates the usage of the rel=”alternate” attribute, which provides an alternate version of the page for English language/region, with the URL “https://www.example.com“.
The sixth and seventh link tags illustrate the use of rel=”next” and rel=”prev” attributes to indicate paginated content. “page2.html” is specified as the next page, and “page1.html” is specified as the previous page.

Remember to replace the file paths, URLs, and other attributes with the appropriate values for your specific use case.

Attributes of links

Here’s a complete HTML code example that demonstrates the usage of various attributes for links:

<!DOCTYPE html>
<html>
<head>
  <title>Attributes of Links Example</title>
</head>
<body>
  <h1>Attributes of Links Example</h1>
    <p>Explore the different attributes of HTML links:</p>
    <ul>
    <li><a href="https://www.example.com">Absolute URL</a></li>
    <li><a href="/about">Relative URL</a></li>
    <li><a href="#section1">Internal Link</a></li>
    <li><a href="https://www.example.com" target="_blank">Open in New Tab</a></li>
    <li><a href="mailto:info@example.com">Email Link</a></li>
    <li><a href="tel:+1234567890">Telephone Link</a></li>
    <li><a href="javascript:void(0);" onclick="alert('Clicked!')">JavaScript Function</a></li>
  </ul>
    <section id="section1">
    <h2>Section 1</h2>
    <p>This is the content of Section 1.</p>
  </section>
</body>
</html>

Explanation:

In this example, we have a simple web page with a heading, a paragraph, and an unordered list. The list contains various links with different attributes.
The first link uses an absolute URL (href=”https://www.example.com”) to link to an external website.
The second link uses a relative URL (href=”/about”) to link to a page within the same website.
The third link uses an internal link (href=”#section1″) to navigate to a specific section within the same page.
The fourth link includes the target=”_blank” attribute to open the link in a new browser tab when clicked.
The fifth link uses the mailto scheme (href=”mailto:info@example.com”) to create an email link.
The sixth link uses the tel scheme (href=”tel:+1234567890″) to create a telephone link.
The seventh link includes an onclick attribute to execute a JavaScript function (onclick=”alert(‘Clicked!’)”) when clicked.
Each link demonstrates a different attribute or scheme that modifies its behavior or functionality. You can modify the link attributes, URLs, and other values based on your specific requirements.

Quiz about HTML Links

Here’s a multiple-choice quiz based on the lesson about HTML links:

1-What is the purpose of the <link> tag in HTML?

a) Include an external CSS stylesheet

b) Specify the path to an image

c) Create a hyperlink to another webpage

d) Define a JavaScript function

Answer: a) Include an external CSS stylesheet

2-Which attribute is used in the <a> tag to specify the URL that the link should navigate to?

a) href

b) src

c) link

d) url

Answer: a) href

3-Which attribute is used in the <a> tag to open the linked document in a new browser tab?

a) target=”_blank”

b) target=”_self”

c) target=”_parent”

d) target=”_top”

Answer: a) target=”_blank”

4-What is the purpose of the mailto: scheme in an <a> tag’s href attribute?

a) Link to an external CSS stylesheet

b) Open a PDF document

c) Send an email

d) Navigate to a different section within the same page

Answer: c) Send an email

5-Which link tag is used to specify the canonical URL of a page?

a) <link rel=”icon”>

b) <link rel=”preconnect”>

c) <link rel=”canonical”>

d) <link rel=”alternate”>

Answer: c) <link rel=”canonical”>

6-What does the rel=”stylesheet” attribute value indicate in a <link> tag?

a) It specifies the URL of an external JavaScript file

b) It indicates a link to an image file

c) It indicates a link to an external CSS stylesheet

d) It defines the relationship between paginated content

Answer: c) It indicates a link to an external CSS stylesheet

7-Which link tag is used to indicate the next page in a sequence of paginated content?

a) <link rel=”canonical”>

b) <link rel=”stylesheet”>

c) <link rel=”next”>

d) <link rel=”prev”>

Answer: c) <link rel=”next”>

8-What is the purpose of the target=”_self” attribute value in an <a> tag?

a) Open the linked document in a new tab

b) Open the linked document in the same tab or window

c) Specify the relationship between paginated content

d) Link to an external JavaScript file

Answer: b) Open the linked document in the same tab or window

9-Which attribute is used to specify the text displayed for a link?

a) href

b) target

c) alt

d) rel

Answer: c) alt

10-What is the purpose of the download attribute in an <a> tag?

a) It specifies the target URL for the link.

b) It indicates that the link should open in a new browser tab.

c) It prompts the browser to download the linked file when clicked.

d) It defines the relationship between the current document and the linked resource.

Answer: c) It prompts the browser to download the linked file when clicked.

11-Which attribute is used to set the color of a link in CSS?

a) text-color

b) link-color

c) color

d) link

Answer: c) color

12-What is the purpose of the hreflang attribute in an <a> tag?

a) It specifies the language of the linked document.

b) It indicates the file format of the linked resource.

c) It sets the alignment of the link text.

d) It defines the relationship between paginated content.

Answer: a) It specifies the language of the linked document.

13-Which link tag is used to specify the URL of an RSS or Atom feed for the current page?

a) <link rel=”stylesheet”>

b) <link rel=”icon”>

c) <link rel=”alternate”>

d) <link rel=”canonical”>

Answer: c) <link rel=”alternate”>

14-Which attribute is used to add a tooltip or additional information to a link?

a) title

b) alt

c) target

d) hreflang

Answer: a) title

15-What is the purpose of the noopener attribute in the target=”_blank” link?

a) It ensures that the link opens in a new browser tab.

b) It prevents the linked page from accessing the window.opener property.

c) It adds a “no opener” message to the link.

d) It specifies that the link should not have a referrer.

Answer: b) It prevents the linked page from accessing the window.opener property.

16-Which attribute is used to make a link only apply styles when the user hovers over it?

a) active

b) visited

c) focus

d) hover

Answer: d) hover

17-What is the purpose of the ping attribute in an <a> tag?

a) It specifies a URL to send a ping request when the link is clicked.

b) It defines the relationship between paginated content.

c) It sets the visibility of the link.

d) It indicates the target URL for the link.

Answer: a) It specifies a URL to send a ping request when the link is clicked.

18-Which link tag is used to specify the URL of a web application manifest file?

a) <link rel=”manifest”>

b) <link rel=”stylesheet”>

c) <link rel=”icon”>

d) <link rel=”preload”>

Answer: a) <link rel=”manifest”>

19-Which attribute is used to make a link disabled and unclickable?

a) disabled

b) inactive

c) unavailable

d) non-clickable

Answer: a) disabled

20-What is the purpose of the media attribute in the <link> tag?

a) It specifies the character encoding of the linked document.

b) It defines the type of media for which the linked resource is intended.

c) It sets the visibility of the link.

d) It indicates the URL of the linked document.

Answer: b) It defines the type of media for which the linked resource is intended.

21-Which attribute is used to add a keyboard shortcut to a link?

a) accesskey

b) shortcut

c) key

d) hotkey

Answer: a) accesskey

22-What is the purpose of the type attribute in the <link> tag when linking to a stylesheet?

a) It specifies the media type of the linked document.

b) It sets the visibility of the link.

c) It indicates the URL of the linked document.

d) It defines the MIME type of the linked resource.

Answer: d) It defines the MIME type of the linked resource.

23-Which link tag is used to specify the URL of a web font?

a) <link rel=”stylesheet”>

b) <link rel=”icon”>

c) <link rel=”preload”>

d) <link rel=”font”>

Answer: a) <link rel=”stylesheet”>

24-Which attribute is used to specify the relationship between the current document and the linked resource?

a) href

b) rel

c) target

25-What is the purpose of the crossorigin attribute in the <link> tag?

a) It specifies the URL of the linked document.

b) It defines the relationship between paginated content.

c) It indicates that the linked resource should be fetched with CORS (Cross-Origin Resource Sharing) enabled.

d) It sets the visibility of the link.

Answer: c) It indicates that the linked resource should be fetched with CORS (Cross-Origin Resource Sharing) enabled.

26-Which attribute is used to specify the language of the linked document?

a) lang

b) type

c) language

d) hreflang

Answer: d) hreflang

27-What is the purpose of the rel=”preload” attribute value in a <link> tag?

a) It indicates that the linked resource is a preloaded image.

b) It defines the relationship between paginated content.

c) It sets the visibility of the link.

d) It hints to the browser to preload the linked resource for better performance.

Answer: d) It hints to the browser to preload the linked resource for better performance.

28-Which link tag is used to specify a link to an RSS or Atom feed?

a) <link rel=”icon”>

b) <link rel=”alternate”>

c) <link rel=”canonical”>

d) <link rel=”stylesheet”>

Answer: b) <link rel=”alternate”>

HTML

Curriculum

HTML Links – Hyperlinks: Definition, Types, Attributes, and Usage