Working with Links

HTML links allow users to navigate between pages, download files, or open external resources. Links are created using the <a> tag (anchor tag).

1. Basic Structure of a Link

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

Syntax:

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

Example:

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

In this example, clicking "Visit Example" will take the user to "".

2. Linking to Other Web Pages

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

Internal Link Example:

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

External Link Example:

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

3. Opening Links in a New Tab

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

Example:

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

4. Using Links with Email (mailto)

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

Syntax:

<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.

5. Creating Links to Phone Numbers

You can create links that allow users to call a phone number directly if they're using a mobile device or an app that supports calling.

Syntax:

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

Example:

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

6. Downloadable Links

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

Syntax:

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

Example:

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

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

7. Linking to a Specific Section of a Web Page (Anchor Links)

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:

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

Then create a link to that section:

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

Example of Linking to a Section on Another Page:

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

8. Styling Links

By default, links are blue and underlined, 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:

<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>

9. Complete Example of Links in 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.

Keywords

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

PreviousText Formatting Tags NextAdding Images to a Webpage

Last updated 2 months ago

<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>

<!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>