Last Updated on
A hyperlink is a reference in a document to another document. If you click on a hyperlink, the referenced document is loaded.
Hyperlinks are what connect pages and other resource all over the web to each other. They are what makes the web what it is. Without hyperlinks, there would be no web.
You can find hyperlinks in all sorts of places. Mostly they show up in text, but they can also be:
The linked text is called the anchor text for the link. Most of the time, a hyperlink’s anchor text is styled differently than the surrounding text. The standard way of differentiating hyperlinks is to color them blue, but other colors are common too. Hyperlinks are often underlined, or they become underlined when hovered.
On most sites, hyperlinks that lead to websites you have previously visited are colored a slightly different color (such as a darker blue or a purple). This color change is done by your browser, based on your own browsing history — the website itself doesn’t know what pages you have previously visited.
Frequently, a hyperlink’s styling will change slightly when you hover over it:
- It may become underlined.
- If it was already underlined, it might get a second underline or a thinker underline.
- It may change color.
- It may move, wiggle, or bounce.
Also, when you hover over a hyperlink with your mouse, there may be a small “popup” text near the link. The popup text is called a tooltip. The tooltip’s contents are also called the “Title” of the link. The original intention of the tooltip was to display the title of the page that is being linked to. That still occurs, but some people use it for other things — including jokes, extra information, and entertainment.
Frequently Asked Questions
Yes. This is called an image map.
In an image map, different areas of the image are designated as having different URLs. Depending on where you click in the image, you are sent to a different page.
Yes. Every element on a web page can have a specific ID attached to it. This has to be done by the creator of the web page. Usually, not all elements get IDs. It is common to put IDs on headlines of sections, for just this purpose.
If an element has an ID, then you can link to the page and specify the ID in the URL. You just append the hash (or “octothorpe”) sign (
#) and the ID name to the end of the URL. This is how on-page Tables of Contents work, like those you see at the top of Wikipedia pages.
If you want to link to a page this way, you’ll need to know the ID of the element you want to link to. You can do this in Chrome and Firfox browsers very easily:
- Right-click (or two-finger tap) on the element. This brings up a contextual menu.
- Click “Inspect Element”
- In the window of source code that pops up, the element you are looking for should probably be highlighted. You’ll see some code that looks a little like this:
<h2 id="this-is-the-id">This is the on-page text</h2>
You are looking for the text labeled
id. Only copy the string inside the quotation marks — don’t include the quotation marks.
Not all elements will have IDs. If they don’t have one, you can’t link to it (but you can still link to the page). If you control a page, you should be sure that section headlines have IDs.