HTML Links
The link tag, written as a, turns text or images into clickable navigation. Its full name is the anchor tag, and its most important attribute is href, which holds the destination. Click the link and the browser loads the address in href. That one mechanism is how the whole web connects.
The href attribute accepts two kinds of addresses. An absolute address is a full web URL starting with https, and it can point to any site on the internet. A relative address points to a file in your own project, like about.html or images/logo.png, and the browser works out the full path from the current page. Relative links survive moves to a new domain; absolute links are for external sites.
Links do more than visit pages. A mailto address opens the visitor email program. Adding target="_blank" opens the destination in a new tab, which keeps your page open behind it. The title attribute adds a tooltip on hover. Search engines follow links to discover pages, so the text between the tags should describe where the link goes.
Relative or absolute?
The rule of thumb is simple. If the target belongs to your own project, use a relative link. If it lives on another site, use the full address with https. Also make the link text describe the destination. Links that say click here force screen reader users to hunt for context.
<a href="about.html">About us</a>
<a href="https://htmlrunner.com">htmlrunner.com</a>How links look
By default, unvisited links are blue and underlined, and visited links turn purple. CSS controls all of that, letting you remove underlines and set any colors. Keep the underline and choose a color that stands out from normal text, so visitors can tell a link when they see one.
<a href="https://htmlrunner.com" style="color: #2563eb;">Styled link</a>Syntax
<a href="https://htmlrunner.com">Visit the site</a>target="_blank" Without rel="noopener" Lets New Page Hijack Yours
A link with target="_blank" gives the new page window.opener access to your page - it can redirect you to a phishing site via opener.location (reverse tabnabbing). web.dev and MDN now hard-warn this; Lighthouse flags it. Always add rel="noopener noreferrer" even for internal links opened in new tab.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Good to know
- The a tag creates links; href holds the destination.
- Relative links stay inside your project; absolute links go anywhere.
- target="_blank" opens a new tab.
- Describe the destination in the link text instead of "click here".