Module 3: Links and Media · Lesson 3 of 8
Open Links in a New Tab and Jump Links in HTML
All lessons in Module 3
Goal: Link to a spot on the same page, and open links in a new tab.
Learn
An anchor can do two more things.
The first is a page jump. Give any element an id attribute: a name that, by the rules of the HTML standard (opens in a new tab), must be unique on the page. A link whose href is # plus that id scrolls straight to it, like a table of contents:
<a href="#prices">See prices</a> <h2 id="prices">Prices</h2>
The id and the href must match exactly, including upper and lower case. An id can't contain spaces.
The second is opening a new tab, which target="_blank" does. Use it sparingly, for example for an outside source someone wants to check while reading, because unexpected tabs confuse many people. It's polite to say so in the link text: "(opens in a new tab)".
The short version
- Give the destination element a unique
idand link to it withhref="#that-id". - The id and the href must match exactly, including letter case, and an id cannot contain spaces.
target="_blank"opens a link in a new tab.- Use new tabs sparingly and say so in the link text, for example "(opens in a new tab)".
Example
<p><a href="#faq">Jump to the FAQ</a></p>
<p>Lots of text here...</p>
<h2 id="faq">FAQ</h2>
<p>Read the <a href="https://www.w3.org/" target="_blank">W3C website (opens in a new tab)</a>.</p>Your task
Make this space facts page easier to use:
- Give the Moon heading
id="moon"and the Mars headingid="mars". - Turn the two items under
Jump tointo links to#moonand#mars. - Make
NASAa link tohttps://www.nasa.govthat opens in a new tab.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<h2 id="feeding">Feeding cats</h2>
<h2 id="feeding">Feeding dogs</h2>Right
<h2 id="feeding-cats">Feeding cats</h2>
<h2 id="feeding-dogs">Feeding dogs</h2>An id must be unique on the page. With duplicates, every #feeding link jumps to the first one.
Wrong
<a href="https://www.nasa.gov" target="blank">NASA</a>Right
<a href="https://www.nasa.gov" target="_blank">NASA</a>Without the underscore, blank is an ordinary tab name. The first click opens a new tab, and later links with the same target reuse it.
Go deeper
A page jump changes the address in the browser to end with the fragment (opens in a new tab), like space.html#mars. That address can be bookmarked and shared, and the Back button returns to where the reader was. Jump links suit long guides and FAQs for exactly those reasons. Search engines sometimes show such section links directly under a result.
One of the most useful jump links is invisible to most visitors: a "Skip to main content" link at the very top of the page, pointing to #main. Keyboard and screen reader users can jump past a long menu with one key press. It's the classic way to meet the WCAG rule Bypass Blocks (opens in a new tab). CSS can hide it until it receives keyboard focus.
Two CSS tricks pair well with jump links: html{scroll-behavior:smooth} makes the jump glide instead of snap, and scroll-margin-top on the target stops a fixed header from covering the heading you jumped to.
Browsers once let a page opened with target="_blank" redirect the original tab, and phishers used the trick. Older tutorials insist on rel="noopener" for that reason. Current browsers apply it by default.
Frequently asked questions
How do I open a link in a new tab in HTML?
Add target="_blank" to the link: <a href="https://www.nasa.gov" target="_blank">NASA (opens in a new tab)</a>. Modern browsers automatically stop the new page from controlling the original one. You may still see rel="noopener" added in older code. It's harmless and protects very old browsers.
How do I link to a specific section of a page?
Give the section's heading an id, like <h2 id="prices">, and link to it with a hash: <a href="#prices">. To jump to that section from another page, put the hash after the page address, written as a normal relative path: <a href="menu.html#prices">. The id must match exactly, including letter case.
Should links open in a new tab?
Usually not. Visitors can open any link in a new tab themselves, and unexpected tabs break the Back button and disorient people, especially screen reader users and people on phones. A help page opened halfway through a form is a fair exception, since leaving the form would lose the visitor's work. When you do it, say so in the link text. The HTML accessibility checklist lists more link habits like this.