H3 - Creating Links

01 - The anchor tag

You create a link with the <a> tag.
The letter a stands for anchor.
The href attribute tells the browser where the link goes.
The text between the tags is clickable.
Good link text clearly describes the destination.

<a href="https://www.example.com">Visit this website</a>

For SEO and accessibility, avoid vague text like “click here”. Use words that explain what the visitor will open.

Practice

Create or change a small example that matches this section.
Open the file in the browser and click or check whether the result does what you expect.

02 - Internal and external links

An internal link goes to another page on the same website.
An external link goes to another website.
Open internal navigation usually in the same tab.
Open external links in a new tab only when that is useful, and let the visitor stay in control.

<a href="contact.html">Contact</a>
<a href="https://www.w3.org" target="_blank" rel="noopener noreferrer">W3C</a>

Practice

Create or change a small example that matches this section.
Open the file in the browser and click or check whether the result does what you expect.

03 - Anchor attributes

href is the destination of the link.
target="_blank" opens the link in a new tab.
rel="noopener noreferrer" is recommended with target="_blank".

noopener prevents the new page from controlling the original page through JavaScript. noreferrer also prevents sending the original page address as referrer information.

Practice

Create or change a small example that matches this section.
Open the file in the browser and click or check whether the result does what you expect.

04 - Making images clickable

Place an <img> inside an <a> element.

<a href="gallery.html">
    <img src="gallery.webp" alt="Open the gallery">
</a>

Practice

Create or change a small example that matches this section.
Open the file in the browser and click or check whether the result does what you expect.

05 - Making email and phone clickable

Use mailto: for email and tel: for phone numbers.

<a href="mailto:info@example.com">Email us</a>
<a href="tel:+31201234567">Call us</a>

Practice

Create or change a small example that matches this section.
Open the file in the browser and click or check whether the result does what you expect.

06 - Link best practices

Use meaningful link text.
Keep internal navigation in the same tab most of the time.
Use target="_blank" mostly for external links, combined with rel="noopener noreferrer".
Do not make every word a link.
Check whether each link actually works.

Practice

Create or change a small example that matches this section.
Open the file in the browser and click or check whether the result does what you expect.

07 - Checking HTML with the W3C Validator

Links are easy to type incorrectly. Use the W3C Markup Validator to check whether your link tags and attributes are valid.

Practice

Create or change a small example that matches this section.
Open the file in the browser and click or check whether the result does what you expect.

08 - Assignment: link three pages together

Practice

Create index.html, news.html and contact.html.
Add the same navigation menu to each page.
Link the three pages to each other.
Add one external link that opens in a new tab.
Add one clickable email address on the contact page.

Quiz