Know and understand the function of an anchor

Website Authoring – The Anchor Element

Learning Objective

Know and understand the function of an anchor (<a>) in HTML web pages.

What is an Anchor?

An anchor creates a hyperlink that allows a user to jump from one location to another. It can link to:

• Another web page (external link)
• A different part of the same page (internal link)
• An email address
• A file for download

Basic Syntax

The general form of an anchor is:

<a href="URL" target="_blank">Link text</a>

Key points:

• href – the destination address (required for a functional link).
• target – optional; _blank opens the link in a new tab or window.
• The text between the opening and closing tags is what the user clicks.

Common Types of Anchors

1. External link – points to a different website.

   <a href="https://www.bbc.com">BBC News</a>

2. Internal link – jumps to a section within the same page.

   <a href="#section2">Go to Section 2</a>
   ...
   <h3 id="section2">Section 2</h3>

3. Email link – opens the default mail client.

   <a href="mailto:info@example.com">Email us</a>

4. Download link – prompts the browser to download a file.

   <a href="files/report.pdf" download>Download Report</a>

Important Attributes

Attribute	Purpose	Example \cdot alue
href	Specifies the URL or fragment identifier to navigate to.	https://www.example.com
target	Controls where the linked document opens.	_blank, _self, _parent, _top
id	Creates a named anchor for internal linking.	section3
download	Informs the browser that the link is for downloading a file.	(empty or filename)
rel	Describes the relationship between the current page and the linked resource.	noopener, noreferrer

Best Practice Checklist

• Use clear, descriptive link text – avoid “click here”.
• Ensure the href attribute is present; otherwise the anchor is not a link.
• For external sites, consider adding target="_blank" and rel="noopener" for security.
• Use id (or the older name) on the target element for internal links.
• Test all links to confirm they lead to the intended destination.

Common Mistakes to Avoid

• Leaving the href attribute empty – the link will not work.
• Using spaces or special characters in URLs without encoding them.
• Forgetting to close the <a> tag, which can break page layout.
• Relying solely on colour to indicate a link – add underline or other visual cue.

Activity – Create a Simple Web Page with Anchors

1. Open a plain‑text editor and create a new file called anchors.html.
2. Insert a heading and three sections titled “Home”, “About”, and “Contact”. Give each section an id attribute.
3. At the top of the page, add a navigation menu using an unordered list of anchors that link to the three sections.
4. Add an external link to a favourite website and set it to open in a new tab.
5. Save the file and view it in a web browser. Verify that each link works as expected.