Scribd
Upload
2 views4 pages

HTML Links

HTML links, or hyperlinks, are essential components of web content that connect users to related pages or resources. They can be categorized as internal links, which navigate within the same page, and external links, which direct to different web pages or URLs. The <a> tag is used to create these links, with various syntax options for different link types, including email links and image links.

Uploaded by

justthat710
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views4 pages

HTML Links

HTML links, or hyperlinks, are essential components of web content that connect users to related pages or resources. They can be categorized as internal links, which navigate within the same page, and external links, which direct to different web pages or URLs. The <a> tag is used to create these links, with various syntax options for different link types, including email links and image links.

Uploaded by

justthat710
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML Links

HTML links or hyperlinks are words, phrases, or images in online content that, on clicking,
take the site visitor to another web page with related content. Links are an integral part of the
world wide web.
Links connect pages both within a website and to other websites. They enable site visitors to
collect relevant information in less time by clicking their way from one page to another on
any server across the world.

There are two ends of a link: anchor and direction. The link will start at the ‘source’ anchor
and point to the ‘destination’ anchor. The destination anchor may be an HTML document,
image, video, or a section within an HTML document.

HTML Link Syntax


We specify a link using the <a> tag.

Syntax:

<a href="url">Link text</a>

Explanation:

● <a></a>: This is the anchor tag that creates a hyperlink. Anything between this tag
becomes part of the link. The user can click that part to reach the linked document.

● href: Specifies the destination address of the link used.

● Link Text: The visible part of the link.

Example:
<html>
<head>
<title>Example of HTML Link</title>
</head>
<body>
<p>Click on the below link</p>
<a href = "-------">ABC</a>
</body>
</html>

HTML Link Colors


By default, in most browsers, links appear in the following colors:
● Unvisited link: blue and underlined.
● Visited link: purple and underlined.
● Hover link: when the user hovers mouses over it.
● Active link (the moment a link is clicked): red and underlined.

Internal and External Links in HTML


A website is a collection of interconnected web pages. Links creation are an essential part of
web design. Links creation properly utilizes the content and reduce the effort for repetition of
content. Links can be used to interconnect two different web pages or it may be used as
HTML
hyperlinks to go to some other URL or we can use a link to navigate in the same web page.

Internal Links in html


An internal link is used in html page to navigate properly in the webpage. If you want to go to
any specific location in the same page by clicking on a link, you can create an internal link in
the webpage.
<a> tag is used for link creation in html page.

Syntax:

<a href= “#link1”> MyLink</a>


Here, “href” contain the location name where the link will navigate us when we click on
“MyLink”. The location is given a name for reference and the name contain “#” at the time of
creating link.

<a name= “Link1”> my link starts here </a>


This is the place where we will reach on click.

Example:

<html>
<head>
<title> Internal link example </title>
</head>
<body>

<p>Welcome to my web-page. This is an example of internal link creation in html


web-page.</p><br>

<a name= “HTML Introduction”> Introduction to Html </a>

<p> Html is hyper text mark-up language.</p><br><br>

<a name= “CSS Introduction”> Introduction to CSS </a>

<p> Cascading Style Sheet is used for styling the web pages</p><br><br>

<a href= “#HTML Introduction”> html</a><br>

<a href= “#CSS Introduction”> css</a>


</body>
</html>

External Links in html


An external link is used to interconnect two html web pages. When you want to navigate to
some other page or any other URL by clicking on a link on webpage, external links are
created. An external link can be created by using anchor tag in html web page.

Syntax:
<a href= “Pagename.html or URL”> text to be written on link </a>
Here, Pagename.html or URL is the name of the webpage or address where link will
navigate on click.

Example:

<html>
<html lang="en">
<head>
<title>External Link Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Click the link below to visit an external website:</p>
<a href="https://www.example.com">Visit Example Website</a>
</body>
</html>

Clicking on “Visit Example Website”, the new tab will be opened.

Using image as a link


To use an image as a link in HTML, you can nest the <img> tag (which displays the image)
inside an <a> tag (which creates the link). This way, the image becomes clickable and links
to another webpage or resource.

Syntax:
<a href="">
<img src=""">
</a>

Example :
<html>
<head>
<title>Image as a Link</title>
</head>
<body>
<h1>Click on the image to visit Example Website</h1>
<a href="https://www.example.com">
<img src="https://via.placeholder.com/150">
</a>
</body>
</html>

Explanation:
<a href="https://www.example.com" target="_blank">: The anchor tag creates a link to the
specified URL.

<img src="https://via.placeholder.com/150": The image is displayed, and when clicked, it will


redirect the user to the link provided inside the <a> tag.

Email links in html


We can create an email link in html webpage. If anyone click on that link it will give an option
to
send an email to the specified email address. This link can be created through anchor tag in
html.

Syntax:
<a href= “e-mail id”> Send email </a>

Example:
<! DOCTYPE html>
<html>
<head>
<title> Email link Example</title>
</head>
<body>
<h1> This page creates an emailing link in html webpage</h1>
<br>
<a href= "[email protected]"> Send an email </a>
</body>
</html>

You might also like