HTMLbeginner 6 min
Connect pages together with the anchor tag, including links to other sites and to parts of the same page.
How to create links to other websites, to your own pages, and to a spot further down the same page.
Links are what make the web a web. Without them, every page would be a dead end.
A link is made with the anchor tag, <a>. The address it points to goes in the href attribute. An attribute is extra information placed inside the opening tag, written as name="value".
The text between the tags, "Visit Example", is what the reader clicks.
There are three common kinds of address:
https://example.com/about.about.html or pages/contact.html.#pricing, which jumps to the element with id="pricing".To open a link in a new tab add target="_blank" and rel="noopener noreferrer". The rel part protects your page from the page you open.
<a> has an absolute href, so the browser goes to MDN.target="_blank" opens a new tab. rel keeps the new tab from controlling this one.#details. The # means "an id on this page".<h2> has id="details", so clicking the link scrolls to it.Make the link go to a website you like. Then add a second link that jumps to the bottom of the page.
https://. href="example.com" is treated as a file in your project, not a website.rel="noopener noreferrer" when using target="_blank".#details must match id="details" exactly, including case.<a href="...">text</a> makes a link.#fragment.target="_blank" with rel="noopener noreferrer" to open a new tab safely.Next: bringing in pictures.
<a href="https://example.com">Visit Example</a><p>
Read more on <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN</a>.
</p>
<p><a href="#details">Jump to the details</a></p>
<h2 id="details">The details</h2>
<p>You landed here from a fragment link.</p>