HTML - Text Links

Anchor Tag

The anchor tag, shown by <a>, is the main HTML element used to create text links. To create a text link, you need to wrap the text or content you want to make clickable inside the <a> tag. Here's the basic format of the anchor tag:

<a href="destination-url">Link Text</a>

The <a> tag has several attributes that you can use to change the behavior and look of the link. The most important attribute is href, which sets the destination URL of the link.

To create a text link that points to the homepage of a website, you would use the following code:

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

When a user clicks on the link text "Visit Example.com," they will be sent to the set URL, in this case, "https://www.example.com".

Href Attribute

The href attribute is used to set the destination URL of a text link. The value of the href attribute can be either an absolute URL or a relative URL.

An absolute URL is a full web address that includes the protocol (e.g., "https://"), domain name, and path to the specific page or resource. Absolute URLs are used when linking to external websites or pages outside of your own website.

On the other hand, a relative URL is a path that is relative to the current page or website. Relative URLs are used when linking to pages or resources within your own website. They do not include the protocol or domain name.

Examples of absolute and relative URLs:

When using relative URLs, the browser finds the complete URL by combining the relative path with the current page's URL.

The href attribute can also be used to link to email addresses using the mailto: protocol, or to start phone calls using the tel: protocol.

By using the anchor tag and the href attribute, you can create clickable text links that allow users to go to different pages, sections, or resources within your website or external websites.

Opening Links in a New Window or Tab

By default, when a user clicks on a text link, the linked page opens in the same browser window or tab, replacing the current page. But there may be times when you want the linked page to open in a new window or tab, letting the user keep the current page open.

To do this, you can use the target attribute in the anchor tag. The target attribute tells where to open the linked document. To open a link in a new window or tab, set the value of the target attribute to "_blank".

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

In this case, when a user clicks on the "Visit Example.com" link, the linked page will open in a new browser window or tab, depending on the user's browser settings.

It's important to note that opening links in new windows or tabs should be used rarely and only when needed, as it can disrupt the user's browsing experience if used too much.

Linking to a Specific Part of the Same Page

Sometimes, you may want to link to a specific section or part of the same page, letting users quickly jump to that section without having to scroll by hand. This is very useful for long pages with many sections or for making a table of contents.

To link to a specific part of the same page, you need to use the id attribute to make anchors and then link to those anchors using the # symbol followed by the id value.

First, give a unique id attribute to the element you want to link to. For example, if you have a heading that you want to link to, you can give it an id attribute like this:

<h2 id="section1">Section 1</h2>

Next, make a text link that points to the anchor using the # symbol followed by the id value in the href attribute:

<a href="#section1">Go to Section 1</a>

When a user clicks on the "Go to Section 1" link, the page will scroll to the element with the id "section1".

You can make many anchors on the same page and link to them using their id values. This lets users easily go to different sections of the page using text links.

By using the target attribute and linking to specific parts of the same page using anchors and the id attribute, you can make a website navigation system that is easier to use.

Link States

Links in HTML can exist in four different states:

1. Default: The default state of a link is how it appears when it is not being interacted with by the user.

2. Hover: The hover state is triggered when the user moves their mouse cursor over the link without clicking it.

3. Active: The active state is triggered when the user clicks on the link and holds down the mouse button.

4. Visited: The visited state applies to links that the user has previously clicked on and visited.

To style these different link states, you can use CSS pseudo-classes. Pseudo-classes are keywords that you can add to a selector to specify a special state of the selected element. The pseudo-classes for link states are:

a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: green;
}

Styling Links with CSS

In addition to styling link states, you can use CSS to change the look of links to match your website's design. Some common CSS properties used to style links include:

a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  background-color: #f0f0f0;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

a:hover {
  background-color: #333;
  color: #fff;
}

By combining the styling of link states and using CSS properties to customize the look of links, you can create appealing and user-friendly text links that improve the navigation experience on your website.