Jacob Paris

Your First Webpage - HTML for Absolute Beginners

Last updated February 11, 2022 by Jacob Paris

The web wouldn't be a web if you couldn't get from one page to another. We do that with links.

1<body>
2  <h1>Cheeto</h1>
3
4  <img
5    src="https://placekitten.com/200/200"
6    alt="cat"
7  />
8
9  <p>
10    Cheeto is a
11    <a href="https://en.wikipedia.org/wiki/Cat">
12      cat
13    </a>
14  </p>
15</body>
16

Screenshot of website rendering above code, where text "Cheeto is a cat" has the word "cat" underlined and blue, while a tooltip suggests it's a link to the Wikipedia entry for Cat

The anchor tag

<a>
The anchor tag links content to somewhere else. That can be another part of the same page, a different page on the same website, a different website, an app, an email client, a phone number, or one of many more places.

If you've ever clicked an email address link and then had to wait a minute while your computer finished loading your email client so you could then close the email client, copy the address, and manually navigate to Gmail to paste it into the to field, you have witnessed an anchor tag linking to mailto:email@example.com.

Websites are often written by developers who will never use them and paid for by executives who won't either, and only this fact explains why anyone could think a mailto link is a good idea.

You set the destination for your link with the href attribute, and the content you're trying to make linkable goes between the <a> tags.

Image links

Links don't have to be just text. Images and other elements are perfectly valid children of <a> tags. Just as we made the text cat clickable in the last example, the same could be done with the image.

1<body>
2  <h1>Cheeto</h1>
3
4  <a href="https://en.wikipedia.org/wiki/Cat">
5    <img
6      src="https://placekitten.com/200/200"
7      alt="cat"
8    />
9  </a>
10
11  <p>Cheeto is a cat</p>
12</body>
13

Now, clicking on the image will take you to the Wikipedia page.

Opening links in new tabs

You can open a link in a specific tab by using the target attribute.

Leaving out the target attribute means a link will open in the current tab. That's usually a good thing, as it means the user can return using the back button.

If you don't have strong opinions on the matter, consider using new tabs for new websites. Links within your site should open in the current tab (with no target attribute) and links to external websites should open in new tabs (with a target attribute).

The target attribute specifies the name of the tab to open. Both of the links below have target="_blank", which means clicking one will open in a new tab.

<ul>
  <li>
    <a
      href="https://en.wikipedia.org/wiki/Cat"
      target="_blank"
      rel="noopener"
    >
      Cat
    </a>
  </li>
  <li>
    <a
      href="https://en.wikipedia.org/wiki/Dog"
      target="_blank"
      rel="noopener"
    >
      Dog
    </a>
  </li>
</ul>

You may have noticed the additional attribute rel="noopener". It's important for security to this on any link with a target. If you link to a site without it, that site can open the link from the other end to run arbitrary code on your site. This is an old vulnerability that has existed for a long time.

Even if you trust the site you're linking to, there's always the possibility someone malicious could compromise that site in the future, and then you're vulnerable too.

Internal links

Links with no protocol (the https:// bit) are relative links and are great for linking to different pages within your own website.

1<p>
2  You can
3  <a href="contact.html"> contact Cheeto here </a>
4</p>
5

If you try to follow that link it will look for a contact.html file in the same directory as your current webpage. Right now there isn't one, and the browser will waste no time telling you. Let's fix that.

Make a new file named contact.html and paste the following html.

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <title>Contact Cheeto</title>
5
6    <style>
7      html {
8        font-family: sans-serif;
9      }
10    </style>
11  </head>
12
13  <body>
14    <h1>Get in touch</h1>
15
16    <p>
17      There are several ways to contact Cheeto
18    </p>
19
20    <ol>
21      <li>Shouting his name</li>
22      <li>Shaking a bag of treats</li>
23      <li>Running an electric can opener</li>
24    </ol>
25
26    <p>
27      <a href="index.html"> Return to home </a>
28    </p>
29  </body>
30</html>
31

If you named the other html file something other than index.html, use that name instead in the Return to home link. You should be able to open this file and switch between the two pages by clicking the link.

Footnote for pedants: If calling this a "website" instead of a "webpage" was bothering you during the period in history where it was only one page, it is now two pages and you can go home.

Hash links

You can link to specific headings on a page by specifying the id of the heading after the # portion of the link.

Every heading on the articles on this site has an id attached, to make it easy for people to share links to specific sections.

1<h2 id="internal-links">Internal links</h2>
2
3<p>
4  You can link to
5  <a href="#internal-links">
6    specific headings on a page
7  </a>
8  by specifying the `id` of the heading after the
9  `#` portion of the link.
10</p>
11

Page 4 Page 6