There are links on almost every web page. Links enable visitors to
navigate between pages by clicking.

Links in HTML – Hyperlinks

Hyperlinks are links in HTML.

You can access another paper by clicking on a link.

The mouse arrow will change into a tiny hand when you move the mouse
pointer over a link.

A link does not necessarily have to be text. An picture or any other HTML
element can be a link!

Links in HTML


Example: 

A hyperlink is defined by the HTML <a> tag. Its syntax is as
follows:

<a href=“url”>Write text here…</a>

The href attribute of the
<a> element, which denotes the
location of the link, is its most crucial component.
The portion that
the reader will see is the link text.
The reader will be directed to
the provided URL address by clicking on the link text.


Example: 


The following example demonstrates how to link to
technicalmrstar.com:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>CSS Padding</title>
</head>
<body>

    <p>
        <a href=“https://www.technicalmrstar.com/”>Visit Technical Mr Star</a>
    </p>

</body>
</html>

In all browsers, links will typically show up as follows:

  • An unclicked link is highlighted in blue
  • A clicked link is highlighted in purple.
  • A link that is active is highlighted in red.

Tip: Of course, CSS may be used to style links for a different
appearance

Using the target attribute in HTML links


The linked page will by default open in the current browser tab. You must
specify a different target for the link in order to change this.

Where to open the linked document is specified by the target
attribute.

One of the following values may be present for the target
attribute:

  • _parent – Opens the document in the parent frame
  •  _self – By default, opens the document in the same window or
    tab as it was clicked
  •  _blank – Opens the document in the complete body of the
    window
  • _top – Opens the document in the window’s main body

Example:

To open the referenced document in a new window or tab, use
target=”_blank”:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Using the target attribute in HTML links</title>
</head>
<body>

    <p>
        <a href=“https://www.technicalmrstar.com/” target=“_blank”>Visit Technical Mr Star</a>
    </p>

</body>
</html>

Comparing absolute and relative URLs

In the two aforementioned cases, the
href property is used with an
absolute URL (a complete web address).

A relative URL (without the “https://www” element) is used to specify a
local link, which is a link to a page within the same website:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Absolute and Relative URLs</title>
</head>
<body>

    <h2>Absolute URLs</h2>
    <p><a href=“https://www.technicalmrstar.com/”>Technical Mr Star</a></p>

    <h2>Relative URLs</h2>
    <p><a href=“/search/label/HTML”>HTML Tutorial</a></p>


</body>
</html>

Use an image as a link in HTML

Example:

Put the <img> tag inside the <a> tag to use an image as a link:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Link to an Image</title>
</head>
<body>

    <h2>Link to an Image</h2>

    <p>A link is shown in the image below. Click on it if you can.</p>
    
    <a href=“https://www.technicalmrstar.com/”>
        <img src=“https://blogger.googleusercontent.com/img/a/AVvXsEh4u31HigurSnc5jcEPew9xgD2cUPEs3wxm_J157HxvJ-WdHVgDpo3KbqRB6GDVnTLxOP4vqTvgdJFFBW8o0G_t8ZMX670PBKwWBgGJKVEz1vBUAD11Ur0nveBUCdQ1fySA5_CNxEk5jfYPWDkwsCCsquBHkM4vf8R4pTvIRbMOhUASk3-QB2fL0t3g=s150” alt=“Technical Mr Star” style=“width:42px;height:42px;”>
    </a>


</body>
</html>

A connection to an email address

Example:

To create a link that launches the user’s email client and allows them
to send a new email, use the
mailto: attribute inside the href attribute:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>A connection to an email address</title>
</head>
<body>

    <h2> A connection to an email address</h2>

    <a href=“mailto:mailofuser@example.com”>Send email</a>


</body>
</html>

Link Title

An element’s title attribute specifies additional information. When the
mouse is over the element, the information is frequently displayed as a
tool-tip text.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Link Title</title>
</head>
<body>

    <h2> Link Title </h2>

    <a href=“https://www.technicalmrstar.com/html/” title=“Navigate to the Technical Mr Star HTML section”>Please see our HTML Tutorial.</a>


</body>
</html>

Rate this post

Categorized in: