Links within pages

If we create another page of a website, we can link to it within our website using the <a href> </a> tags.


<a href="about_me.html">About me</a>

If the file ‘about_me.html’ is in another folder above the root, we need to provide that folder name.

<a href="/mysitepages/about_me.html">About me</a>

If we are providing a link to an external site, it’s good, when the person clicks on the link, for a new tab to open in the browser, so they don’t easily navigate away from your site, this is done using the target attribute.

<a href="" target="_blank">Google</a>

Instead of text for a link, we can use CSS to create a container which then becomes the actual link providing it’s in between the opening <a href> and the closing </a>


<!DOCTYPE html>
    <title>My website</title>
   <meta charset="UTF-8">
   <link href=",400,700" rel="stylesheet">
   <link rel="stylesheet" a href="browser-reset.css">
   <link rel="stylesheet" a href="style.css">
    <h1>I'm creating a link below</h1>
    <a href="" target="_blank">Google</a>
    <a href="" target="_blank">



H1 {
  font-family: 'Merriweather', serif;
  line-height: 50px;
  font-size: 20;
  font-weight: 400;

div {
  height: 100px;
  width: 100px;
  background-color: red;

Gives the page looking like:

Clicking on the text ‘Google’ opens a new tab and takes the user to the Google page. Clicking on the red box, which is now behaving exactly like a link, opens a new tab with the Bing website in it.

Leave a Reply