Lesson 04 · First page

Links and URLs

Links are what make the web a web. A link is an a element, and its href attribute holds a URL: an address with a scheme, a host and a path. Click a link in a three-link page and follow the URL up to the address bar, out to the server and back as a new page. Then meet the two shortcuts every page uses: relative URLs and fragments that jump within a page.

9 min8 steps5 questionsBeginner

Fig 4 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01In <a href="contact.html">Write to us</a>, which part does the reader click?

The content between the tags, Write to us, is the link text the browser draws and you click. href holds where the link goes; the tags themselves are never drawn.

02In https://example.com/menu.html, which part is the host?

https is the scheme (how to fetch it), example.com is the host (which computer to ask) and /menu.html is the path (which file on that computer).

03You are on https://example.com/index.html and click <a href="about.html">. Which page loads?

about.html is a relative URL. The browser keeps the scheme, host and folder of the current page's URL and swaps in the new file name.

04What happens when you click <a href="#beans">Our beans</a>?

A href that starts with # is a fragment: a spot on the current page. The browser finds the element with that id and scrolls to it, without asking any server.

05Which link text is best?

Good link text says where the link goes, even read on its own. Screen reader users often jump from link to link, and click here or here tells them nothing.

Key terms

Glossary

Link (hyperlink): Something you click to go to another page or place. In HTML it is an a element with an href.
a element: The anchor element, <a>…</a>. Its content is the clickable text; its href says where to go.
href: The attribute on an a element that holds the URL the link points to.
URL: Uniform Resource Locator: the address of a page or file, such as https://example.com/menu.html.
Scheme, host, path: The main parts of a URL: how to fetch it (https), which computer (example.com) and which file there (/menu.html).
Absolute URL: A full URL with a scheme and a host. It means the same thing on any page.
Relative URL: A shortened URL such as about.html. The browser fills in the missing parts from the current page's URL.
Fragment: The part of a URL after #. It names an element on the page by its id; the browser scrolls to it.

Fine print

Notes and sources

example.com is a name reserved for examples, so it never belongs to a real shop. Its menu.html and about.html pages are imagined here.
Before the request, the browser looks up example.com's numeric address (DNS), and with https it sets up encryption first. Other lessons show both.
The browser scrolls the heading to the top of the window when the page is long enough. The figure draws a long page; on a page that already fits, nothing needs to move.
The file on the card is real HTML. Saved as index.html, its links work; the menu and about pages only exist if you write them too.

Quiz Unlocks after the last step.