Complete HTML Course Module 3: Beginner: Links and Images

How to Create Links in HTML

  • Beginner
  • Lesson 3.1
  • 4 min read
  • 14 of 69 in the course

In short

HTML links connect your pages to each other and to the rest of the web. Learn how to create links with the <a> tag and href, write good link text, and link to sections, email, phones and downloads. How to create a link with the a tag and href A link is made with the <a> element.

HTML links connect your pages to each other and to the rest of the web. Learn how to create links with the <a> tag and href, write good link text, and link to sections, email, phones and downloads.

A link is made with the <a> element. The "a" stands for anchor. The href attribute (short for "hypertext reference") says where the link goes. The text between the tags is what people click.

<p>Read the full guide on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN Web Docs</a>.</p>
<p>See our <a href="menu.html">full menu</a> or go back to the <a href="index.html">home page</a>.</p>

In the browser, "MDN Web Docs", "full menu" and "home page" appear underlined and usually blue. Clicking the first one opens the MDN website. The other two open files called menu.html and index.html in the same folder as your page. You will learn more about these paths in the next lesson.

How to write good link text

Link text is the clickable words. Good link text tells people where the link goes before they click.

  • Bad: "To see our menu, click here."
  • Good: "See our full lunch menu."

Why does this matter? Many screen reader users ask for a list of all the links on a page. A list that says "click here, click here, read more" is useless. Search engines also use link text to understand what the target page is about.

Tip: Read your link text on its own, without the sentence around it. If it still makes sense, it is good link text.

The target="_blank" attribute opens the link in a new browser tab.

<p>Find us on <a href="https://maps.example.com/corner-cafe" target="_blank" rel="noopener">the map (opens in a new tab)</a>.</p>

Clicking the link opens the map in a new tab, and your page stays open in the old one. The rel="noopener" attribute is a safety setting. It stops the new page from controlling your page through JavaScript. Modern browsers now do this automatically for target="_blank", but adding it is still a good, clear habit.

Use new tabs only when there is a good reason, such as keeping a form open while someone reads help. Opening new tabs without warning can confuse people, so it is kind to say "(opens in a new tab)".

How to link to a section on the same page

You can link to a specific part of a page. First, give the target element an id attribute. An id is a unique name, used only once on the page. Then link to it with # plus the id.

<nav>
  <a href="#menu">Menu</a>
  <a href="#opening-hours">Opening hours</a>
  <a href="#contact">Contact</a>
</nav>

<h2 id="menu">Menu</h2>
<p>Coffee, tea, cakes and sandwiches.</p>

<h2 id="opening-hours">Opening hours</h2>
<p>Every day from 8 am to 6 pm.</p>

<h2 id="contact">Contact</h2>
<p>Call us or send an email.</p>

Clicking "Opening hours" jumps the page down to that heading. (If the page is short, you may not see much movement. Add more text to try it.) You can also link to a section on another page, like href="about.html#team".

Common mistake: Using spaces in an id, like id="opening hours". Use dashes instead: id="opening-hours". Also, ids are case-sensitive, so #Menu and #menu are different.

The href does not have to be a web address.

<p>Email us: <a href="mailto:hello@cornercafe.example">hello@cornercafe.example</a></p>
<p>Call us: <a href="tel:+441179460000">0117 946 0000</a></p>
<p><a href="files/menu-2026.pdf" download>Download our menu (PDF, 200 KB)</a></p>
  • mailto: opens the visitor's email program with your address already filled in.
  • tel: starts a phone call on mobile phones. Write the number with the country code and no spaces.
  • The download attribute tells the browser to save the file instead of opening it. It works for files on your own website.

Note: Telling people the file type and size, like "PDF, 200 KB", helps them decide whether to click, especially on mobile data.

Practice exercise

Make a small "Contact us" page. Add a list of three section links at the top, three sections with matching id values, an email link, a phone link and one link to an external website that opens in a new tab.

Hint: each href="#something" needs an element with id="something".

Frequently asked questions

Add target="_blank" to the <a> element, and also add rel="noopener" for safety. Tell users it opens a new tab.

The most common reasons are a typo in the file name, a wrong folder path, a missing https:// on an external link, or a missing closing quote in the href. Check the path carefully.

Yes. Put the <img> element inside the <a> element. You will see an example in the images lesson.

Key takeaways

  • Links use the <a> element, and href sets the destination.
  • Write link text that makes sense on its own; avoid "click here".
  • Use target="_blank" with rel="noopener" only when a new tab really helps.
  • Link to a section with href="#id" and a matching id on the target.
  • mailto:, tel: and download create email, phone and download links.