Links & Navigation

HTML links allow users to move from one webpage or resource to another. Links are created using the <a> (anchor) element.

Links are one of the most important features of the web because they connect individual webpages into a larger information network.

1. The <a> Element

The <a> element is used to create a hyperlink in HTML.

The destination of the link is specified using the href attribute.

<a href="https://www.example.com">Visit Example</a>

In this example, Visit Example is the clickable text and the href attribute specifies the destination.

Part	Purpose
<a>	Defines the hyperlink.
href	Specifies the destination of the link.
Link Text	The visible, clickable text displayed to the user.
</a>	Closes the anchor element.

2. External Links

An external link points to a webpage or resource located on another website.

<a href="https://www.wikipedia.org">
    Visit Wikipedia
</a>

When the user clicks the link, the browser navigates to the specified website.

Remember:

An external URL normally contains the complete web address, including the protocol such as https://.

3. Internal Links

An internal link connects one webpage of a website to another webpage within the same website.

<a href="about.html">About Us</a>

<a href="contact.html">Contact Us</a>

If the files are located in the same directory, only the filename may be required.

Link	Meaning
about.html	Opens the About page.
contact.html	Opens the Contact page.
courses/html.html	Opens the HTML course page inside the courses folder.

4. Absolute and Relative URLs

URLs used in links can generally be written as absolute URLs or relative URLs.

Type	Example	Use
Absolute URL	https://www.example.com/about.html	Used when specifying the complete address of a resource.
Relative URL	about.html	Used to refer to a resource relative to the current webpage.

5. Opening a Link in a New Tab

The target attribute can be used to specify where the linked document should open.

<a href="https://www.example.com" target="_blank">
    Open Example
</a>

The value _blank generally opens the linked resource in a new browsing context, commonly a new tab.

Best Practice:

When using target="_blank" for external links, modern HTML commonly pairs it with rel="noopener".

<a href="https://www.example.com"
   target="_blank"
   rel="noopener">
    Open Example
</a>

6. Email Links

The mailto: scheme can be used to create a link that opens the user's default email application.

<a href="mailto:contact@example.com">
    Email Us
</a>

When the user clicks the link, the email application can open a new message addressed to the specified email address.

7. Telephone Links

The tel: scheme can be used to create a clickable telephone number, particularly useful on mobile devices.

<a href="tel:+12025550123">
    Call Us
</a>

8. Linking to Files

An anchor element can also be used to link to documents, PDFs, images and other files.

<a href="documents/html-reference.pdf">
    Download HTML Reference
</a>

The linked file should be stored at the specified location and the path must be correct.

9. The download Attribute

The download attribute can indicate that a linked resource is intended to be downloaded rather than simply opened.

<a href="files/notes.pdf" download>
    Download Notes
</a>

Important:

The browser and server configuration can affect how a linked resource is ultimately handled.

10. Creating a Navigation Menu

A navigation menu is a collection of links that helps users move between the major sections of a website.

<nav>

    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="courses.html">Courses</a>
    <a href="contact.html">Contact</a>

</nav>

The semantic <nav> element identifies a section of navigation links.

Link	Destination
Home	index.html
About	about.html
Courses	courses.html
Contact	contact.html

11. Linking to a Section of the Same Page

HTML can create links that take the user directly to a particular section of the current webpage.

This is achieved using the id attribute and a fragment identifier beginning with #.

<a href="#html-basics">
    HTML Basics
</a>

<h2 id="html-basics">
    HTML Basics
</h2>

Clicking the first link moves the browser to the element having the matching id.

12. Linking to a Section on Another Page

A fragment identifier can also be combined with another webpage's URL.

<a href="courses.html#html-basics">
    Learn HTML Basics
</a>

The browser opens courses.html and moves to the element whose id is html-basics.

13. Using an Image as a Link

An image can be placed inside an anchor element to make the image clickable.

<a href="index.html">

    <img src="images/logo.png"
         alt="Website Logo">

</a>

Clicking the image takes the user to the destination specified by the href attribute.

14. Example: Complete Website Navigation

A simple multi-page website can use a consistent navigation structure across all pages.

<nav>

    <a href="index.html">Home</a>

    <a href="about.html">About</a>

    <a href="courses.html">Courses</a>

    <a href="tutorials.html">Tutorials</a>

    <a href="contact.html">Contact</a>

</nav>

15. Important Link Attributes

Attribute	Purpose	Example
href	Specifies the destination of the link.	href="about.html"
target	Specifies where the linked resource should open.	target="_blank"
rel	Defines the relationship between the current document and the linked resource.	rel="noopener"
download	Indicates that the linked resource is intended for downloading.	download
id	Identifies a page element that can be targeted by a fragment link.	id="contact"

16. Writing Better Link Text

Link text should clearly communicate where the link will take the user.

Less Descriptive	Better
Click here	View HTML Course
Read more	Read the HTML Forms Tutorial
Download	Download HTML Practice Worksheet

Accessibility Tip:

Descriptive link text helps users understand the destination without needing to inspect the surrounding content. It is also particularly useful for people using screen readers.

17. Common Mistakes

Mistake	Problem	Correct Approach
Missing href	The anchor does not have a destination.	Add an appropriate href value.
Incorrect file path	The browser may display a 404 error.	Check the folder and filename carefully.
Poor link text	Users may not understand the destination.	Use descriptive link text.
Incorrect fragment ID	The browser cannot find the target section.	Ensure href="#id" exactly matches the target id.

18. Exam Questions

Question 1

Which HTML element is used to create a hyperlink?

Answer:

The <a> (anchor) element.

Question 2

Which attribute specifies the destination of a hyperlink?

Answer:

The href attribute.

Question 3

Write HTML code to create a link to an About page.

<a href="about.html">About Us</a>

Question 4

Which attribute is commonly used to open a link in a new browsing context?

Answer:

target="_blank"

Question 5

How can you link to a specific section of the same webpage?

Answer:

Assign an id to the target element and use the same ID with # in the href.

<a href="#contact">Contact</a>

<h2 id="contact">Contact Us</h2>

19. Interview Questions

Question	Key Point to Answer
What is the difference between an absolute and relative URL?	An absolute URL contains the complete address, while a relative URL identifies a resource relative to the current page.
What is the purpose of href?	It specifies the destination of an anchor link.
What is the purpose of the nav element?	It identifies a section containing navigation links.
How do you create an in-page link?	Use a fragment URL such as #section and match it with the target element's id.
Why should link text be descriptive?	It improves usability, accessibility and clarity.

20. Practice Activity

Build a Simple Website Navigation

Create four HTML pages: index.html, about.html, courses.html and contact.html.

Add a navigation menu to each page so that users can move between all four pages.

Then add an in-page link on the Courses page that takes the user directly to the HTML section.

21. Quick Revision

<a> creates a hyperlink.
href specifies the link destination.
Absolute URL contains the complete web address.
Relative URL points to a resource relative to the current document.
target="_blank" can open a link in a new browsing context.
mailto: creates an email link.
tel: creates a telephone link.
download can indicate that a resource is intended for downloading.
<nav> identifies a navigation section.
#id can be used to navigate to a specific section of a webpage.
Descriptive link text improves usability and accessibility.

22. Golden Tips

Tip 1: Always check the spelling and path of filenames used in links.

Tip 2: Use descriptive link text instead of vague phrases such as "Click here".

Tip 3: Use relative URLs when linking pages within the same website.

Tip 4: Use absolute URLs when linking to external websites.

Tip 5: Remember: href = destination.

Tip 6: For in-page navigation: href="#section" must match id="section".