Skip to main content
WPFSharp Academy
Syllabus

HTML Links (Anchor Tags & Hyperlinks)

Badar KhalilUpdated September 27, 2026 2 min read
Share X Facebook LinkedIn WhatsApp

HTML links, created with the <a> (anchor) tag, are what make the web a "web" — they connect pages, sites, and resources together. Mastering hyperlinks is essential for navigation, SEO, and user experience.

Basic Anchor Tag Syntax

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

The href (hypertext reference) attribute specifies the destination URL. Without it, the tag is not a functional link.

Use target="_blank" to open a link in a new browser tab. Always pair it with rel="noopener noreferrer" for security — this prevents the new page from accessing the original page via window.opener, a well-known modern web security best practice:

Code
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Open in New Tab
</a>

Linking to Email & Phone Numbers

Code
<a href="mailto:hello@example.com">Email Us</a>
<a href="tel:+11234567890">Call Us</a>

Anchor Links (Jump Links / In-Page Navigation)

You can link directly to a specific section of the same page using an id and the # symbol — commonly used for table-of-contents navigation and "back to top" buttons:

Code
<a href="#pricing">Jump to Pricing</a>

...

<h2 id="pricing">Pricing</h2>

Links can point to external sites using an absolute URL (https://...) or to pages within your own site using a relative path (/about.html). We cover this fully in the HTML File Paths lesson.

Links have several states that can be styled with CSS pseudo-classes: :link (unvisited), :visited, :hover, and :active.

  • Use descriptive link text ("Read our pricing guide") instead of generic text like "click here" — this matters for both SEO and screen reader users.
  • Add rel="nofollow" to untrusted or sponsored outbound links so search engines don't pass ranking value.
  • Ensure links have visible focus states for keyboard navigation accessibility.
  • Avoid linking raw URLs directly; always wrap them in an <a> tag with clear text.

Key Takeaways

  • The href attribute defines a link's destination.
  • Use target="_blank" with rel="noopener noreferrer" for new-tab links.
  • mailto: and tel: create email and phone links.
  • Anchor links (#id) enable in-page navigation.
Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Exercise: Build a Navigation Menu with Anchor LinksHTML

Create a nav with three anchor links pointing to #about, #services, and #contact sections, then add three matching h2 headings with those ids further down the page.

Try it Yourself HTML
Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?