HTML Links and the Anchor Element

HTML links let users move between webpages, open files, jump to a section of the current page, or start actions such as sending an email. A clickable link is created with the HTML anchor element <a>. Its href attribute specifies the destination.

</>
Copy
<a href="destination-url">Link text</a>

The content between the opening and closing anchor tags is called the link text or anchor text. Users select this text to visit the destination specified by href.

Create a Basic HTML Hyperlink

The following example creates an external link that takes the user to another website.

index.html

</>
Copy
<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
  <a href="https://www.tutorialkart.com">TutorialKart</a>
  
</body>
</html>

In this example, https://www.tutorialkart.com is the destination URL. TutorialKart is the anchor text displayed on the page. When the link is activated, the browser loads the URL supplied in the href attribute.

Link to Another HTML Page in the Same Folder

Use a relative URL when the destination file belongs to the same website. If index.html and about.html are stored in the same folder, the link can refer directly to the filename.

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

Relative URLs make it easier to move a website between domains or development environments because the domain name is not included in each internal link.

Relative Paths for Parent Folders and Subfolders

  • contact.html links to a file in the current folder.
  • pages/contact.html links to a file inside the pages subfolder.
  • ../index.html moves up one folder before locating index.html.
  • /products/index.html starts from the root of the current website.

Absolute URLs and Relative URLs in HTML Links

An absolute URL includes the complete address, such as the protocol and domain. A relative URL describes a destination in relation to the current document.

URL typeExampleCommon use
Absolute URLhttps://example.com/guides/html.htmlLinking to another website
Relative URLguides/html.htmlLinking to a page within the same website
Root-relative URL/guides/html.htmlLinking from the website root

Open an HTML Link in a New Tab

By default, a link opens in the current browser tab. Add target="_blank" when the destination should open in a new tab or window.

example.html

</>
Copy
<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
  <a href="https://www.tutorialkart.com" target="_blank">TutorialKart</a>
  
</body>
</html>

target="_blank" tells the browser to load the destination in a new browsing context, which is usually a new tab.

For links that open a new tab, add rel="noopener noreferrer". The noopener value prevents the opened page from accessing the original page through window.opener. The noreferrer value also prevents the browser from sending referrer information.

</>
Copy
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open Example in a new tab
</a>

Create an HTML Anchor Link to a Page Section

A fragment link, sometimes called an anchor link or jump link, moves the user to an element with a matching id. Prefix the target ID with # in the link’s href.

</>
Copy
<a href="#contact-details">Go to contact details</a>

<h2 id="contact-details">Contact Details</h2>
<p>Email and phone information appears here.</p>

The value after # must match the destination element’s id exactly. IDs should be unique within the page.

You can also link directly to a section on another page by combining a URL and a fragment identifier.

</>
Copy
<a href="help.html#payments">Read about payments</a>

Create Email and Telephone Links in HTML

The mailto: scheme can open the user’s configured email application, while tel: can start a telephone action on supported devices.

</>
Copy
<a href="mailto:support@example.com">Email Support</a>
<a href="tel:+15551234567">Call Support</a>

A mailto: URL can include optional fields such as a subject. Values containing spaces or special characters should be URL-encoded.

</>
Copy
<a href="mailto:support@example.com?subject=Account%20Question">
  Ask about an account
</a>

Use an Image as an HTML Link

An anchor element can contain an image instead of text. Place the <img> element between the opening and closing anchor tags.

</>
Copy
<a href="index.html">
  <img src="images/home-icon.png" alt="Go to the home page">
</a>

The image’s alt text should describe the link’s purpose rather than only describing its appearance.

Link to a File with the Download Attribute

The download attribute suggests that the browser download the linked resource instead of navigating to it. Browser behavior can depend on the resource location, response headers, and security restrictions.

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

You can provide a suggested filename as the attribute value.

</>
Copy
<a href="files/report.pdf" download="monthly-report.pdf">
  Download the monthly report
</a>

HTML Anchor Tag Attributes

AttributePurposeExample value
hrefSpecifies the link destinationabout.html
targetChooses where to open the destination_blank
relDescribes the relationship with the destination and can apply security or privacy behaviornoopener noreferrer
downloadSuggests downloading the linked resourceguide.pdf
hreflangIndicates the language of the linked resourceen
typeProvides the linked resource’s MIME type as a hintapplication/pdf
referrerpolicyControls referrer information sent with the requestno-referrer

HTML <a> Element Versus <link> Element

The <a> and <link> elements serve different purposes.

  • <a> creates a hyperlink that users can activate in the page content.
  • <link> describes a relationship between the HTML document and an external resource, such as a stylesheet or site icon. It is normally placed inside <head> and does not create clickable page content.
</>
Copy
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a href="about.html">About Us</a>
</body>

Default Browser Style of an HTML Anchor Tag

