Internal Link

What is an Internal Link?

An internal link is a link that connects one page to another page or resource within the same website. For example, a website may have a Home Page, About Page, Service Page, and Contact Page. A link from the Home Page to the About Page or Contact Page is called an Internal Link.

Syntax:

<a href="about.html">About Page</a>

Syntax with Attributes

<a href="about.html" target="_self" title="Open About Page">About Page</a>

Example:

<a href="contact.html" target="_blank" title="Open Contact Page">Open Contact Page</a>

What is the target Attribute?

The target attribute tells the browser where to open the page given in the href attribute.

There are four target values:

• _self — Opens the linked page in the same browser tab.
• _blank — Opens the linked page in a new browser tab.
• _parent — Opens the linked page in the parent frame.
• _top — Opens the linked page in the top-level browser window.

List of Common Important Attributes

• href — Specifies the URL or destination of the link.
• target — Specifies where to open the linked document.
• title — Provides additional information about the link.
• download — Specifies that the linked resource should be downloaded.
• rel — Specifies the relationship between the current page and the linked resource.
• hreflang — Specifies the language of the linked document.
• type — Specifies the type of the linked resource.

Note: An internal link points to a page or resource within the same website.

How to Create an Internal Link Between Two Web Pages

You can create an internal link between two pages by following these steps.

1. First, create the two HTML pages that you want to link to each other.
2. Then, apply the <a> tag on the first page to create a link to the other webpage.
3. Next, add the URL of the other webpage in the href attribute.
4. Lastly, keep the clickable link text between the opening and closing <a> tags. When the link is clicked, it opens the other webpage.
5. You can also use the style attribute to change the appearance of the internal link, such as its color, font size, or background.

HTML id Attribute: Link to a Specific Paragraph

The id attribute gives a unique name to an HTML element, such as a paragraph or heading. It helps users go directly to a specific paragraph or section on a webpage.

To do this, add id="id_name" to the opening tag of the element. Then, add #id_name after the webpage URL in the href attribute of the anchor (<a>) tag.

In simple words, the id attribute helps a link take users directly to a specific part of a webpage instead of only opening the page.

Example: Link to a Specific Paragraph from Another Webpage

Page 1: Destination Page (about.html)

Add an ID to the paragraph that you want users to reach.

<h2>About HTML</h2>

<p id="html-intro">
  HTML is used to create webpages.
</p>

Here, id="html-intro" gives a unique name to the paragraph.

Page 2: Link Page (index.html)

Use the same ID after the destination webpage URL in the href attribute.

<p>
  Learn more about
  <a href="about.html#html-intro">HTML</a>.
</p>

When users click the HTML link, the browser opens about.html and moves to the paragraph with the matching ID.

Follow These Steps:

1. Add a unique ID to the paragraph or heading on the destination webpage.
2. Write the destination webpage URL in the href attribute of the anchor tag.
3. Add # followed by the same ID after the URL.
4. Click the link to open the destination webpage and jump to the matching paragraph or section.

Note: CSS can also use an element's id to style that element. However, CSS styling is a separate use of the id attribute from linking to a specific paragraph.