22 min read
Links Between Pages
The a element and href: linking your own pages, other websites, email, phone numbers and parts of a page — and making image links.
The a Element
A link to another pageHTML
<a href="menu.html">See our menu</a>What the browser shows
The <a> (anchor) element makes a hyperlink. The href attribute is where the link goes; the content between the tags is what the visitor clicks. Try the link in the preview — it opens the example site's menu page.
Kinds of Link
| Different href values | |
|---|---|
Linking to Part of a Page
Using an id as a targetHTML
<p><a href="#hours">Jump to opening hours</a></p><h2>Our story</h2><p>…a long section of text…</p><h2 id="hours">Opening hours</h2><p>Every day, 9 am to 7 pm.</p>What the browser shows
Give the target element an id, then link to it with # followed by the id. This is useful on long pages such as FAQs.
Opening Other Websites in a New Tab
target and relHTML
<a href="https://www.openstreetmap.org/" target="_blank" rel="noopener">Find us on a map</a>target="_blank" opens the link in a new tab, so visitors do not leave your site. Add rel="noopener" for security. Use this for other websites; links between your own pages should open in the same tab.
Image Links
Clicking the logo goes homeHTML
<a href="index.html"> <img src="images/logo.svg" alt="Ceylon Leaf Tea Room home" width="200"></a>What the browser shows
Put an <img> inside an <a> to make a clickable picture. Almost every website makes its logo link to the home page. The alt text should say where the link goes.
More lessons in HTML · Next: Semantic Page Layout · Previous: Images