Links
Connect pages to each other and to the rest of the internet with anchors.
Links β anchors β are what make the web a web: one page pointing to another, and another, forever.
The anchor element
<a href="https://developer.mozilla.org">MDN Web Docs</a>
href (hypertext reference) says where the link goes; the element's
content is what the visitor clicks.
Absolute vs relative URLs
<a href="https://example.com/page">Absolute β full address</a>
<a href="about.html">Relative β relative to the current page</a>
<a href="#top">Fragment β jumps to an id on this page</a>
Use absolute URLs for other sites, relative URLs for pages in your own
project. Fragments (#top) scroll to an element whose id="top".
Links that open in a new tab
<a href="https://example.com" target="_blank" rel="noopener noreferrer"> External site </a>
target="_blank" opens a new tab. When you do, always add
rel="noopener noreferrer" β it is a security habit (the opened page cannot
manipulate the page that opened it).
Writing good link text
Bad: <a href="more.html">click here</a>
Good: <a href="more.html">Read more about HTML elements</a>
Screen-reader users often jump from link to link out of context β "click here" tells them nothing. Describe the destination.
What you learned
<a href="...">creates a link; content is the clickable part- Absolute vs relative vs fragment URLs
target="_blank"pairs withrel="noopener noreferrer"- Link text should describe the destination