> For the complete documentation index, see [llms.txt](https://netsec.nerd-cafe.ir/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://netsec.nerd-cafe.ir/web-development/html/working-with-links.md).

# Working with Links

HTML links allow users to <mark style="color:red;">**navigate between pages**</mark>, <mark style="color:red;">**download files**</mark>, or <mark style="color:red;">**open external resources**</mark>. Links are created using the `<a>` tag (anchor tag).

### <mark style="color:blue;">**1. Basic Structure of a Link**</mark>

A basic link uses the `<a>` tag, where the `href` attribute defines the destination URL.

* **Syntax:**

```html
<a href="URL">Link Text</a>
```

* **Example:**

```html
<a href="https://www.yaser-rahmati.ir">Visit Example</a>
```

In this example, clicking "Visit Example" will take the user to "<https://www.yaser-rahmati.ir>".

### <mark style="color:blue;">**2. Linking to Other Web Pages**</mark>

You can create links to internal pages of your website or external websites.

* **Internal Link Example:**

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

* **External Link Example:**

```html
<a href="https://www.google.com">Go to Google</a>
```

### <mark style="color:blue;">**3. Opening Links in a New Tab**</mark>

To open a link in a new tab, use the `target="_blank"` attribute. This is often used for external websites.

* **Example:**

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

### <mark style="color:blue;">**4. Using Links with Email (mailto)**</mark>

You can create a link that opens the user’s default email client to send an email.

* **Syntax:**

```html
<a href="mailto:email@example.com">Send an Email</a>
```

* **Example:**

Clicking the link will open the default email client and prefill the "To" field.

### <mark style="color:blue;">**5. Creating Links to Phone Numbers**</mark>

You can create links that <mark style="color:red;">**allow users to call a phone number directly**</mark> if they're using a mobile device or an app that supports calling.

* **Syntax:**

```html
<a href="tel:+1234567890">Call Us</a>
```

* **Example:**

```html
<a href="tel:+11234567890">Call +1 123-456-7890</a>
```

### <mark style="color:blue;">**6. Downloadable Links**</mark>

You can add the `download` attribute to make a link download a file instead of navigating to it.

* **Syntax:**

```html
<a href="file.pdf" download>Download PDF</a>
```

* **Example:**

```html
<a href="report.pdf" download>Download the report</a>
```

When the link is clicked, the browser will download the `report.pdf` file.

### <mark style="color:blue;">**7. Linking to a Specific Section of a Web Page (Anchor Links)**</mark>

You can link to a specific part of the same page or another page using `id` attributes and anchor links.

* **Example of Linking to a Section on the Same Page:**

Create an `id` in the section you want to link to:

```html
<h2 id="section1">Section 1</h2>
<p>This is section 1.</p>
```

Then create a link to that section:

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

* **Example of Linking to a Section on Another Page:**

```html
<a href="about.html#team">Go to Team Section</a>
```

### <mark style="color:blue;">**8. Styling Links**</mark>

By default, links are <mark style="color:red;">**blue**</mark> and <mark style="color:red;">**underlined**</mark>, but you can style them using CSS. Common states of a link are:

* **Normal (unvisited)**: This is the default look of a link.
* **Hover**: What happens when a user hovers the mouse over the link.
* **Visited**: The appearance of a link after it’s been clicked.
* **Active**: The appearance of the link when it’s clicked and held.
* **Example:**

```html
<style>
  a {
    color: blue;  /* Default link color */
    text-decoration: none;  /* Remove underline */
  }
  a:hover {
    color: red;  /* Change color when hovered */
  }
  a:visited {
    color: purple;  /* Change color after visited */
  }
  a:active {
    color: green;  /* Change color when clicked */
  }
</style>
```

### <mark style="color:blue;">**9. Complete Example of Links in HTML**</mark>

```html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Links Example</title>
    <style>
        a {
            color: blue;
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Working with Links in HTML</h1>

    <p>Here is a link to <a href="https://www.example.com" target="_blank">Example.com</a>.</p>
    
    <p>Contact us via email: <a href="mailto:support@example.com">Send an Email</a></p>

    <p>Call us at <a href="tel:+11234567890">+1 123-456-7890</a>.</p>
    
    <p>Download our brochure: <a href="brochure.pdf" download>Download PDF</a></p>

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

    <h2 id="section1">Section 1</h2>
    <p>This is Section 1 content.</p>

    <p><a href="#top">Back to Top</a></p>
</body>
</html>
```

This guide covers everything you need to know to start working with links in HTML, from simple links to anchor links and downloadable files.

### <mark style="color:blue;">Keywords</mark> <a href="#keywords" id="keywords"></a>

`HTML`, `Hypertext Markup Language`, `Tags`, `Elements`, `Attributes`, `Head`, `Body`, `Paragraph`, `Heading`, `Title`, `Meta`, `Link`, `Image`, `Anchor`, `Hyperlink`, `List`, `Table`, `Form`, `Input`, `Button`, `CSS`, `Class`, `ID`, `Inline`, `Block`, `Div`, `Span`, `Script`, `Styles`, `Font`, `Color`, `Background`, `Margin`, `Padding`, `Border`, `Doctype`, `HTML5`, `Video`, `Audio`, `Canvas`, `SVG`