Links are what make the web a web — they connect pages to each other. The "HyperText" in HTML literally means linked text. In this lesson you will master the anchor element and build a simple navigation menu.
The anchor element
Links are created with the <code><a></code> (anchor) element. The destination goes in the <code>href</code> attribute, and the text between the tags is what the user clicks. Here is the anatomy of a link.
<a href="https://example.com">Visit site</a>- Opening tag
<a ...> - Attribute
href - Value
"https://example.com" - Content
Visit site - Closing tag
</a>
Internal vs external links
An external link points to another website, using a full URL starting with <code>https://</code>. An internal link points to another page on your own site, using a relative path like <code>about.html</code> or <code>/contact</code>. Relative paths keep your site working even if the domain changes.
| Link type | Example href | Use for |
|---|---|---|
| External | https://example.com | Other websites |
| Internal | about.html | Pages on your site |
| Anchor | #section-2 | A spot on the same page |
| mailto:hi@site.com | Opening an email |
Opening in a new tab, and email links
Add <code>target="_blank"</code> to open a link in a new tab — useful for external sites. When you do, also add <code>rel="noopener"</code> for security. An <code>href</code> starting with <code>mailto:</code> opens the user's email app.
Page anchors and building navigation
You can link to a specific spot on the same page: give an element an <code>id</code>, then link to <code>#that-id</code>. Navigation menus are just a set of links grouped together — here is a simple one.
Build a navigation bar in the editable box with four links: one external (to any site, opening in a new tab), and three internal page links. Give each clear, descriptive text.
1. Which element creates a link?
2. Where does the link destination go?
3. How do you open a link in a new tab?
4. What does href="#about" link to?
5. What is good link text?
- Links use the <a> element with the destination in href.
- External links use full URLs; internal links use relative paths.
- target="_blank" opens a new tab — add rel="noopener" for safety.
- Link to page sections with #id, and write descriptive link text.