Links & Paths›Core· 40 min read

Links — Connecting the Web

The “HyperText” in HTML. Links are what turn separate pages into the World Wide Web.

What you will learn

Create links with the <a> tag and href attribute
Link to other websites, other pages, email and phone
Open links in a new tab safely

The anchor tag

A link uses the anchor tag <a> with the href attribute (you met attributes already) telling it where to go.

tag + href + clickable text

<a href="https://trainingatcodingclave.com">Visit CodingClave</a>

Live preview

The href holds the destination address; the words between <a> and </a> (“Visit CodingClave”) are the clickable text the visitor sees and clicks. Click it and the browser goes to the address in href.

Note: Output: Visit CodingClave (shown as an underlined, usually blue, clickable link)

The four kinds of link

Goal	href value
Another website	`href="https://google.com"`
Another page in your site	`href="about.html"`
Send an email	`href="mailto:hello@codingclave.com"`
Make a phone call	`href="tel:+919876543210"`

Four different links

<p><a href="https://trainingatcodingclave.com">Our website</a></p>
<p><a href="about.html">About us page</a></p>
<p><a href="mailto:hello@codingclave.com">Email us</a></p>
<p><a href="tel:+919876543210">Call us</a></p>

Live preview

Same <a> tag every time — only the href changes to pick the destination. A full https:// address goes to another website; about.html opens another page in your own site; mailto: opens the visitor’s email app; and tel: starts a phone call on a mobile. The clickable text is up to you.

Note: Output: Four clickable links stacked on their own lines: Our website, About us page, Email us, Call us.

Open in a new tab

Add target="_blank" to open a link in a new tab. Also add rel="noopener" for security.

target="_blank" opens a new tab

<a href="https://google.com" target="_blank" rel="noopener">Open Google in a new tab</a>

Live preview

This is a normal link plus two extras: target="_blank" tells the browser to open the page in a new tab (so your site stays open behind it), and rel="noopener" is a small security safeguard you should pair with it.

Watch out: For an external site you must include https://. Writing href="google.com" makes the browser look for a page called *google.com* inside your own site — and it breaks.

Q. Which attribute tells a link where to go?

Answer: The href attribute (hypertext reference) holds the destination of an <a> link.

✍️ Practice

Create a page with four links: a website, an email link, a phone link, and a link to a second page about.html.
Make the website link open in a new tab with target="_blank" rel="noopener".

🏠 Homework

Create index.html and about.html and link them to each other so you can click back and forth — your first multi-page website!