Links and navigation in HTML
The anchor tag <a> is how you link pages together – within your site, to other sites, to a specific section on the same page, or to an email address. The main link types and a few practical habits worth picking up early.
The anchor tag <a>
The anchor tag links one page to another, one site to another, or to a specific spot on the same page. Without it, the web would be a collection of isolated documents.
Basic link syntax
A link needs an href attribute (hypertext reference) that sets the destination:
<a href="https://www.example.com">Visit Example.com</a>Clicking this takes the user to example.com.
Different types of links
External links
External links point to a different domain:
<a href="https://www.othersite.com">Another Site</a>For external links, opening in a new tab is often sensible. Use the target attribute:
<a href="https://www.othersite.com" target="_blank">Another Site (New Tab)</a>Internal links
Internal links stay on the same domain – navigation within your site. Linking to an About page, for example:
<a href="/about.html">About Us</a>The path starts with /, meaning it is relative to the root of the current domain.
Anchor links
Anchor links jump to a specific part of the same page. The target element needs an id attribute:
<!-- Link -->
<a href="#section1">Jump to Section 1</a>
<!-- Target Element -->
<div id="section1">Content of Section 1</div>Clicking the link scrolls the page to the element with id="section1".
Email links
You can link to an email address using mailto::
<a href="mailto:someone@example.com">Send Email</a>This opens the user’s default email client with a new message to that address.
Styling links with CSS
You can customise link appearance with CSS. A simple hover effect:
a {
color: blue;
text-decoration: none;
}
a:hover {
color: green;
text-decoration: underline;
}Best practices for using links
Descriptive link text
Use text that describes where the link goes. Avoid vague phrases like “click here” – descriptive links are better for users, accessibility, and SEO.
Use the title attribute
The title attribute can add extra context. Screen readers may read it out, which can help users understand where a link leads.
<a href="/about.html" title="Learn more about us">About Us</a>Nofollow links
For external links where you do not want search engines to follow the link, use rel="nofollow":
<a href="https://www.othersite.com" rel="nofollow">Another Site</a>Links are simple but important. Use descriptive text, think about whether external links should open in a new tab, and keep your navigation logical. A well-placed link keeps people on your site; a vague one sends them elsewhere with no clear idea why.