HTML
Links

Links are a significant part of HTML, which are used to define a relationship between two resources on the web. In general, these links, jointly with browsers’ functionalities, enable users to move from one document to another in a direct way.

There are two major ways of performing Links in HTML.

The ‘a’ Element / Hyperlink / Anchor Text
The Link Element / Link Tag

Hyperlink

A hyperlink is an element in a hypertext markup language (HTML) document that links to either another portion of the document or to a different document altogether.

Browsers highlight the content of this element as blue and underlined and permit users to follow the link with a click.

Basic syntax of hyperlink:

Copy Code


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

Hyperlink Breakdown:

Following are some types of links.

Local: A page on the same server or directory

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>Local Link</title> 
    </head>
  
    <body> 
        <p>This is my <a href="my-profile-picture">Profile Picture</a>.</p>
    </body>
</html>

Internal: A section on the present page or document

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>Internal Link</title> 
    </head>
  
    <body> 
        <h3 id="C5">Chapter 5</h3>
        <a href="#C5">Jump to Chapter 5</a>
        OR
        <a href="html_demo.html#C5">Jump to Chapter 5</a>
    </body>
</html>

External: A page or website on a different server or directory

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>External Link</title> 
    </head>
  
    <body> 
        <p><a href="https://phpdocs.com/html">Learn HTML from </a>PHPDocs</p>
    </body>
</html>

Image: Use image as link

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>Image Link</title> 
    </head>
  
    <body> 
        <p>This image is a link. You can click on it.</p>
        <a href="html-homepage.html">
            <img src="https://www.lvsys.com/pub/photo/thumb/512px-HTML5-logo.svg_fitbox_700x700.png" alt="HTML 5 Logo">
        </a>
    </body>
</html>

Email: Opens the visitor’s e-mail program

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>Email Link</title> 
    </head>
  
    <body> 
        <a href="mailto:xyz@gmail.com">E-mail me!</a>
    </body>
</html>

Link Tag

The <link> tag is employed to outline a relationship between a HTML document and an external resource. This element is most commonly used to define the relationship between a document and one or a lot of external CSS stylesheets.

Basic syntax of Link tag:

Copy Code


<link rel="stylesheet" type="text/css" href="theme.css">

Link Tag Breakdown:

Link Tag Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
  
    <body>
        <p>I am formatted with a linked style sheet</p>
        <p>Me too!</p>
    </body>
</html>

HTML Links

Hyperlink

Link Tag

HTML
Links