• Tutorial List

HTML Page Linking

Last updated Jul 08, 2020
How to link one web-page to another in HTML

What is HTML Page Linking?

HTML Page linking means making connections between web pages so that website visitors can easily move from one web-page to another.


How to link one web-page to another in HTML?

The HTML anchor (<a>) tag helps to make link one web-page to another. This tag has the href=”…” attribute, this attribute takes the address of the web-page where you want to send a visitor. And when a visitor clicks on the link, the visitor will go to that page.

href=”…” Attribute

This attribute takes the address of a web-page. The web-page address can be an URL or a path or location of a page.

<!DOCTYPE html>
<html>
	<body>

      <a href="https://tutorials.w3jar.com/example-web-page/">Example HTML Page</a>

	</body>
</html>

Do Yourself: HTML Page Linking

First, create a new folder on your desktop and name it whatever you want, and inside this folder, we will create three HTML files – 1) index.html, 2) about.html, 3) contact.html

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Home Page</title>
</head>
<body>
    <ul>
        <li><a href="./about.html">About</a></li>
        <li><a href="./contact.html">Contact</a></li>
    </ul>

    <h1>Home Page</h1>
    <p>This is Home page.</p>
</body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>About Page</title>
</head>
<body>
    <ul>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./contact.html">Contact</a></li>
    </ul>

    <h1>About Page</h1>
    <p>This is About page.</p>
</body>
</html>

contact.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Contact Page</title>
</head>
<body>
    <ul>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./about.html">About</a></li>
    </ul>

    <h1>Contact Page</h1>
    <p>This is Contact page.</p>
</body>
</html>

After creating these files open index.html file in your browser and try it.


Role of the target=”…” attribute on HTML Page Linking

With the help of the target attribute, you can handle how a link should open. Such as open in a new tab etc.

👉 Values of the target Attribute

ValueDescription
_blankLinked documents will open in a new tab or window.
_selfThis is the default value of the target attribute. It will open the link in the current tab or window.
_topIt will open the link in the browser full window if the link is inside a frame.
_parentIt opens the linked document in the parent frame. The frameset tag is deprecated in HTML5, that’s why it is rarely used nowadays.
Values of the <a> target Attribute

Examples:

<a href="https://tutorials.w3jar.com/example-web-page/">Default</a><br>
<a href="https://tutorials.w3jar.com/example-web-page/" target="_self">Same as the above</a>
<a href="https://tutorials.w3jar.com/example-web-page/" target="_blank">Open in new tab</a>
<a href="https://tutorials.w3jar.com/example-web-page/" target="_top">Open in same window</a>

Ask Questions

Your email address will not be published. Required fields are marked *