Browsers apply built-in styles to links so that they can be distinguished from surrounding text. The exact appearance can vary by browser, operating system, user settings, and link state.

Following is the default CSS of HTML <a> element.

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

color: -webkit-link represents a browser-defined link color, which is commonly displayed as blue for an unvisited link.

cursor: pointer displays a pointer when the mouse is placed over the link.

text-decoration: underline draws an underline beneath the anchor text.

Style HTML Link States with CSS

CSS pseudo-classes can style links according to their current state. The commonly used states are :link, :visited, :hover, and :focus-visible.

</>
Copy
a:link {
  color: #005fcc;
}

a:visited {
  color: #5c2d91;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

Do not remove the visible keyboard focus indicator unless you replace it with another clear focus style. Keyboard users need this indicator to identify the currently selected link.

Style an HTML Link to Look Like a Button

You can style an HTML link to look like a button or box. Use a link for navigation to another location. Use a <button> element instead when the control performs an action on the current page, such as submitting a form or opening a menu.

example.html

</>
Copy
<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      background: green;
      color: white;
      text-decoration:none;
      padding:10px;
    }
  </style>
</head>
<body>
 
  <a href="https://www.tutorialkart.com">TutorialKart</a>
  
</body>
</html>

For a more complete link-button style, provide sufficient contrast and visible hover and keyboard-focus states.

</>
Copy
<a class="button-link" href="pricing.html">View Pricing</a>
</>
Copy
.button-link {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  background-color: #176b34;
  color: white;
  text-decoration: none;
}

.button-link:hover {
  text-decoration: underline;
}

.button-link:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

Write Accessible HTML Link Text

Link text should identify the destination or purpose without relying entirely on nearby text. Descriptive links are easier to scan and more useful to people using assistive technologies.

</>
Copy
<!-- Less descriptive -->
<a href="shipping.html">Click here</a>

<!-- More descriptive -->
<a href="shipping.html">Read the shipping policy</a>
  • Describe the destination rather than using repeated phrases such as “click here.”
  • Indicate when a link opens a file, such as a PDF, when that information helps users decide whether to open it.
  • Tell users when a link opens a new tab when that behavior may be unexpected.
  • Do not distinguish links by color alone. An underline or another visible indicator helps users recognize them.
  • Keep the visible focus style available for keyboard navigation.

Common HTML Link Problems and Fixes

ProblemLikely causeFix
The link does not open the expected pageThe URL or relative path is incorrectCheck filenames, folder names, capitalization, and the number of ../ path segments
A same-page anchor does not move to the sectionThe fragment does not match an element IDMake the href="#value" value match the destination’s id="value"
The browser treats text as a link incorrectlyThe closing </a> tag is missing or misplacedClose the anchor immediately after the intended link content
A new-tab link creates a security concerntarget="_blank" is used without an appropriate rel valueAdd rel="noopener noreferrer"
The link is difficult to use with a keyboardThe focus outline was removedRestore the default outline or provide a clear :focus-visible style

HTML Link Editorial QA Checklist

  • Confirm that every href points to the intended page, file, email address, telephone number, or fragment.
  • Test relative links from the actual folder in which the HTML document will be stored.
  • Verify that fragment identifiers match unique element IDs exactly.
  • Add rel="noopener noreferrer" to new-tab links when appropriate.
  • Check that link text remains meaningful when read without the surrounding paragraph.
  • Test hover and keyboard-focus states and verify that links are not identified by color alone.
  • Use an anchor for navigation and a button for actions performed on the current page.

HTML Links FAQs

What are HTML links?

HTML links are references that users can activate to navigate to another webpage, file, page section, or supported URL scheme. They are normally created with the <a> element and its href attribute.

How do you create a hyperlink in HTML?

Place the destination in the anchor element’s href attribute and put descriptive link text between the opening and closing tags: <a href="about.html">About Us</a>.

How do you link to another HTML page in the same folder?

Use the destination filename as a relative URL. For example, <a href="contact.html">Contact</a> links to contact.html when both files are in the same folder.

How do you open an HTML link in a new tab?

Add target="_blank" to the anchor element. For external destinations, commonly pair it with rel="noopener noreferrer".

What is the difference between <a> and <link> in HTML?

The <a> element creates a hyperlink that users can activate in the document body. The <link> element declares a relationship between the document and an external resource, such as a CSS file, and is generally placed inside the document’s <head>.

Summary of HTML Anchor Links

HTML hyperlinks are created with the <a> element. The href attribute can contain an absolute URL, relative path, fragment identifier, email address, telephone number, or supported resource URL. Use descriptive anchor text, validate each destination, preserve keyboard focus styles, and apply new-tab behavior only when it serves a clear purpose.

Continue with this HTML Tutorial to learn about other HTML elements and page-structure concepts.