JavaScript Curriculum
Linking Things Together
easyThe Nexus portal needs navigation: links to the dashboard, the docs, and external tools like GitHub. You need to understand link anatomy before you can build any navigation system.
Linking Things Together
The <a> (anchor) element is arguably the most important element in HTML. It's what turns a collection of documents into a web — a network of interconnected pages. Every navigation bar, every button that takes you somewhere, every "read more" link is an anchor tag.
Anatomy of a Link
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>Rendered:
URL type detected
Absolute URL
Security: Without rel="noopener", the opened page can access your page's window object and redirect it (tab-jacking). Always add rel="noopener noreferrer" with target="_blank".
Absolute vs Relative URLs
When you set the href attribute, you have two choices for how you write the path:
/coffee/pages/menu.html./specials.htmlrelativePath resolution:
Start at the current file's location
/coffee/pages/menu.htmlWhen to use each:
| Use case | URL type | Example |
|---|---|---|
| Linking to another website | Absolute | https://github.com |
| Linking to your own pages | Relative | /about or ../contact |
| Linking within a page | Fragment | #section-id |
| Emailing | Mailto | mailto:hello@nexus.io |
The target Attribute
target tells the browser where to open the linked document:
target="_self"Default behaviour. Navigates in the same tab, replacing the current page. The user's browser history updates normally.
<a href="/page" target="_self">Link</a>What happens visually:
Security: noopener noreferrer
When you use target="_blank", the newly opened page gets access to the window.opener object — it can manipulate the original page with JavaScript. This is called a reverse tabnapping attack.
noreferrer also prevents the browser from sending the Referer header, which hides your page's URL from the destination site's analytics.
Challenge
Build a Nexus navigation snippet with three links: one absolute link to an external site opening in a new tab (with correct security attributes), one root-relative internal link, and one relative link to a sibling page — all with descriptive link text.
Linking Things Together
easyThe Nexus portal needs navigation: links to the dashboard, the docs, and external tools like GitHub. You need to understand link anatomy before you can build any navigation system.
Linking Things Together
The <a> (anchor) element is arguably the most important element in HTML. It's what turns a collection of documents into a web — a network of interconnected pages. Every navigation bar, every button that takes you somewhere, every "read more" link is an anchor tag.
Anatomy of a Link
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>Rendered:
URL type detected
Absolute URL
Security: Without rel="noopener", the opened page can access your page's window object and redirect it (tab-jacking). Always add rel="noopener noreferrer" with target="_blank".
Absolute vs Relative URLs
When you set the href attribute, you have two choices for how you write the path:
/coffee/pages/menu.html./specials.htmlrelativePath resolution:
Start at the current file's location
/coffee/pages/menu.htmlWhen to use each:
| Use case | URL type | Example |
|---|---|---|
| Linking to another website | Absolute | https://github.com |
| Linking to your own pages | Relative | /about or ../contact |
| Linking within a page | Fragment | #section-id |
| Emailing | Mailto | mailto:hello@nexus.io |
The target Attribute
target tells the browser where to open the linked document:
target="_self"Default behaviour. Navigates in the same tab, replacing the current page. The user's browser history updates normally.
<a href="/page" target="_self">Link</a>What happens visually:
Security: noopener noreferrer
When you use target="_blank", the newly opened page gets access to the window.opener object — it can manipulate the original page with JavaScript. This is called a reverse tabnapping attack.
noreferrer also prevents the browser from sending the Referer header, which hides your page's URL from the destination site's analytics.
Challenge
Build a Nexus navigation snippet with three links: one absolute link to an external site opening in a new tab (with correct security attributes), one root-relative internal link, and one relative link to a sibling page — all with descriptive link text.