askvity

How to Connect Pages in HTML?

Published in HTML Linking 3 mins read

You connect pages in HTML using the <a> (anchor) tag, which creates hyperlinks.

Using the <a> Tag for Hyperlinks

The primary way to link HTML pages together is by using the <a> tag, also known as an anchor tag. This tag defines a hyperlink, which users can click to navigate from one page to another.

Key Attributes of the <a> Tag

The most crucial attribute of the <a> tag is the href attribute. This attribute specifies the destination of the link.

  • href Attribute: This attribute holds the URL (Uniform Resource Locator) of the page you want to link to. It can be an absolute URL (e.g., https://www.example.com/page2.html) or a relative URL (e.g., page2.html).

Basic Syntax

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

Example: Linking to Another Page on the Same Website

If you have two HTML files, index.html and about.html, in the same directory, you can link them like this:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Home Page</title>
</head>
<body>
  <h1>Welcome to the Home Page</h1>
  <p>Click <a href="about.html">here</a> to learn more about us.</p>
</body>
</html>
<!-- about.html -->
<!DOCTYPE html>
<html>
<head>
  <title>About Us</title>
</head>
<body>
  <h1>About Us</h1>
  <p>This is the about us page.  Go back to the <a href="index.html">home page</a>.</p>
</body>
</html>

In this example, clicking the "here" text on index.html will take you to about.html, and clicking "home page" text on about.html will return you to index.html.

Example: Linking to a Page on a Different Website

To link to a page on another website, use the absolute URL:

<a href="https://www.example.com">Visit Example.com</a>

Targeting Links

You can use the target attribute to specify where the linked page should open. Common values include:

  • _self (default): Opens the linked page in the same tab/window.
  • _blank: Opens the linked page in a new tab/window.
  • _parent: Opens the linked page in the parent frame.
  • _top: Opens the linked page in the full body of the window.

Example:

<a href="https://www.example.com" target="_blank">Visit Example.com in a new tab</a>

In summary, the <a> tag, along with its href attribute, is the fundamental mechanism for connecting pages in HTML, whether they are on the same website or different ones. Using relative and absolute URLs effectively allows for organized and navigable web structures.

Related Articles