What is Hyperlink in HTML?

Introduction

Good morning, students! Today, we will learn about hyperlinks in HTML. Hyperlinks are a fundamental part of web pages. They allow us to navigate between different web pages or different sections of the same page.

Definition

A hyperlink, or simply a link, is a reference in an HTML document that users can click on to jump to another location.

Basic Structure

In HTML, a hyperlink is created using the <a> tag. The href attribute specifies the URL of the page the link goes to. Here is the basic structure of a hyperlink:

<a href="URL">Link Text</a>

<a>: The anchor tag that defines the hyperlink.

href: The attribute that holds the URL of the destination page.

Link Text: The clickable text that users see.

Types of Hyperlinks

There are various types of hyperlinks in HTML:

External Links:
- These links point to another website.
- Example:

<a href="https://www.TUTORIALNEXA.IN">Visit TUTORIALNEXA</a>

2. Internal Links:

These links point to another page on the same website.
Example:

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

3. Anchor Links:

These links point to a specific section within the same page.
Use the id attribute to identify sections.
Example:

<a href="#section1">Go to Section 1</a>
<!-- Later in the page -->
<h2 id="section1">Section 1</h2>

4.Mailto Links:

These links open the user’s email client to send an email.
Example:

<a href="mailto:support@tutorialnexa.in">Email Us</a>

Opening Links in a New Tab

To open a link in a new tab, use the target="_blank" attribute.

Example:

<a href="https://www.tutorialnexa.in" target="_blank">Open tutorialnexa in New Tab</a>

Styling Hyperlinks

Hyperlinks can be styled using CSS. Common properties include:

color: Changes the color of the link.
text-decoration: Removes or adds underline to the link.

Example:

<a href="https://www.example.com" style="color: blue; text-decoration: none;">Styled Link</a>

Here is a simple example demonstrating different types of links:

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlinks Example</title>
</head>
<body>
    <h1>Types of Hyperlinks</h1>
    <a href="https://www.google.com">External Link</a><br>
    <a href="about.html">Internal Link</a><br>
    <a href="#section2">Anchor Link</a><br>
    <a href="mailto:example@example.com">Mailto Link</a><br>
    
    <h2 id="section2">Section 2</h2>
    <p>This is Section 2.</p>
</body>
</html>

Key Points to Remember

A hyperlink is created using the <a> tag.
The href attribute specifies the URL or location.
Types include external, internal, anchor, and mailto links.
Use target="_blank" to open links in a new tab.
Style links with CSS.

Summary : Hyperlink in HTML

Hyperlink: A clickable reference to another location.
Tag: <a>
Attribute: href
Types:
External: Links to another website.
Internal: Links to another page on the same site.
Anchor: Links to a section on the same page.
Mailto: Opens email client.
New Tab: Use target="_blank".
Example: <a href="https://www.example.com">Visit Example</a>

IN TABLE FORMAT : HYPERLINK IN HTML

Exam Note

Hyperlink in HTML	Details
Tag	`<a>`
Attribute	`href`
External Link	Links to another website <br> Example: `<a href="https://www.example.com">Visit Example</a>`
Internal Link	Links to another page on the same site <br> Example: `<a href="about.html">About Us</a>`
Anchor Link	Links to a section on the same page <br> Example: `<a href="#section1">Go to Section 1</a>`
Mailto Link	Opens email client <br> Example: `<a href="mailto:example@example.com">Email Us</a>`
New Tab	Use `target="_blank"` <br> Example: `<a href="https://www.example.com" target="_blank">Open Example in New Tab</a>`
Styling Links	Use CSS properties like `color` and `text-decoration` <br> Example: `<a href="https://www.example.com" style="color: blue; text-decoration: none;">Styled Link</a>`