# Links to Other Sites The a element with an href attribute turns words into a link to any page on the web, and good link text tells people where the link goes before they follow it. Novice · HTML · Updated October 31, 2026 ## After this lesson you can - Write a link to another site with a and href, using an absolute URL and link text that makes sense on its own - Decide when a link should open in a new tab, and open one safely with target and rel ## Key takeaways - A link is an a element (a for anchor) with an href attribute that holds the address it goes to. - A link to another site uses an absolute URL, the whole address, starting with https://. - Link text should make sense on its own, such as "the band's tour dates", never "click here". - Open a new tab only when leaving the page would lose something, and say so in the link text. - target="_blank" opens a new tab, and rel="noopener" stops the new page from reaching back to yours. Links are what turn a pile of separate pages into the web. A fan page links to the band's official store, a class report links to its sources, and a portfolio links to the projects it shows off. Without links, every page would be a dead end. This lesson shows how to write a link to another site, what to put in its words, and when (rarely) to open it in a new tab. ## Hypertext: text you can follow A book can point you somewhere else with a footnote, but you still have to go and find the other book. A web page can take you there in one click. Text with links you can follow is called **hypertext**, the *HT* in HTML, and each link is a **hyperlink** (usually shortened to *link*). In HTML a link is the `` element, read "a", short for **anchor**: the link is anchored to the words inside it. Its `href` attribute (read "h-ref", for hypertext reference) holds the address it goes to: ```html the words people click ``` The words between the tags are the **link text**: what the reader sees, and clicks or taps. ## An absolute URL: the whole address A web page's address is its **URL** (read "U-R-L"), short for Uniform Resource Locator. To link to another site, you give its whole URL, starting with `https://`. A whole address like that is an **absolute URL**: like a full mailing address with the street, city and zip code, it works from anywhere. ```html

Tickets are on the band's tour page.

``` - `https://` says how to fetch the page: over HTTPS, the secure way browsers talk to websites. - `www.neonlanterns.example` is the site's name, its **domain**. - `/tour` is the page on that site, its **path**. The `.example` ending is set aside for examples like this one, so it never leads to a real site. On your own pages, copy a real address from your browser's address bar. Leave off `https://` and the link breaks: `href="www.neonlanterns.example"` makes the browser look for a file named `www.neonlanterns.example` in your own folder. The next lesson, *Links Between Your Own Pages*, shows why. ## Link text that makes sense on its own Screen reader users can bring up a list of every link on a page and jump straight to one. Sighted visitors skim the links too, because they stand out. A list that says *click here, click here, read more* tells nobody anything. Write link text that says where it goes, even when it's read on its own: ```html

To see the band's tour dates, click here.

See the band's tour dates.

``` The second one is shorter, too. Good link text names the place: *the band's tour dates*, *Paper Moon on Bandcamp*, *the venue's parking map*. ## Opening a new tab, safely The `target` attribute says where a link opens. `target="_blank"` (read "underscore blank") opens it in a new tab. Most of the time, don't. People expect a link to open in the same tab, with the **Back** button to return, and anyone who wants a new tab can open one themselves (Ctrl+click on Windows, Cmd+click on a Mac). A new tab fits when leaving the page would lose something, such as a half-filled order form with a link to the ticket rules. When you do it, say so in the link text, so nobody is surprised: ```html Ticket rules (opens in a new tab) ``` `rel` (for relationship) says how the other page relates to yours. `rel="noopener"` stops the new tab from reaching back to your page. Without it, in older browsers, a page opened this way could quietly swap your page for a fake one, such as a copy of your login page, while the visitor was looking at the new tab. To be honest: current browsers have treated every `target="_blank"` link as `noopener` since about 2021, so they're already safe. Writing it costs nothing, protects anyone on an older browser, and tells the next reader you thought about it. **Try it.** In your `neon-lanterns` folder, add a paragraph to `index.html` with a link to a real site for a band you like, using its full address from your browser's address bar. Give it link text that would make sense in a list of links on its own. Then add a second link that opens in a new tab safely, with link text that says so. ## Check yourself 2 questions to try on the lesson page. ## So what A link is only as good as its address and its words. An absolute URL that starts with `https://`, and link text that names the destination, make links that work and that everyone can use. ## Key terms - [Hyperlink](https://www.ask-codey.com/glossary/hyperlink) - [Anchor element](https://www.ask-codey.com/glossary/anchor-element) - [href](https://www.ask-codey.com/glossary/href) - [target attribute](https://www.ask-codey.com/glossary/target-attribute) - [\_blank target](https://www.ask-codey.com/glossary/blank-target) - [noopener](https://www.ask-codey.com/glossary/noopener) ## Cheat sheets - [Links to Other Sites](https://www.ask-codey.com/cheat-sheets/html-links-to-other-sites-cheat-sheet) ## Related - [Links Between Your Own Pages](https://www.ask-codey.com/lessons/html-links-between-your-own-pages) Source: https://www.ask-codey.com/lessons/html-links-to-other-sites