Summary
Hyperlinks connect Web pages, or data items, to one another. In HTML, anchor elements define the hyperlinks you see when you browse the Web. An anchor can create a link from a part of a Web page, such as a text string or image, to another site, page or even a particular point within a page.
In depth
When you browse the Web, you use hyperlinks to click from one site to another, between pages in the same site and between parts of the same page. Web browsers typically present hyperlinks in a standard way, for example by displaying text links underlined and in a blue color, changing to purple if the location has been visited by the user before. However, a site may use CSS code to alter this style.
To create a hyperlink in HTML, you use an anchor (<a>) element:
<a href="contact.html">contact</a>
The anchor element can include various attributes. Most hyperlinks use the href attribute to indicate the destination linked to. The href attribute value can be the address for a website, the location of a particular page or even a section within a page.
In the example above, the href indicates a relative URI. This means that the destination location is being described relative to the location of the hyperlink itself. For example, you could use the above href if the contact.html page is located in the same directory as the page the anchor is in. If the page was in a subdirectory (e.g. named "help") in the same directory as the page containing the anchor, the link might be structured as follows:
<a href="help/contact.html">contact</a>
To include a link to another site, the full address is specified using a URL:
<a href="https://developer.mozilla.org">MDN</a>
The link can indicate a particular page on (or section of) another site, by including the path to the page or section:
<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web">Get started with the Web</a>
Hyperlinks also connect to particular points within pages. This allows anchors to link between the different parts of a single page:
<a href="#contact">contact</a>
The destination of this link would be a section in the same page as the anchor, with the href value as its id:
<div id="contact">Contact us...</div>
Anchors could also link to this destination from another page, by appending the id to the URL:
<a href="https://example.org/page#contact">Contact them...</a>
A real example:
<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web#Skills_needed">Web skills</a>
You may see examples of sites where the name attribute is used to create an anchor inside a page, but in HTML5 the id attribute is used.
So far the hyperlinks we have seen use a section of text as the content of the anchor element (e.g. "contact"). The content of an anchor is whatever the user clicks on to visit the place indicated by the href attribute. This clickable object can be another media type or Web page item, but most commonly will be either text or an image:
<a href="contact.html"><img src="contact.png" alt="contact" /></a>
When the user hovers over a hyperlink in a Web page, the browser will often display the href value and the cursor appearance will typically change to indicate that the item is a clickable link.
Anchors can include lots of optional attributes, such as target, which indicates where the hyperlink destination should be opened, for example in a new tab.
The hyperlink is one of the fundamental building blocks of the Web, since it creates connections between sites, pages and specific data items. The ability of users to click between the chunks of information on the Web makes the vast amount of data available easier to navigate.