BeingXpert Learn & Build Future

8. HTML Links

What you will learn

  • How to create a link with <a>
  • The difference between absolute and relative links
  • How to open links in a new tab safely
  • How to link to a section of a page and to an email address

The anchor element

Links are what make the web a web. You create one with the <a> (anchor) element and its href attribute.

Syntax

<a href="address">link text</a>

Example

<a href="https://www.wikipedia.org/">Visit Wikipedia</a>

Output

The text between the tags is what visitors click. Browsers usually show unvisited links in blue and underlined.

Absolute and relative links

  • An absolute link contains the full web address, including https://. Use it for other websites.
  • A relative link points to a file on your own site, based on where the current file is. Use it for your own pages.

Example

<!-- Absolute: another website -->
<a href="https://example.com/">Example</a>

<!-- Relative: a file in the same folder -->
<a href="about.html">About us</a>

<!-- Relative: a file in a sub-folder -->
<a href="pages/contact.html">Contact</a>

Opening a link in a new tab

The target="_blank" attribute opens the link in a new tab. Add rel="noopener noreferrer" when you link to another website. This keeps the new tab from gaining access to your page.

Example

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

Use new tabs sparingly. Many people prefer to choose for themselves. If you open a new tab, tell visitors in the link text, for example “(opens in a new tab)”.

Linking to a section of a page

You can jump to a specific spot on a page in two steps.

  1. Give the target element an id.
  2. Link to that id with a # in front.

Example

<a href="#faq">Jump to the FAQ</a>

<!-- ...a lot of content... -->

<h2 id="faq">Frequently Asked Questions</h2>

You can also link to a section of another page: href="guide.html#faq".

Email links

A mailto: link opens the visitor’s email program with your address already filled in.

Example

<a href="mailto:hello@example.com">Email us</a>

Output

Writing good link text

  • Describe where the link goes: Read the HTML guide, not Click here.
  • Screen reader users often browse a list of links, so each one should make sense on its own.

Common mistakes

  • Forgetting https:// on an outside link. Without it the browser treats the address as a file on your own site.
  • Misspelling a file name, or using the wrong capital letters. Many servers treat About.html and about.html as different files.
  • Using target="_blank" without rel="noopener noreferrer" on external links.
  • Using vague link text such as “click here”.

Exercise

Write a link with the text Learn more that goes to https://example.com and opens in a new tab safely.

Show solution 
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Learn more</a>

Knowledge check

1. Which element creates a link?

<a>

2. Which attribute holds the link address?

href

3. Which symbol begins a link to a section on the same page?

#

Summary

  • Links use <a href="...">.
  • Use absolute links for other sites and relative links for your own files.
  • target="_blank" opens a new tab, and rel="noopener noreferrer" keeps it safe.
  • Use #id for page sections and mailto: for email.

Next lesson: HTML Images.

Scroll to Top