CafeMenuAbout ushttps://example.com/index.htmlhttps://example.com/menu.htmlhttps://example.com/about.htmlhttps://example.com/index.html#beansAbout usMenuOur beansOur beansMenuEspressoLatteAbout us1<!DOCTYPE html>2<title>Cafe</title>3<a href="about.html">About us</a>4<a href="https://example.com/menu.html">Menu</a>5<a href="#beans">Our beans</a>6<h2 id="beans">Our beans</h2><a href="about.html">opening tag + hrefAbout uscontent: you click it</a>closing taghttps://scheme: howexample.comhost: which computer/menu.htmlpath: which filehttps://example.com/borrowed from this pageabout.htmlthe href: relativehref="#beans"# = a fragmentid="beans"the element it jumps toMenugood: says whereclick herevague out of contextexample.commenu.htmlabout.html#beans
Front left: the HTML file with three links, and the part each step is about taken apartBack right: the browser (address bar and page); front right: the web server example.comMovers: a URL going up to the address bar, a request and a page travelling to and from the serverFront left: index.html, six lines of HTML with three links, and a strip that takes apart the part each step is about. Back right: a web browser with a tab, an address bar and a page. Front right: the web server example.com. Clicking Menu sends its URL up to the address bar; a request envelope travels to example.com and menu.html comes back and replaces the page. Clicking About us shows a relative URL being filled in from the page's own address. Clicking Our beans scrolls the same page to the heading with id="beans", with no request at all. 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 a element

  1. A link is an a element (a stands for anchor). Its href attribute holds the address to go to. The content between the tags, About us, is the text you click. Browsers draw links blue and underlined.

Following a link

Shorter hrefs

Good links

What happens

;; step 1/8 · anchor
line 3   <a href="about.html">About us</a>
<a           opening tag: a = anchor
href="…"     attribute: the address to go to
About us     content: the text you click
</a>         closing tag
drawn        About us   blue (#0000EE), underlined

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.