Configuring Hyperlinks

Links Configuration

Opening Links in a New Tab or Window

• By default, clicking a link opens it in the same browser tab.
• To make the link open in a new browser tab or window, use the target="_blank" attribute.

<a href="https://www.example.com" target="_blank">Open Example in New Tab</a>

html

Target Attribute

Control how the link opens:

<a href="page.html" target="_blank">Opens in a new browser tab/window</a>
<a href="page.html" target="_self">Opens in same window (default)</a>
<a href="page.html" target="_parent">Opens in parent frame</a>
<a href="page.html" target="_top">Opens in a new browser window</a>

html

Download Attribute

Specify that the target will be downloaded:

<a href="file.pdf" download>Download PDF</a>
<a href="file.pdf" download="custom-filename.pdf">Download with custom filename</a>

html

---

Adding Titles to Links

You can add a title attribute to provide additional information when the user hovers over the link.

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

html

The title text “Visit Example Website” will appear when the user hovers over the link.

Common Link Patterns

Navigation Menus

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

html

Button-Style Links

<a href="/signup" class="button">
  Sign Up Now
</a>

<style>
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
</style>

html

Image Links

<a href="product.html">
  <img src="product-thumb.jpg" alt="Product Name">
</a>

html