In certain instances, we may earn revenue when a reader makes a purchase or completes a form through our pages or on a partner’s website. We adhere to a strict 
What Does Hyperlink Mean?
A hyperlink is a clickable element in a hypertext markup language (HTML) document that links a source to a target. When used strategically, hyperlinks are a powerful navigation tool that can also be used to improve user engagement and search engine performance.
Hyperlinks are important because they form the foundation of the World Wide Web (WWW). Without hyperlinks, the Internet would be a collection of isolated resources.
Key Takeaways
- An electrical engineer named Vannevar Bush introduced the concept of linking related pieces of information together in 1945.
- In 1989, computer scientist Tim Berners-Lee made the concept practical by inventing HTML, a markup language that made it easy to link a source with a target.
- The first browsers made hyperlinks blue to differentiate them from regular text.
- Today, cascading style sheets (CSS) allow hyperlinks to be styled in a wide variety of ways.
- While hyperlinks started out as a navigation tool, their flexibility has made them an essential building block for a wider range of online interactions.
Hyperlink Syntax
Hyperlinks have a syntax that’s defined by HyperText Markup Language.
<a href=”URL”>Link text</a>
In the example above, <a is the beginning of the anchor tag. It tells the user’s browser that what follows is a hyperlink.
href=”URL” is an attribute within the anchor tag that specifies the target destination. The target is always enclosed in quotation marks.
Link text is the visible, clickable text users will see on the page. Link text is always placed after the target destination but before the closing anchor tag </a>.
How Hyperlinks Work
HTML tags define a hyperlink’s structure and destination in the source code. The user’s browser reads the source code, interprets the markup language, and navigates to the specified target destination when the hyperlink is clicked.
Types of Hyperlinks
Hyperlinks can be categorized by their function or use case. For example, relative hyperlinks help users navigate to another page or resource within the same website, and email hyperlinks will open an email client with a pre-filled recipient address.
| Type of hyperlink | Functionality | Example | Use сase |
|---|---|---|---|
| Text hyperlinks | Clickable text that links to another destination. | <a href=”https://abc.com”>Go</a> | Navigate to different sections of a webpage or different online resources. |
| Image hyperlinks | Images that act as clickable links. | <a href=”https://abc.com”><img src=”imageZ.jpg” alt=”ImageZ”></a> | Often used for banners, advertisements, and other types of visual navigation. |
| Button hyperlinks | Buttons styled with CSS or JavaScript that function as hyperlinks. | <button onclick=”location.href=’https://abc.com'”>Go</button> | Used for interactive designs, forms, and call-to-action elements. |
| Anchor (in-page) links | Navigate to a specific section within the same webpage. | <a href=”#section2″>Go to Section 2</a> <h2 id=”section2″>Section 2</h2> |
Used for table of contents and ‘back to top’ buttons. |
| Email links | Open an email client with a pre-filled recipient address. | <a href=”mailto:[email protected]”>Email Us</a> | Provides an easy way to contact someone via email. |
| Phone links | Initiate a phone call when clicked (mainly on mobile devices). | <a href=”tel:+1234567890″>Call Us</a> | Provides click-to-call functionality for businesses. |
| Download links | Triggers a file download. | <a href=”file.pdf” download=”document.pdf”>Download PDF</a> | Used to share documents, software, or media files. |
| External links | Takes users to a different website or domain. | <a href=”https://example.com” target=”_blank”>Visit Example</a> | Provides 1-click access to a partner site or useful information on another website. |
| Relative links | Links to another page or resource within the same website, using a relative path. | <a href=”/about”>About Us</a> | Internal navigation within the same website. |
| Absolute links | Full links that include the entire URL. Can be used to link to any resource. | <a href=”https://example.com/about”>About Us</a> | Used for internal or external navigation. |
| JavaScript links | Trigger a JavaScript function. | <a href=”javascript:void(0);” onclick=”alert(‘Hello!’)”>Click Me</a> | Used for interactive web elements and dynamic content. |
Hyperlink Functions
The function of a specific hyperlink can be determined by reading the source code and examining the anchor tag’s attributes. The attributes define the hyperlink’s behavior and determine what action will occur when it is clicked.
Hyperlinks vs. Link & URL
In everyday conversation, the terms ‘hyperlink’ and ‘link’ are often used as synonyms for “that thing you click on” to go to the next URL. Technically, however, the three terms have slightly different meanings:
- Link refers to the destination target.
- Hyperlink refers to the clickable element as well as the destination target.
- URL, which stands for uniform resource locator, refers to the destination target’s address.
Hyperlinks and SEO
Search engines use automated programs called bots or crawlers to discover and index web pages. Essentially, they follow hyperlinks to navigate (crawl) through a website and understand its content. The anchor text used in hyperlinks provides clues about the content of the linked pages.
Here are some suggestions for how hyperlinks can be optimized for search engine optimization (SEO):
- Create a logical internal linking structure that connects relevant web pages within your website
- Use relevant keywords in anchor text to provide context for both search engines and users
- Make sure hyperlinks are easy to identify and click on and that they work correctly
- Earn backlinks from reputable, relevant websites
- Avoid manipulative link-building tactics like buying inbound links or engaging in link trading schemes
Hyperlinks and Security
It’s important for end users to understand that hyperlinks can be exploited by threat actors and cybercriminals. Malicious hyperlinks that are purposely created to resemble legitimate links can be embedded in emails, social media posts, or websites.
To stay safe, users should exercise caution by hovering over links to check their true destination, being wary of shortened URLs, and relying on reputable antivirus software to detect threats.
Virtual private networks (VPNs) can add an extra layer of security by encrypting internet traffic and masking the user’s IP address. The best mobile VPNs can make it more difficult for cybercriminals to track Internet users in public places and prevent them from intercepting sensitive data.
Hyperlink Pros & Cons
Like any application of technology on the Internet, hyperlinks have both advantages and disadvantages:
Pros
- Make it easy for users to navigate related online resources
- Help search engine bots crawl and index web content
- Internal links can encourage engagement and keep users on a website longer
- External and inbound links can enhance credibility
- Can be styled to match a website’s design and serve a variety of purposes
Cons
- Require an active internet connection to work
- Can be exploited for malicious purposes
- Broken hyperlinks need to be fixed or removed
- Too many hyperlinks on a page can overwhelm users and confuse SEO bots
- Linking to unreliable or malicious websites can damage a site’s credibility and security
The Bottom Line
Over the years, the basic definition of hyperlink has remained the same, but the use cases have evolved.
In the early days of the World Wide Web, hyperlinks provided basic navigation. Today, hyperlinks are a powerful tool for improving navigation, engagement, and search engine results when used thoughtfully and strategically.
In the future, you can expect hyperlinks to trigger interactive elements in augmented reality and virtual reality (AR/VR) environments. The flexibility that hyperlinks have will help developers create new ways for people to explore web content and acquire information.
FAQs
What is a hyperlink in simple terms?
What is an example of a hyperlink?
How do you create a hyperlink?
What is the difference between a URL and a hyperlink?
References
- CSS Introduction (W3schools)
