Creating internal and external links

Hello, students! In this lesson, we will learn about links and anchors.

Links are used to connect web pages to each other.

Anchors are used to create internal links within a web page.

Topics

• What are HTML links?
• How to create internal and external links?
• Code examples

What are HTML links?

Links are HTML elements used to create connections between web pages.

They are identified by the <a> tag.

The href attribute of the <a> tag specifies the address of the web page that will open when the link is clicked.

For example, the following code creates a link to the page https://www.google.com/:

<a href="https://www.google.com/">Google</a>

The browser displays the link as follows:

Google

You can also use the target attribute of the <a> tag to specify the window or tab in which the web page will open.

Possible values for the target attribute are:

• _self: The web page will open in the same current window or tab.
• _blank: The web page will open in a new window.
• _parent: The web page will open in the parent window.
• _top: The web page will open in the top window.

For example, the following code creates a link to the page https://www.google.com/ that will open in a new window:

<a href="https://www.google.com/" target="_blank">Google</a>

The browser displays the link as follows:

Google

How to create internal and external links?

Internal links are links that connect web pages within the same domain.

To create an internal link, specify the address of the internal web page as the value of the href attribute.

For example, the following code creates a link to the about.html page within the same domain:

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

The browser displays the link as follows:

About

External links are links that connect web pages in different domains.

To create an external link, specify the address of the external web page as the value of the href attribute.

For example, the following code creates a link to the https://www.google.com/ page in a different domain:

<a href="https://www.google.com/">Google</a>

The browser displays the link as follows:

Google

Code examples

Here are some code examples for HTML links:

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

<a href="https://www.google.com/">Google</a>

<a href="https://www.google.com/" target="_blank">Google (new window)</a>

<a href="https://www.google.com/" title="Google Page">Google</a>

Exercises

• Create an HTML document with a link to the page https://www.wikipedia.org/.
• Save the document and open it in a browser.

Observe how the browser displays the link.

Good luck!