Menu
HTML

Anchor Attributes: href, target, title

Let's examine the essential characteristics of anchor tags ( tags) that enable them to function:

 

1. href Attribute: The Destination

Every <a> tag needs an href attribute. It tells the browser where to go when someone clicks the link. For example:

<a href="https://www.codersmile.com">Visit Codersmile</a>

This link takes you to Codersmile.com when clicked.

 

2. target Attribute: Where to Open

The target attribute determines where the linked content opens:

  • _self: Opens in the same window (default).
  • _blank: Opens in a new tab or window.
  • _parent and _top: Used in framesets, _parent opens in the parent frame, _top in the full body of the window.

Example:

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

This link opens Codersmile.com in a new tab.

 

3. title Attribute: Tooltip Info

The title attribute adds a tooltip when you hover over the link, providing additional information. For instance:

<a href="https://www.codersmile.com" title="Visit Codersmile">Codersmile</a>

Hovering over "Codersmile" shows a tooltip saying "Visit Codersmile".

 

Example

Here’s how you might use these attributes together in a simple HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Understanding Anchor Attributes</title>
</head>
<body>
<h1>Anchor Attributes Example</h1>
<p><a href="https://www.codersmile.com">Visit Codersmile</a></p>
<p><a href="https://www.codersmile.com" target="_blank">Visit Codersmile in a new tab</a></p>
<p><a href="https://www.codersmile.com" title="Visit Codersmile">Codersmile</a></p> <!-- move to curssor and wait -->
</body>
</html>

 

HTML