HTML <a> Tag

❮ Previous Next ❯

Definition and Usage

The <a> tag creates a hyperlink that connects one webpage to another.

The key thing about the <a> element is its href attribute, It shows where the link goes.

By default, links will look the same way in all web browsers:

An unused web link is marked with a blue line and appears in blue color.
Visited or Clicked link looks purple and underlined.
An active link appears as a red, underlined text.

Tips and Notes

Tip: If the <a> tag doesn't have an href attribute, it's just a space holder for a hyperlink.

Tip: Usually, when you click on a link, the new page opens in the same web browser window you're using. However, you can make it open in a different place if you want.

Tip: Apply CSS for styling links : CSS Links and CSS Buttons.

Attributes

Attribute	Value	Description
download	filename	Specifies that the target will be downloaded when a user clicks on the hyperlink
href	URL	Specifies the URL of the page the link goes to
hreflang	language_code	Specifies the language of the linked document
media	media_query	Specifies what media/device the linked document is optimized for
ping	list_of_URLs	Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	Specifies which referrer information to send with the link
rel	alternate author bookmark external help license next nofollow noreferrer noopener prev search tag	Specifies the relationship between the current document and the linked document
target	_blank _parent _self _top	Specifies where to open the linked document
type	media_type	Specifies the media type of the linked document

Global Attributes

The <a> tag also supports the Global Attributes in HTML.

Event Attributes

The <a> tag also supports the Event Attributes in HTML.

More Examples

Default CSS Settings

Almost all web browsers will show the <a> element using these standard settings:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <a href="https://www.propertutorials.com">Visit propertutorials.com!</a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
<p>How to use an image as a link:</p>
    <a href="https://www.propertutorials.com">
      <img border="0" alt="propertutorials" src="https://propertutorials.com/assets/images/logo/files/web/png/ppt.png" width="300" height="100">
    </a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <p>How to make a link open in a new browser window:</p>
    <a href="https://www.propertutorials.com" target="_blank">Visit propertutorials.com!</a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <p>How to link to a JavaScript:</p>
    <a href="javascript:alert('Hello World!');">Execute JavaScript</a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
      a:link,
      a:visited {
        color: (internal value);
        text-decoration: underline;
        cursor: auto;
      }

      a:link:active,
      a:visited:active {
        color: (internal value);
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to My Page</h1>
    </header>
    <nav>
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </nav>
    <section>
      <h2>Main Content Section</h2>
      <p>This is a dummy content for the main section of the page. You can replace it with your actual content.</p>
      <p>Feel free to add more sections, paragraphs, or any other HTML elements as needed.</p>
    </section>
    <footer>
      <p>&copy; 2023 Your Website. All rights reserved.</p>
    </footer>
  </body>
</html>

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML Attributes

HTML Graphics

HTML APIs

HTML DOM

HTML Audio/Video

HTML 5 MathML