Learn HTML and CSS: Links

Links

Every day, tourists ask Maggie the same things: which flavours are there, and how do I get here by train? With links, they find the answers themselves.

The a element

You make a link with <a>, short for "anchor". The text between the tags is what the visitor clicks on.

Where the link goes is in the attribute href: an extra bit of information in the opening tag. An attribute has a name, an = and a value in quotes: <a href="flavours.html">our flavours</a>.

Visitors don't see the address, only the underlined text. So choose text that says where they'll end up, not "click here".

index.html

1<main>2  <p>Wondering what's in the display case today? Have a look at <a href="flavours.html">our flavours</a>.</p>3</main>

ijssalon.example

Absolute and relative

An absolute link is a full address, with https:// in front: https://en.wikipedia.org/wiki/Brighton. It works from anywhere, including to another website.

A relative link is a path from the page you're on: flavours.html is a file in the same folder. Ideal for your own site: if the site moves to another address, the links still work.

Forget https:// on another website's address, and the browser thinks it's a file on your own site.

index.html

1<main>2  <h2>Explore</h2>3  <p><a href="flavours.html">Our flavours</a></p>4  <p><a href="contact.html">Contact</a></p>5  <p><a href="https://en.wikipedia.org/wiki/Brighton">All about Brighton</a></p>6</main>

ijssalon.example

Try it yourself

Make Our flavours a link to flavours.html on Maggie's own site, and All about Brighton a link to https://en.wikipedia.org/wiki/Brighton.

1<main>2  <h2>Want to know more?</h2>3  <p>Our flavours</p>4  <p>All about Brighton</p>5</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

The a element

You make a link with <a>, short for "anchor". The text between the tags is what the visitor clicks on.

Where the link goes is in the attribute href: an extra bit of information in the opening tag. An attribute has a name, an = and a value in quotes: <a href="flavours.html">our flavours</a>.

Visitors don't see the address, only the underlined text. So choose text that says where they'll end up, not "click here".

index.html

1<main>2  <p>Wondering what's in the display case today? Have a look at <a href="flavours.html">our flavours</a>.</p>3</main>

ijssalon.example

Absolute and relative

An absolute link is a full address, with https:// in front: https://en.wikipedia.org/wiki/Brighton. It works from anywhere, including to another website.

A relative link is a path from the page you're on: flavours.html is a file in the same folder. Ideal for your own site: if the site moves to another address, the links still work.

Forget https:// on another website's address, and the browser thinks it's a file on your own site.

index.html

1<main>2  <h2>Explore</h2>3  <p><a href="flavours.html">Our flavours</a></p>4  <p><a href="contact.html">Contact</a></p>5  <p><a href="https://en.wikipedia.org/wiki/Brighton">All about Brighton</a></p>6</main>

ijssalon.example

Try it yourself

Make Our flavours a link to flavours.html on Maggie's own site, and All about Brighton a link to https://en.wikipedia.org/wiki/Brighton.

1<main>2  <h2>Want to know more?</h2>3  <p>Our flavours</p>4  <p>All about Brighton</p>5</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example