Hyperlink Basics
In HTML, links are made with the "anchor" or "a" tag.
The content inside the anchor tag is the clickable text of the link.
The HREF attribute specifies where the link should lead.
The optional TARGET attribute can help show the new resource in a specific part of the browser.
Sample:
<a href="http://sample.com/url/to/resource.html" target="_blank">Click Here</a>
The rest of this page will discuss different types of links that you can achieve with
a variety of possible values in the HREF attribute.
Basic Link Types
Absolute v Relative: Absolute paths in the HREF attribute are URLs that
show the full address of the resource. This will usually start with http://domain.com,
https://domain.com, or //domain.com. Relative paths are URLs that compare
with the current location. If a page at http://domain.com/somewhere.html has a relative link
with an HREF of elsewhere.html, then clicking on that link will direct the user to
http://domain.com/elsewhere.html.
Here are more examples:
| Absolute | Relative |
|---|
http://google.com
http://www.w3schools.com/html/
https://sample.com/folder/file.html
//sample.com/folder/subfolder/file.html
http://example.com/images/picture.jpg
|
file-on-same-level.html
subfolder/file.html
../folder-at-parent-level/file.html
/file-at-site-root-level.html
/rootfolder/file.html
|
Internal v External:
Links to resources on the same domain are known as "internal" because they typically
belong to the same web site. Remember, a web site is a collection of related web pages
on the same domain. External links, on the other hand, lead to resources on other web sites,
typically on different domains or sub-domains. External links must have absolute paths,
and they are good candidates for using the target="_blank" attribute to open in a new tab/window.
Special Link Types
Bookmark Anchors: These hyperlinks can help users navigate within a page, using the hashtag (#)
syntax and matching the ID attribute of the elements. For example, a Frequently Asked Questions page might
have a DIV like this one: <div id="faq1"> that holds their first question and answer,
and then also a link at the top like this one: <a href="#faq1">1. Sample Question?</a>
that jumps the user directly to the relevant question.
Application Schemes: By leading the HREF attribute with mailto: or tel:,
you can direct a browser to launch a different program to handle the link. The mailto:
scheme will open the default email application, and the tel: scheme can open the phone
app on mobile devices or a calling program like Skype on desktop devices. Other applications schemes may be available
for advanced use cases--if you wish to launch a different program from the web browser,
application scheme URLs is the topic to begin your research.