Web Development Zero to Advanced — Class 10 of 120
HTML Links & Anchor Tags
Links are one of the most important features of the Web.
They allow users to move from one page to another, visit another website, download a file, send an email, call a phone number, or jump to a specific section of the same page.
In HTML, links are mainly created using the <a> element.
The <a> element is called the anchor element.
Basic example:
<a href="https://example.com">Visit Website</a>
In this class, you will learn:
• What hyperlinks are
• The <a> anchor element
• The href attribute
• Absolute URLs
• Relative URLs
• Internal page links
• External links
• The target attribute
• target="_blank"
• Safe external links
• Email links
• Telephone links
• Page-section links
• Download links
• Link accessibility
• Common link mistakes
What Is a Hyperlink?
A hyperlink, usually called a link, is a reference that allows a user to navigate to another resource or location.
A link can point to:
• Another web page
• Another website
• A section of the current page
• An image
• A PDF file
• A downloadable file
• An email address
• A telephone number
For example:
<a href="https://example.com">Visit Example</a>
The visible clickable text is:
Visit Example
When the user clicks it, the browser navigates to the URL specified by href.
What Is the <a> Element?
The HTML <a> element creates a hyperlink.
Basic syntax:
<a href="URL">Link Text</a>
Example:
<a href="https://example.com">Visit Website</a>
Here:
<a> = Opening anchor tag
href = Attribute containing the link destination
Visit Website = Link text
</a> = Closing anchor tag
What Does href Mean?
href stands for:
Hypertext Reference
The href attribute specifies the destination associated with a link.
Example:
<a href="about.html">About Us</a>
Here:
about.html
is the destination.
When the user clicks:
About Us
the browser attempts to open about.html relative to the current page.
Basic Link Example
Create:
index.html
Write:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Links</title>
</head>
<body>
<h1>HTML Links</h1>
<a href="https://example.com">Visit Example Website</a>
</body>
</html>
Save the file and open it in your browser.
You should see a clickable link.
What Is an Absolute URL?
An absolute URL contains the complete address needed to identify a resource.
Example:
<a href="https://example.com/about">About Example</a>
The destination includes:
https://
Domain
Path
Another example:
<a href="https://www.wikipedia.org/">Visit Wikipedia</a>
Absolute URLs are commonly used when linking to resources on another website.
What Is a Relative URL?
A relative URL identifies a resource relative to the current document’s location or base URL.
Suppose your project contains:
my-website/
│
├── index.html
├── about.html
└── contact.html
Inside index.html, you can link to about.html using:
<a href="about.html">About Us</a>
And:
<a href="contact.html">Contact Us</a>
You do not need to write the complete domain when linking between these local pages.
Absolute URL vs Relative URL
Absolute URL:
<a href="https://example.com/about">About</a>
Relative URL:
<a href="about.html">About</a>
Simple way to remember:
Absolute URL = Complete destination address
Relative URL = Destination relative to the current location
Linking Files Inside Folders
Suppose your project structure is:
my-website/
│
├── index.html
│
└── pages/
├── about.html
└── contact.html
From index.html, you can write:
<a href="pages/about.html">About</a>
For the contact page:
<a href="pages/contact.html">Contact</a>
Going Back to a Parent Folder
Suppose:
my-website/
│
├── index.html
│
└── pages/
└── about.html
If you are inside:
pages/about.html
and want to link back to index.html, you can use:
<a href="../index.html">Home</a>
Here:
..
means move up one directory level.
Internal Links
An internal link points to another page or resource within the same website.
Example:
<a href="about.html">About Us</a>
Another example:
<a href="products.html">Products</a>
Internal links are important for website navigation.
External Links
An external link points to a resource on another website.
Example:
<a href="https://developer.mozilla.org/">MDN Web Docs</a>
The destination belongs to another website.
What Is the target Attribute?
The target attribute controls where the linked resource is opened.
Example:
<a href="https://example.com" target="_blank">
Visit Website
</a>
target="_blank"
usually opens the link in a new browsing context, commonly a new browser tab.
Common target Values
_self
Opens the link in the current browsing context.
Example:
<a href="about.html" target="_self">About</a>
This is generally the default behavior.
_blank
Opens the link in a new browsing context.
Example:
<a href="https://example.com" target="_blank">
Visit Website
</a>
Safe External Links
When using target="_blank", you may encounter:
rel="noopener"
Example:
<a
href="https://example.com"
target="_blank"
rel="noopener"
>
Visit Website
</a>
noopener prevents the newly opened page from gaining access to the originating page through window.opener in environments where that protection is relevant.
You may also see:
rel="noreferrer"
Example:
<a
href="https://example.com"
target="_blank"
rel="noopener noreferrer"
>
Visit Website
</a>
noreferrer instructs the browser not to send referrer information when following the link and also has security-related behavior in modern browsers.
Link to an Email Address
HTML can create a link that opens the user’s configured email application.
Use:
mailto:
Example:
<a href="mailto:info@example.com">
Email Us
</a>
When clicked, the browser may open the user’s configured email application.
Email Link with Subject
You can also include additional information.
Example:
<a href="mailto:info@example.com?subject=Website%20Project">
Contact Us
</a>
Here:
%20
represents an encoded space in the URL.
Telephone Links
You can create a telephone link using:
tel:
Example:
<a href="tel:+8801700000000">
Call Us
</a>
On supported devices, clicking this link may open the phone/dialer interface.
Link to a Section on the Same Page
You can create links that jump to specific sections of a page.
First, give an element an id.
Example:
<h2 id="services">Our Services</h2>
Then create a link:
<a href="#services">Go to Services</a>
When clicked, the browser navigates to the element whose ID is:
services
Complete Section-Link Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Section Links</title>
</head>
<body>
<h1 id="top">My Website</h1>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
<h2 id="about">About Us</h2>
<p>
We are a web development company.
</p>
<h2 id="services">Our Services</h2>
<p>
We provide website development services.
</p>
<h2 id="contact">Contact Us</h2>
<p>
Contact our team for more information.
</p>
<a href="#top">Back to Top</a>
</body>
</html>
How Section Links Work
Suppose:
<h2 id="contact">Contact</h2>
Then:
<a href="#contact">Go to Contact</a>
The #contact fragment points to:
id="contact"
Linking to a Section on Another Page
Suppose about.html contains:
<h2 id="team">Our Team</h2>
From another page, you can link directly to that section:
<a href="about.html#team">Meet Our Team</a>
Using Images as Links
An image can be placed inside an anchor element.
Example:
<a href="index.html">
<img src="images/logo.png" alt="Company Home">
</a>
Now the image becomes clickable.
This technique is commonly used for website logos.
Download Links
The download attribute can suggest that the browser download the linked resource rather than navigate to it.
Example:
<a href="files/company-profile.pdf" download>
Download Company Profile
</a>
Browser behavior can depend on the resource, origin, response headers, and browser policies.
Navigation Menu Example
Links are commonly used to build website navigation.
Example:
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
</nav>
This creates a simple navigation menu structure.
Complete Multi-Page Website Example
Create this project:
class-10/
│
├── index.html
├── about.html
├── services.html
└── contact.html
Inside index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Company</title>
</head>
<body>
<h1>My Company</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
</nav>
<h2>Welcome</h2>
<p>
Welcome to our company website.
</p>
</body>
</html>
Now create about.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Us</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
</nav>
<h1>About Us</h1>
<p>
We provide professional web development services.
</p>
</body>
</html>
When you click:
Home
or:
About
the browser navigates between your HTML pages.
Practical Example: IT Company Website
Suppose you are building an IT company website.
You could create:
<h1>ABC IT Company</h1>
<nav>
<a href="index.html">Home</a>
<a href="services.html">Services</a>
<a href="portfolio.html">Portfolio</a>
<a href="about.html">About Us</a>
<a href="contact.html">Contact</a>
</nav>
You could also add:
<a href="mailto:info@example.com">
Email Us
</a>
and:
<a href="tel:+8801700000000">
Call Now
</a>
This demonstrates how links are used in a real business website.
Descriptive Link Text
Link text should clearly communicate where the link goes or what it does.
Less useful:
<a href="services.html">Click Here</a>
Better:
<a href="services.html">View Our Web Development Services</a>
Descriptive link text helps users understand the destination and can improve accessibility.
Link Accessibility
Links should be understandable even when read outside the surrounding paragraph.
For example:
Poor:
<a href="pricing.html">Click here</a>
Better:
<a href="pricing.html">View Website Development Pricing</a>
Also avoid creating empty links:
<a href=""></a>
A useful link should normally have meaningful text or an accessible label.
Links vs Buttons
Links and buttons have different semantic purposes.
A link normally navigates somewhere:
<a href="contact.html">Contact Us</a>
A button normally performs an action:
<button type="button">Open Menu</button>
A simple rule:
Navigation → Link
Action → Button
This distinction becomes important for accessibility and JavaScript applications.
Common Beginner Mistakes
1. Forgetting href
Incorrect:
<a>About Us</a>
If the element is intended to navigate somewhere, provide an appropriate href.
Correct:
<a href="about.html">About Us</a>
2. Wrong Relative Path
Suppose:
website/
│
├── index.html
└── pages/
└── about.html
From index.html, this is wrong:
<a href="about.html">About</a>
if about.html is actually inside pages.
Correct:
<a href="pages/about.html">About</a>
3. Confusing Absolute and Relative URLs
External:
<a href="https://example.com">Example</a>
Internal:
<a href="about.html">About</a>
4. Writing Unclear Link Text
Avoid using only:
Click Here
Read More
Link
when a more descriptive label can be provided.
Prefer:
View Product Details
Read HTML Tutorial
Contact Our Support Team
5. Opening Every Link in a New Tab
Do not automatically add:
target="_blank"
to every link.
Use it only when opening a new browsing context is appropriate.
6. Forgetting the # for Section Links
If the target is:
<h2 id="contact">Contact</h2>
the link should be:
<a href="#contact">Contact</a>
7. Duplicate IDs
Avoid giving multiple elements the same ID on a page.
Bad:
<h2 id="services">Web Development</h2>
<h2 id="services">SEO</h2>
IDs should be unique within the document.
8. Using Links for Actions
Do not use a link when the intended behavior is an application action that does not represent navigation.
Use the correct semantic element.
New & Difficult Words
HTML = HyperText Markup Language
Anchor = HTML element used to create hyperlinks
Hyperlink = Clickable reference to another resource or location
href = Hypertext Reference; attribute specifying the link destination
URL = Uniform Resource Locator
Absolute URL = Complete URL to a resource
Relative URL = URL resolved relative to the current/base location
Internal Link = Link to a resource within the same website
External Link = Link to another website
Target = Attribute controlling the browsing context used for navigation
Fragment = Part of a URL beginning with # that can identify a location within a resource
ID = Unique identifier for an HTML element
mailto = URL scheme used for email links
tel = URL scheme used for telephone links
Navigation = Movement between pages or sections
noopener = Link relationship value that prevents opener access
noreferrer = Link relationship value that suppresses referrer information
Download = Transfer a file to the user’s device
Accessibility = Making websites usable by people with different abilities and assistive technologies
Important Notes
Remember the basic syntax:
<a href="URL">Link Text</a>
Internal page:
<a href="about.html">About</a>
External website:
<a href="https://example.com">Visit Example</a>
New browsing context:
<a href="https://example.com" target="_blank" rel="noopener">
Visit Example
</a>
Email:
<a href="mailto:info@example.com">Email Us</a>
Phone:
<a href="tel:+8801700000000">Call Us</a>
Section:
<a href="#contact">Contact</a>
Download:
<a href="file.pdf" download>Download PDF</a>
Most importantly:
Navigation = <a>
Action = <button>
Practice Questions
- What is a hyperlink?
- Which HTML element creates a link?
- What does
hrefdo? - What is an absolute URL?
- What is a relative URL?
- What is an internal link?
- What is an external link?
- What does
target="_blank"do? - What is
rel="noopener"? - How do you create an email link?
- How do you create a telephone link?
- How do you link to a section of the same page?
- What does
../mean in a relative path? - How can an image become a link?
- What is the difference between a link and a button?
- Why should link text be descriptive?
Assignment
Create a folder named:
class-10
Create these files:
class-10/
│
├── index.html
├── about.html
├── services.html
├── contact.html
│
├── images/
│ └── logo.png
│
└── files/
└── company-profile.pdf
Create a navigation menu containing:
Home
About
Services
Contact
Then add:
- One internal link.
- One external link.
- One external link using
target="_blank". - One email link.
- One telephone link.
- One “Back to Top” link.
- One link to a specific page section.
- One image link.
- One download link.
Test every link in your browser.
Quiz
- Which HTML element creates a hyperlink?
Answer: <a>.
- Which attribute defines the destination?
Answer: href.
- What does
hrefstand for?
Answer: Hypertext Reference.
- What is an absolute URL?
Answer: A complete URL identifying a resource.
- What is a relative URL?
Answer: A URL resolved relative to the current document or base URL.
- What does
target="_blank"do?
Answer: It opens the linked resource in a new browsing context, commonly a new tab.
- How do you create an email link?
Answer:
<a href="mailto:info@example.com">Email Us</a>
- How do you create a phone link?
Answer:
<a href="tel:+8801700000000">Call Us</a>
- How do you link to an element with
id="contact"?
Answer:
<a href="#contact">Contact</a>
- What does
../mean in a relative path?
Answer: It refers to the parent directory.
Interview Questions
Q: What is the HTML anchor element?
Answer: The <a> element creates hyperlinks to other resources or locations.
Q: What is the href attribute?
Answer: The href attribute specifies the destination associated with an anchor link.
Q: What is the difference between an absolute URL and a relative URL?
Answer: An absolute URL contains the complete address of a resource, while a relative URL is resolved relative to the current document or base URL.
Q: What does target="_blank" do?
Answer: It opens the linked resource in a new browsing context, commonly a new tab.
Q: How can you link to a specific section of an HTML page?
Answer: Give the destination element an id and use that ID as a URL fragment in the link.
Example:
<a href="#services">Services</a>
<h2 id="services">Our Services</h2>
Q: What is the difference between an HTML link and a button?
Answer: A link is primarily used for navigation to another resource or location, while a button is primarily used to perform an action.
Class Summary
In Class 10, you learned how to create and manage hyperlinks using HTML.
You learned:
<a> → Anchor Element
href → Link Destination
Absolute URL → Complete Address
Relative URL → Relative Address
Internal Link → Same Website
External Link → Another Website
target="_blank" → New Browsing Context
mailto: → Email Link
tel: → Telephone Link
#id → Section Link
download → Download Link
The most important syntax is:
<a href="URL">Link Text</a>
Links connect pages and resources together and are one of the fundamental building blocks of the Web.
Next Class:
Class 11 — HTML Images & Image Paths