Module 3: Links and Media · Lesson 1 of 8
HTML Links: How to Create a Hyperlink with the a Tag
All lessons in Module 3
Goal: Make links with the a element, and give them link text that makes sense.
Quick review
Two questions from earlier modules to keep them fresh.
Learn
Links are what make the web a web. A link is an anchor element, <a> (see its definition in the HTML standard (opens in a new tab)), and its href attribute holds the address, the URL, it points to:
<a href="https://www.wikipedia.org">Wikipedia</a>
People click the text between the tags, so that text should name the destination. Screen reader users often pull up a list of all the links on a page to navigate, and ten links called "click here" tell them nothing. Compare "Check the bus timetable" with "For the bus timetable, click here".
A link is inline: it sits inside a paragraph or list item like any other word. In the preview, clicking a link shows where it would go instead of leaving the page. Which address to write in href is the topic of Relative and Absolute Paths.
The short version
- A link is an
<a>element. Itshrefattribute holds the URL it points to. - The text between
<a>and</a>is what people click, so it should describe the destination. - Avoid "click here". Screen reader users often browse a list of links, and there each link text has to make sense on its own.
- Addresses of other websites start with
https://.
Example
<p>I learned HTML with help from <a href="https://developer.mozilla.org">MDN Web Docs</a>.</p>
<p>Check the <a href="https://www.timeanddate.com">time in other cities</a> before you call.</p>Your task
Turn this list of favorite sites into real links:
- Make the word
Wikipediaa link tohttps://www.wikipedia.org. - The second paragraph says "click here". Rewrite it so the link text is
YouTube, linking tohttps://www.youtube.com. - Add a third paragraph with a link to any site you like, using descriptive link text.
- Use full addresses that start with
https://.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<a href="www.wikipedia.org">Wikipedia</a>Right
<a href="https://www.wikipedia.org">Wikipedia</a>Without https:// the browser treats the address as a file in your own folder and the link breaks.
Wrong
<p>Timetable: <a href="https://www.example.com/bus/times">https://www.example.com/bus/times</a></p>Right
<p>Check the <a href="https://www.example.com/bus/times">bus timetable</a>.</p>A raw URL is hard to read and screen readers spell it out piece by piece. A few descriptive words work better.
Go deeper
Links and buttons look similar but do different jobs. A link takes you somewhere: another page, a file or a spot on the page. A button does something: submits a form, opens a menu. Use <a href> for navigation and <button> for actions, and keyboard and screen reader users get the behavior they expect for free. An <a> without href is no link at all. The Tab key can't even reach it. Keyboard and Focus covers this in more depth.
Browsers style links blue and underlined, and visited links purple. You can change the colors with CSS, but keep links easy to recognize, ideally still underlined inside running text.
Links are also how search engines find pages: their crawlers follow every href they meet. The link text, called anchor text, tells them what the target page is about. Google's link best practices (opens in a new tab) warn against "click here" for that reason too. For paid links or links in user comments, add rel="sponsored" or rel="ugc" so search engines know not to treat them as recommendations.
Press Tab on any page to jump from link to link. If you can't tell where each one goes, your visitors can't either.
Frequently asked questions
How do I make a link in HTML?
Wrap the clickable words in an <a> element and put the address in its href attribute: <a href="https://www.wikipedia.org">Wikipedia</a>. Use the full address, including https://, for other websites. The link sits inside a paragraph or list item like any other word.
How do I link to an email address or phone number in HTML?
Use a special address scheme in href. <a href="mailto:[email protected]">Email us</a> opens the visitor's email program (the mailto scheme (opens in a new tab) is defined in RFC 6068), and <a href="tel:+15551234567">Call us</a> starts a call on phones. Write phone numbers in tel: links in international format, without spaces. Some visitors have no email program set up, so it helps to show the address itself as the link text.
How do I make an image a link in HTML?
Put the <img> inside the <a>: <a href="https://example.com"><img src="logo.svg" alt="Example home page"></a>. Because the image is the only content, its alt text becomes the link text. Describe where the link goes, because that's what the visitor needs. For a site logo that leads to the home page, alt text such as Home or the site name is enough.
