HTML Links

We can learn HTML and find links on almost all websites. By clicking on a link, we navigate to another webpage. Continue reading below to explore HTML links in detail with Mytour.

HTML Links

1. HTML Links

HTML links are hyperlinks.

By clicking on a link, we navigate to another webpage or document. When hovering over a link, the mouse pointer transforms into a different icon.

Please note: a link is not just text; it can be an image or any HTML element.

The syntax for links in HTML is as follows:

Hyperlinks are defined using the a tag in HTML.

Where:
- The href attribute specifies the destination address of the link (e.g., Mytour).
- The Link text is the displayed part. Click on the link text to navigate to the specified address.

Note: Avoid using trailing slashes at the end of subdirectory paths. Otherwise, it may trigger redundant server requests. Some servers automatically append trailing slashes and then initiate a new request.

Example: Below illustrates the syntax for utilizing link tags in HTML:

The returned result appears as follows:

Local Link in HTML Syntax Example:

In the given example, we utilize absolute URLs (complete web addresses).

Local links (links to the same website) are specified using relative URLs (without https://www...).

Example: Below is an illustration of local links in HTML.

The resulting output when applying local links appears as follows:

1.3 Setting Link Colors in HTML

By default, links will display across all browsers as follows:
- Unvisited links are underlined and appear in blue.
- Visited links are underlined and appear in purple.
- Active links are underlined and appear in red.

However, you can customize the default link colors in HTML using CSS:
Example: The following example illustrates how to set link colors in HTML:

The resulting output when changing link colors appears as follows:

1.4 HTML Target Attribute

The target attribute is used to specify where the linked document will open.

The target attribute can include one of the following values:
_blank: Opens the linked document in a new window or tab.
_self: Opens the linked document in the same window/tab when the user clicks the link (default).
_parent: Opens the linked document in the parent window.
_top: Opens the linked document in the full body of the window.
framename: Opens the linked document in a named frame.

Example 1: In the example below, the linked document opens in a new window/tab:

The returned result appears as follows:

Tip: If a website is locked within a frame, you can use target='_top' to open that frame.

Example 2: The following example illustrates how to use target='_top':

The returned result appears as follows:

1.5 Image Link in HTML

We can use images as links in HTML.

Example: Below is an example of an image link in HTML:

The returned result appears as follows:

Note: In the above example, we add border:0 to prevent IE9 and earlier browser versions from displaying a border around the image when it is a link.

1.6 Link Title in HTML

The title attribute specifies additional information about an element. This information is typically displayed as text in a tooltip when users hover over the element.

Example: Below is an illustrative example of using the title attribute to specify additional information about an element in HTML:

The returned result appears as follows:

1.7 Creating Bookmarks in HTML

Bookmarks in HTML are used to allow users to navigate to specific sections on a webpage.

To create a bookmark in HTML, we first create a bookmark and then add a link to that bookmark.

When users click on the link, the page will scroll to the bookmarked position.

Example: Below is an example of creating a bookmark in HTML:

First, we use the id attribute to create a bookmark:

The next step is to add a link to the bookmark (in this example, it's 'Jump to Chapter 4') on the same page:

Alternatively, add a link to the bookmark ('Jump to Chapter 4') from another page:

The returned result appears as follows:

1.8 External Links in HTML

External pages can be referenced by either a full URL or a path relative to the current webpage.

Example 1: The following example uses a full URL to link to a webpage:

The returned result appears as follows:

Example 2: The example below links to a page within the html folder on the current website:

The returned result appears as follows:

Example 3: The following example links to a page located in the same directory as the current page:

The returned result appears as follows:

2. Conclusion

This article has just introduced you to links in HTML. In the next article, we will continue to explore the img tag in HTML. Additionally, if you have any questions or need further clarification, feel free to leave your comments below the article.