Links

The H in HTML stands for hypertext: text that links to other text. One element, a, makes every link on the web.

The anchor element

A link is made with the <a> element, short for anchor. Its href attribute holds the address to go to, and its content is the text people click. In <a href="https://developer.mozilla.org/">MDN Web Docs</a>, the words MDN Web Docs appear underlined, and activating them loads that address. Links work with a mouse, a finger, or the keyboard: press Tab to move from link to link and Enter to follow one. Without href, an <a> is only a placeholder and cannot be reached with Tab.

Absolute and relative addresses

An absolute URL contains everything: the scheme (https:), the domain and the path, for example https://example.com/menu/bread.html. Use it for links to other sites. A relative URL leaves out the parts that are the same as the current page. On a page at https://example.com/menu/index.html, the link bread.html means the file in the same folder, ../about.html means one folder up, and /contact.html starts from the root of the site. Relative links keep working when the whole site moves to a new domain.

<a href="https://www.w3.org/">W3C</a>          <!-- another site -->
<a href="bread.html">Bread</a>                <!-- same folder -->
<a href="../about.html">About us</a>          <!-- one folder up -->
<a href="#hours">Opening hours</a>           <!-- same page -->
<a href="mailto:hello@example.com">Email us</a>

<h2 id="hours">Opening hours</h2>

Links inside the same page

Give any element an id, and a link whose href is a hash followed by that id jumps straight to it. <a href="#hours"> scrolls to <h2 id="hours">. An id must be unique within the page and cannot contain spaces. Long articles use this for a table of contents, and many sites put a skip link at the very top (Skip to main content) so keyboard users do not have to Tab through the whole menu on every page.

Email, phone and downloads

Other schemes open other programs. mailto:hello@example.com opens a new email in the visitor's mail program, and tel:+82212345678 offers to call the number on a phone. Adding the download attribute to a link asks the browser to save the file instead of opening it. These links are convenient, but say what they do in the link text, because people do not expect a mail program to pop up.

New tabs and good link text

target="_blank" opens the link in a new tab. Use it sparingly: it takes control away from the visitor, and the Back button no longer brings them back. When you do use it, mention it in the link text, for example (opens in a new tab). Most important of all is the link text itself. Screen reader users often pull up a list of every link on a page, and a list of ten entries that all say click here or read more tells them nothing. Write text that makes sense out of context: Download the 2026 timetable, not click here.

Browsers underline links and colour them blue by default, and show visited links in purple. You can restyle links with CSS, but keep something other than colour alone, such as the underline, so that people who cannot tell the colours apart still see which words are links. When a link has keyboard focus, browsers draw a focus ring around it; never remove that ring without putting a clear replacement in its place.