HTML Links

Links let visitors move from one page to another with a single click.

Link Syntax

A link is made with the <a> (anchor) tag. The href attribute holds the address, and the content is the clickable text.

Example

html

<a href="url">link text</a>

Example

html

<!DOCTYPE html>
<html>
<body>

<p>Learn more on the <a href="https://www.workownix.com">Workownix website</a>.</p>

</body>
</html>

Try it Yourself »

By default, links are blue and underlined. A visited link turns purple. You can change this with CSS.

Absolute and Relative URLs

Type	Example	When to use
Absolute	`https://www.example.com/about.html`	Linking to another website
Relative	`about.html`	A page in the same folder of your site
Relative	`courses/html.html`	A page inside a sub-folder
Relative	`/contact.html`	A page from the root of your site

Example

html

<a href="https://www.wikipedia.org">Wikipedia</a>
<a href="about.html">About us</a>
<a href="courses/web.html">Web course</a>

Opening a Link in a New Tab

The target attribute decides where the link opens. _blank opens it in a new tab.

Example

html

<!DOCTYPE html>
<html>
<body>

<a href="https://www.wikipedia.org" target="_blank">Open Wikipedia in a new tab</a>

</body>
</html>

Try it Yourself »

Use target="_blank" mainly for links to other websites, so visitors do not lose your page. Do not open every link in a new tab; it annoys people.

Email and Phone Links

mailto: opens the visitor's email app. tel: lets a phone call the number with one tap.

Example

html

<!DOCTYPE html>
<html>
<body>

<p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
<p>Call: <a href="tel:+922100000000">+92 21 0000 0000</a></p>

</body>
</html>

Try it Yourself »

Jumping to a Section of the Page

Give an element an id, then link to it with # and that id. This is called a bookmark.

Example

html

<!DOCTYPE html>
<html>
<body>

<p><a href="#fees">Jump to Fees</a></p>

<h2>About the Course</h2>
<p>A three month course for beginners.</p>
<p style="height:600px;">(Lots of other content here.)</p>

<h2 id="fees">Fees</h2>
<p>Please contact the office for the fee details.</p>

</body>
</html>

Try it Yourself »

The title Attribute on Links

title adds a tooltip that explains where a link goes.

Example

html

<a href="timetable.html" title="Class times for the summer batch">Timetable</a>

Write Good Link Text

Bad	Good
Click here	Read the admission rules
More	See all web courses

Clear link text helps every visitor, screen reader users and Google understand where a link leads.

Exercise

Which attribute makes a link open in a new browser tab?

href="_blank"target="_blank"new="tab"open="new"