HTML Links
Learn how to create hyperlinks using the HTML anchor element to connect webpages, open external websites, navigate to page sections, send emails, make phone calls, and download files.
Introduction
In the previous lesson, you learned about HTML Comments and how developers use them to document, organize, and temporarily disable HTML code.
Now imagine a website containing only one page. Visitors could read that page, but they would have no direct way to move to another page, visit another website, jump to another section, download a document, send an email, or start a phone call.
The World Wide Web works because documents and resources are connected together through hyperlinks.
HTML provides the anchor element to create these connections. A link can connect one page to another page, another website, a file, an email address, a phone number, or a specific location inside a document.
<a href="about.html">About Us</a>Without hyperlinks, webpages would remain isolated documents. Links connect pages and resources into the interconnected system known as the World Wide Web.
What are HTML Links?
An HTML link, also called a hyperlink, is a clickable connection from one location to another.
A link can send the user to another webpage, another website, a file, an email address, a phone number, or a specific section of the current page.
HTML links are created using the <a> anchor element. The destination is normally specified using the href attribute.
<a href="https://example.com"> Visit Example</a>Normal Text
- Displays information.
- Does not navigate by itself.
- Usually remains on the current page.
- Has no destination unless placed inside a link.
Hyperlink
- Can display clickable content.
- Connects to a destination.
- Can navigate to another resource.
- Uses the anchor element.
Websites
Open another website or online resource.
Pages
Navigate between pages of the same website.
Files
Open or download documents and other resources.
Sections
Jump directly to a specific location inside a page.
Open an email application with a recipient address.
Phone
Open a supported phone dialer using a telephone link.
An HTML link is a clickable connection that allows a user to move from one location or resource to another.
Why Do We Need Links?
Modern websites usually contain many pages and resources. Users need a clear way to move between those locations.
Links provide the connections that make website navigation, resource sharing, search engine discovery, and the wider structure of the web possible.
Without Links
- Pages remain isolated from one another.
- Users cannot navigate naturally between pages.
- Resources are harder to discover.
- Multi-page website navigation becomes impossible.
- The interconnected structure of the web disappears.
With Links
- Pages can connect to one another.
- Users can navigate through websites.
- Resources can be shared directly.
- Files and documents can be accessed.
- Websites become interconnected experiences.
Navigation
Connect Home, About, Services, Contact, and other pages.
External Resources
Send users to useful websites and references.
Content Discovery
Help users and search engines discover related pages.
Resource Sharing
Provide access to documents, images, and downloadable files.
Communication
Create direct email and telephone actions.
Page Navigation
Move users directly to specific sections of long pages.
Links are one of the fundamental technologies that allow users to move through websites and across the World Wide Web.
Real-World Analogy
Imagine a city containing homes, schools, libraries, hospitals, shops, and offices.
Roads connect these locations and allow people to travel from one place to another.
Webpages work in a similar way. Individual pages are like locations, while hyperlinks act like roads connecting those locations.
City Navigation Web Navigation─────────────── ──────────────
Home Home Page │ │ ▼ Road ▼ LinkSchool About Page │ │ ▼ Road ▼ LinkLibrary Contact PageCity
- Contains different locations.
- Roads connect destinations.
- People choose where to travel.
- Signs describe destinations.
Website
- Contains different pages and resources.
- Links connect destinations.
- Users choose where to navigate.
- Link text describes destinations.
A hyperlink creates a navigable path between resources in much the same way that a road connects physical locations.
HTML Anchor Element & Parts
HTML links are created using the <a> anchor element.
The href attribute specifies the destination, while the content between the opening and closing anchor tags becomes the clickable link content.
<a href="URL">Link Text</a><a href="https://example.com">Visit Example</a>── ───────────────────────── ───────────── ──│ │ │ ││ │ │ └── Closing Tag│ │ ││ │ └── Link Text│ ││ └── Destination│└── Opening Anchor Tag| Part | Example | Purpose |
|---|---|---|
| Anchor element | <a>...</a> | Creates the hyperlink |
| href attribute | href="about.html" | Specifies the destination |
| Link text | About Us | Provides the clickable content |
| Closing tag | </a> | Ends the anchor element |
1️⃣ Anchor Element
The <a> element creates the hyperlink.
2️⃣ href Attribute
The href value identifies the destination.
3️⃣ Link Content
The content inside the anchor becomes clickable.
<a href="about.html"> About Us</a>The href attribute contains the reference or destination that the browser should follow when the link is activated.
Example 1: External Website
A link can connect your webpage to an external website.
External destinations normally use a complete URL that includes the protocol and domain name.
<a href="https://www.google.com"> Visit Google</a>External website links normally use a complete address such as https://www.example.com.
Absolute vs Relative URLs
The href attribute can contain different types of URLs. Two of the most important are absolute URLs and relative URLs.
An absolute URL contains a complete address, while a relative URL describes a destination relative to the current website or document location.
Absolute URL
- Contains a complete web address.
- Usually includes the protocol.
- Usually includes the domain name.
- Commonly used for external websites.
Relative URL
- Uses a path relative to the current site or file.
- Does not require the full domain.
- Commonly used for internal navigation.
- Makes internal links easier to move between environments.
<a href="https://www.wikipedia.org"> Wikipedia</a><a href="about.html"> About Us</a>| Feature | Absolute URL | Relative URL |
|---|---|---|
| Example | https://example.com/about | about.html |
| Complete address | Yes | No |
| Includes domain | Usually yes | No |
| Common use | External resources | Internal pages |
| Depends on current location | No | Yes |
Current Folder│├── index.html├── about.html│├── pages│ └── contact.html│└── documents └── guide.pdf
From index.html:
about.htmlpages/contact.htmldocuments/guide.pdfRelative URLs are usually preferred for navigation between pages and resources inside the same website.
Example 2: Link to Another HTML Page
Suppose a project contains an index.html file and an about.html file in the same folder.
The index page can link to the about page using a relative URL.
website│├── index.html└── about.html<a href="about.html"> About Us</a>A relative URL must correctly describe where the destination file is located relative to the current document.
Example 3: Opening a Link in a New Tab
By default, activating a normal link usually loads the destination in the current browsing context.
The target="_blank" attribute value requests that the destination open in a new browsing context, commonly a new browser tab.
<a href="https://www.google.com" target="_blank"> Open Google in New Tab</a>| Attribute | Value | Purpose |
|---|---|---|
| href | https://www.google.com | Specifies the destination |
| target | _blank | Requests a new browsing context |
| Link content | Open Google in New Tab | Provides clickable text |
Default Link
- Usually opens in the current tab.
- Replaces the current page.
- Common for internal navigation.
- Keeps navigation behavior predictable.
target="_blank"
- Usually opens a new tab.
- Keeps the current page available.
- Can be useful for external resources.
- Should be used intentionally.
<a href="https://example.com" target="_blank" rel="noopener noreferrer"> Visit External Resource</a>Use new-tab behavior intentionally. Internal navigation normally works best in the current tab, while selected external resources may be appropriate for a new tab.
Example 4 & 5: Email & Telephone Links
The href attribute can use special URL schemes to start supported actions instead of navigating to a normal webpage.
The mailto scheme can open a configured email application, while the tel scheme can open a supported telephone dialer.
Email Link
Uses the mailto scheme to start an email action.
Telephone Link
Uses the tel scheme to start a supported phone action.
<a href="mailto:info@example.com"> Email Us</a><a href="tel:+911234567890"> Call Us</a>| Link Type | Scheme | Example |
|---|---|---|
| mailto: | mailto:info@example.com | |
| Telephone | tel: | tel:+911234567890 |
Email and telephone links depend on the applications and capabilities configured on the user’s device.
Example 6: Downloading a File
An anchor element can link directly to a file such as a PDF, image, document, or archive.
The download attribute can suggest that the browser download the linked resource instead of navigating to it.
<a href="notes.pdf" download> Download Notes</a><a href="notes.pdf" download="html-notes.pdf"> Download HTML Notes</a>| Part | Example | Purpose |
|---|---|---|
| href | notes.pdf | Identifies the file |
| download | download | Suggests downloading the resource |
| download value | html-notes.pdf | Can suggest a filename |
| Link content | Download Notes | Describes the action |
Download behavior can depend on browser behavior, resource origin, server headers, and other security rules.
Linking to a Section on the Same Page
Links can navigate to a specific element inside the same document.
First, the destination element receives a unique id. The link then uses a fragment identifier beginning with # followed by that id.
<!-- Link -->
<a href="#contact"> Go to Contact Section</a>
<!-- Target Section -->
<h2 id="contact"> Contact Us</h2>href="#contact" │ ▼Find element withid="contact" │ ▼Navigate to thatpage location| Part | Example | Purpose |
|---|---|---|
| Target id | id="contact" | Identifies the destination element |
| Fragment link | href="#contact" | References the target id |
| # symbol | # | Introduces the fragment identifier |
Same-page links are commonly used in tables of contents, documentation pages, FAQs, and long articles.
Browser Rendering Flow
When a browser processes an anchor element, it creates an interactive hyperlink associated with the destination specified by the href attribute.
HTML Source │ ▼Find <a> Element │ ▼Read href Value │ ▼Create Hyperlink │ ▼Display Clickable Content │ ▼User Activates Link │ ▼Resolve Destination │ ▼Navigate or Start Action<a href="about.html"> About Us</a>Unlike ordinary text, an anchor element with a destination provides navigation or another link-related action when activated.
Real-World Applications
Links appear throughout almost every type of website and web application.
Company Websites
Connect Home, About, Services, Careers, and Contact pages.
Educational Platforms
Connect courses, lessons, references, exercises, and resources.
E-Commerce
Connect categories, products, carts, accounts, and checkout pages.
Government Portals
Provide access to forms, documents, notifications, and services.
News Websites
Connect headlines, articles, categories, authors, and related stories.
Documentation
Connect topics and create same-page table-of-contents navigation.
Contact Pages
Provide email and telephone actions.
Download Centers
Provide access to documents, software, and other files.
Advantages of HTML Links
Navigation
Connect pages into a usable website structure.
Connectivity
Connect local pages with resources across the web.
Discovery
Help users find related information and resources.
Resource Access
Provide direct access to files and documents.
Communication
Create email and telephone actions.
Fast Page Navigation
Jump directly to specific sections in long documents.
Search Discovery
Links help search engines discover relationships between pages.
Accessibility
Meaningful links help users understand available destinations and actions.
- Connect webpages together.
- Create multi-page website navigation.
- Connect websites to external resources.
- Allow users to discover related content.
- Provide direct access to files.
- Support document downloads.
- Create email actions.
- Create telephone actions.
- Navigate to sections within the same page.
- Create tables of contents.
- Connect educational lessons and resources.
- Support product and category navigation.
- Help users move through documentation.
- Improve information discovery.
- Form a fundamental part of the World Wide Web.
Common Beginner Mistakes
Without an href destination, the anchor does not provide normal hyperlink navigation.
A relative URL must correctly match the location of the destination file.
The link must match the actual filename, including spelling and relevant letter case.
Writing google.com may be interpreted as a relative path instead of an external website address.
Use target="_blank" intentionally rather than applying it to every link.
Text such as Click Here does not clearly describe the destination when read outside its surrounding context.
Links fail when destination pages are moved, renamed, deleted, or written incorrectly.
Same-page destinations should use unique id values.
<!-- ❌ Missing destination -->
<a>Google</a>
<!-- ✅ Destination provided -->
<a href="https://www.google.com"> Google</a><!-- ❌ May be treated as a relative path -->
<a href="google.com"> Google</a>
<!-- ✅ Complete external URL -->
<a href="https://www.google.com"> Google</a><!-- Project Structure
website/├── index.html└── pages/ └── about.html
-->
<!-- ❌ Wrong -->
<a href="about.html"> About</a>
<!-- ✅ Correct -->
<a href="pages/about.html"> About</a><!-- ❌ Unclear -->
<a href="/privacy"> Click Here</a>
<!-- ✅ Descriptive -->
<a href="/privacy"> Read Our Privacy Policy</a>Poor Link Usage
- Missing destinations.
- Incorrect file paths.
- Unclear link text.
- Every link opens a new tab.
- Broken or outdated destinations.
Better Link Usage
- Correct href destinations.
- Accurate relative paths.
- Meaningful link text.
- Intentional new-tab behavior.
- Regularly tested destinations.
A link may look correct while still pointing to the wrong destination. Test important navigation and resource links regularly.
Best Practices
- Use meaningful and descriptive link text.
- Describe the destination or action clearly.
- Avoid vague text such as Click Here when better wording is available.
- Use relative URLs for internal website navigation when appropriate.
- Use complete absolute URLs for external websites.
- Include the correct protocol for external web addresses.
- Keep internal paths accurate.
- Match destination filenames exactly.
- Remember that filename case can matter on many servers.
- Use target="_blank" intentionally.
- Avoid opening every internal link in a new tab.
- Consider rel="noopener noreferrer" for external new-tab links.
- Test links after renaming files.
- Test links after moving pages.
- Check for broken links regularly.
- Use unique id values for same-page targets.
- Make same-page link text descriptive.
- Use mailto links only when an email action is appropriate.
- Use tel links when phone interaction is useful.
- Use the download attribute when download behavior is appropriate.
- Do not assume every browser handles downloads identically.
- Keep navigation structure consistent.
- Make important links easy to identify.
- Do not rely only on color to communicate link meaning.
- Keep link behavior predictable for users.
<!-- Internal navigation -->
<a href="/about"> About Us</a>
<!-- External resource -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer"> Visit External Resource</a>
<!-- Email -->
<a href="mailto:info@example.com"> Email Our Team</a>
<!-- Telephone -->
<a href="tel:+911234567890"> Call Our Office</a>
<!-- Same-page navigation -->
<a href="#contact"> Go to Contact Section</a>
<!-- Download -->
<a href="/files/guide.pdf" download> Download the HTML Guide</a>Users should usually be able to understand a link’s destination or action from its visible text.
Frequently Asked Questions
An HTML link is a clickable connection that navigates to another page, website, file, page section, or supported action.
The <a> anchor element creates hyperlinks.
The href attribute specifies the destination.
href commonly refers to Hypertext Reference and identifies the destination associated with the link.
Anchor text is the visible clickable text contained inside an anchor element.
An absolute URL contains a complete address, such as https://example.com/about.
A relative URL identifies a destination relative to the current site or document location, such as about.html.
Relative URLs are commonly used for pages and resources inside the same website.
Absolute URLs are commonly used when linking to external websites or resources that require a complete address.
Use the target="_blank" attribute value.
No. New-tab behavior should be used intentionally. Internal navigation usually works best in the current tab.
These rel values are commonly used with external links opened in new tabs to improve isolation and control referrer information.
Use a mailto URL such as href="mailto:info@example.com".
Use a tel URL such as href="tel:+911234567890".
Their behavior depends on the device and whether a compatible calling application is available.
Link to the file and add the download attribute when download behavior is appropriate.
Yes. The download attribute can contain a suggested filename, although final behavior depends on browser and server rules.
Give the target element an id and create a link whose href contains # followed by that id.
A fragment identifier is the part of a URL beginning with # that refers to a specific location or element in a document.
The file path, filename, folder location, or letter case may not match the actual destination.
They can be case-sensitive depending on the server and operating system, so links should match filenames exactly.
Descriptive link text communicates the destination more clearly and provides better context for users and assistive technologies.
Yes. An image element can be placed inside an anchor element to make the image clickable.
The next lesson is HTML Images, where you will learn how to display images and provide useful alternative text.
Key Takeaways
- HTML links connect webpages and resources.
- Links are created using the <a> anchor element.
- The href attribute specifies the destination.
- The content inside the anchor becomes clickable.
- Links can open other webpages.
- Links can open external websites.
- Links can point to files.
- Links can start email actions.
- Links can start supported telephone actions.
- Links can navigate to sections on the same page.
- Absolute URLs contain complete addresses.
- Relative URLs describe destinations relative to the current location.
- Relative URLs are commonly used for internal navigation.
- Absolute URLs are commonly used for external websites.
- target="_blank" requests a new browsing context.
- New-tab behavior should be used intentionally.
- The download attribute can request download behavior.
- Same-page links use # followed by a target id.
- Target id values should be unique.
- Meaningful link text improves clarity.
- File paths must match the actual project structure.
- Filename case can matter on servers.
- Broken links should be tested and corrected.
- Links are fundamental to website navigation.
- Hyperlinks form a major foundation of the World Wide Web.
Summary
HTML links create connections between webpages, websites, files, page sections, and supported communication actions.
A hyperlink is created using the <a> anchor element, while the href attribute identifies the destination.
The visible content inside the anchor element becomes the clickable part of the link and should clearly describe the destination or action.
Absolute URLs contain complete web addresses and are commonly used for external resources. Relative URLs describe destinations relative to the current site or document and are commonly used for internal navigation.
Links can open destinations in new tabs using target="_blank", start email actions using mailto, start supported telephone actions using tel, and request file downloads using the download attribute.
Same-page links use fragment identifiers. A destination element receives a unique id, and the link references that id using a value such as href="#contact".
Good links use accurate destinations, correct file paths, meaningful link text, intentional behavior, and regular testing to prevent broken navigation.
Links are one of the most important features of HTML because they transform isolated documents into connected websites and create the navigable structure of the World Wide Web.
In the next lesson, you will learn about HTML Images and how to display visual content using the image element.