HTML Links

Links are everywhere on the web. They let you jump from one page to another. When you hover over a link, your mouse cursor turns into a little hand. That is how you know something is clickable.

What Are HTML Links?

HTML links are called hyperlinks. You can click them and go to another page, another website, or even a different spot on the same page.

A link does not have to be text. It can be an image, a button, or any other HTML element.

HTML Links Syntax

The <a> tag defines a link. The “a” stands for anchor. Here is the basic format:

<a href="url">Link text goes here</a>

The href attribute is the most important part. It tells the browser where to go when someone clicks the link. Href stands for “hypertext reference”.

The text between the opening and closing <a> tags is what the user sees and clicks on.

By default, links look like this in every browser:

• An unvisited link is blue and underlined.
• A visited link is purple and underlined.
• An active link (while being clicked) is red and underlined.

You can change these colors with CSS later.

The target Attribute (Where to Open the Link)

By default, when you click a link, the new page opens in the same browser tab. This can be annoying if you want to keep your original page open.

The target attribute tells the browser where to open the link. Here are the most common values:

• _self – Opens in the same tab (this is the default, so you do not even need to write it)
• _blank – Opens in a new tab or window

For external websites (like Google or YouTube), always use target="_blank" so your own website stays open in the original tab. For links within your own site, _self is usually fine.

Absolute URLs vs. Relative URLs

There are two types of web addresses you can put in the href attribute.

Absolute URL – A full web address that includes “https://www”. This points to a page on another website.

Relative URL – A short address without the domain name. This points to a page within your own website.

The relative links in the example above will not work because those pages do not exist. But if you create an “about.html” file in the same folder, it would work perfectly.

Use an Image as a Link

You can turn any image into a clickable link. Just put the <img> tag inside the <a> tag.

Click the smiley face. It works just like a text link, but with an image instead.

Link to an Email Address

You can create a link that opens the user’s email program with a new message ready to send. Use mailto: inside the href attribute.

The first link just opens a blank email. The second one fills in the subject line and the body of the email automatically.

Button as a Link

To turn a button into a link, you need a tiny bit of JavaScript. Do not worry if this looks strange. You will learn JavaScript later.

Click the button. It works like a link but looks like a button. You can style buttons with CSS to make them look however you want.

Link Titles (Tooltips)

The title attribute adds a tooltip that appears when someone hovers over the link. This is great for giving extra information.

Quick Summary

• Use <a href="url"> to create a link.
• The text between the opening and closing <a> tags is what users click.
• Use target="_blank" to open links in a new tab.
• Absolute URLs are full web addresses (like https://google.com).
• Relative URLs are short addresses for pages within your own site (like about.html).
• Put an <img> inside an <a> to make an image clickable.
• Use mailto:email@example.com to create email links.
• Use the title attribute to add tooltips.

What Just Happened? Let Me Explain

• Links are what make the web work. Without links, every page would be isolated.
• Always use target="_blank" for external links so your site stays open.
• Relative URLs are better for linking within your own site because they still work if you change your domain name.
• Images, buttons, and even entire sections can be turned into links.
• Email links are great for “Contact Us” buttons.
• Tooltips help users understand where a link will take them.

HTML Link Reference

Here are the tags and attributes we covered in this chapter: