A hyperlink is text or an image you click to jump to another page or location
A hyperlink is the clickable element that moves you from one web page to another. When you see underlined text or a button on a website, that is usually a hyperlink. You click it, and your browser loads a new page or scrolls to a different part of the same page. Hyperlinks are the connective tissue of the web — without them, websites would be isolated documents instead of a connected network.
Under the surface, a hyperlink is built with HTML code. The tag that creates it is called an anchor tag, written as <a>. Inside that tag is the destination address, called the href attribute. When you click the link, the browser reads the href and navigates to that address.
Key Takeaways
- A hyperlink is created with an anchor tag (<a>) and an href attribute that points to the destination URL.
- Hyperlinks can point to external websites, pages within the same website, or specific sections on a page using anchor IDs.
- The visible text inside the anchor tag is what users see and click on, while the href is invisible code that tells the browser where to go.
- Developers can style hyperlinks with CSS to change their color, underline, and appearance on hover to make them obvious and clickable.
- Relative links point to pages within the same website, while absolute links include the full web address and work from anywhere.
How the anchor tag creates a clickable link
The basic structure of a hyperlink in HTML looks like this: <a href="https://example.com">Click here</a>. The text between the opening and closing tags — "Click here" — is what appears on the page and is clickable. The href attribute holds the destination. When someone clicks that text, the browser reads the href value and navigates to that address.
You can also turn an image into a hyperlink by placing an <img> tag inside the anchor tag instead of text. This is how image buttons and logo links work. The structure is <a href="destination"><img src="image.jpg"></a>. The image becomes clickable, and clicking it navigates to the href destination.
The href attribute accepts different types of addresses. An absolute URL includes the full web address: https://example.com/page. A relative URL points to a file within the same website using just the file path: pages/about.html. Relative links are shorter and work even if the website moves to a different domain, so developers often use them for internal navigation.
Linking to specific sections within a page
Hyperlinks can point to a specific section of a page instead of just the top. This is done using an anchor ID. First, the developer adds an id attribute to an element on the page: <h2 id="contact">Contact Us</h2>. Then, a link to that section uses a hash symbol followed by the ID: <a href="#contact">Go to Contact</a>.
You can also link to a specific section on a different page by combining the page address with the anchor ID: <a href="pages/about.html#team">Meet the Team</a>. When someone clicks this link, the browser loads the about.html page and automatically scrolls down to the element with id="team". This is useful for long pages where you want to skip directly to the relevant section.
Styling links with CSS so users know they are clickable
By default, browsers display hyperlinks in blue with an underline. Developers often change this appearance using CSS to match the website's design. Common styling includes changing the color, removing the underline, adding a background, or changing the appearance when you hover over the link.
A typical CSS rule for links looks like this: a { color: #0066cc; text-decoration: none; }. This removes the underline and sets the color to a specific shade of blue. Developers also use the :hover pseudo-class to change how a link looks when your mouse is over it: a:hover { color: #004499; }. This visual feedback tells users the link is interactive.
Developers must be careful not to make links invisible or indistinguishable from regular text. If users cannot tell a link is clickable, they will not click it. Good practice is to use color, underline, or a button-like appearance to make links obvious.
The difference between internal and external links
An internal link points to another page on the same website. For example, a link from the home page to the about page uses a relative URL: <a href="about.html">About Us</a>. Internal links keep users on your website and help search engines understand the structure of your site.
An external link points to a page on a different website and uses an absolute URL with the full domain: <a href="https://example.com">Visit Example</a>. When you click an external link, you leave the current website and go to the other one. Developers sometimes add an attribute called target="_blank" to external links, which opens the destination in a new browser tab instead of replacing the current page: <a href="https://example.com" target="_blank">Visit Example</a>.
Special link types: email and phone
Hyperlinks are not limited to web pages. You can create a link that opens an email composer by using the mailto: protocol: <a href="mailto:contact@example.com">Email Us</a>. When someone clicks this link, their default email program opens with the address already filled in.
Similarly, you can create a clickable phone number using the tel: protocol: <a href="tel:+1-555-0123">Call Us</a>. On mobile devices, clicking this link opens the phone dialer with the number ready to call. On desktop computers, the behavior depends on what software is installed, but the link is still valid code.
Why hyperlinks matter for web structure and navigation
Hyperlinks are the foundation of how the web works. They connect pages into a network, allowing users to move between related content. Without hyperlinks, each page would be isolated, and users would have no way to navigate except by typing URLs directly into the address bar.
For developers, hyperlinks are also important for search engine optimization. Search engines follow links to discover pages and understand how a website is organized. The text inside a hyperlink — called anchor text — tells search engines what the destination page is about. Using descriptive anchor text like "Learn about our pricing" is better than generic text like "Click here" because it provides context about where the link goes.
Hyperlinks also affect user experience. A well-organized website with clear, logical links helps users find what they need quickly. Links should be descriptive, visually obvious, and lead to relevant content. When links are confusing or broken, users get frustrated and leave the site.
Frequently Asked Questions
What is the difference between href and the visible link text?
The href is the invisible code that tells the browser where to go. The visible link text is what users see and click on. You can have any text you want as the visible part, but the href must be a valid web address or file path for the link to work.
Can I make a link open in a new tab instead of the current page?
Yes, use the target="_blank" attribute: <a href="page.html" target="_blank">Link Text</a>. This opens the destination in a new browser tab while keeping the original page open. This is common for external links so users do not lose their place on your website.
What happens if an href points to a page that no longer exists?
The browser will display a 404 error page, which means the page was not found. This is called a broken link. Developers should regularly check their links to make sure they still work, especially after moving or deleting pages.
Can I style different links differently on the same page?
Yes, you can use CSS classes or IDs to target specific links. For example, <a href="page.html" class="button-link">Click Me</a> lets you style that link differently from other links using a CSS rule for the button-link class.