Hyperlinks in HTML can be coded a number of different ways for different purposes. Here are a few examples of the ways hyperlinks are used in web pages:
- Hyperlinks to external web sites and web pages, i.e. another web page at a different domain name
- Hyperlinks to internal web pages, i.e. other web pages on the same web site/domain name
- Hyperlinks to different locations on the same web page, i.e. anchors/bookmarks
- Text hyperlinks
- Image hyperlinks
Example: Hyperlinks (External)
Below are examples of hyperlinks to external web sites. The web addresses used are known as absolute addresses or URLs. These must be used for external hyperlinks, but not used for internal hyperlinks.
<p><a href="http://www.google.com/">Google</a></p> <p>Other recommended web sites:</p> <ul> <li><a href="https://www.w3schools.com/">W3Schools</a> <li><a href="http://www.htmldog.com/">HTML Dog</a> <li><a href="https://stackoverflow.com/">Stackoverflow</a> <ul>
Example: Hyperlinks (Internal)
Below are examples of hyperlinks to internal web pages. The web addresses used are known as relative addresses or URLs. These should be used for internal hyperlinks. Not only are they shorter (thereby saving disk space and network bandwidth), but when used the web site and hyperlinks within it become portable, i.e. you could change your web site domain name and the hyperlinks would still work.
These are all examples of absolute addresses
If one plans ot code and program, especially HTML and CSS, being proficient with using relative addresses is important. But, it's a skill not only used in HTML and CSS, but many other languages, e.g. Bash, Python, PowerShell, etc.
Addresses are path to other files saved in the operating system (OS). One must first understand that files and folders are saved in a hierarchical manner wihtin the OS. Therefore, relative addresses can either look for files within the current folder, a sub-folder (or sub-sub, etc. folders, i.e. child folder), or up one folder (i.e. a parent folder). Below are severl examples of relative addresses.
|<a href="services.html">||Look for web page in same folder|
|<a href="services/programming.html">||Look for web page in a sub-folder to the current folder called services|
|<a href="services/programming/basic.html">||Look for web page in a two sub-folders below to the current folder called programming|
|<a href="../aboutus.html">||Look for web page one folder higher/above the current folder|
|<a href="../../aboutus.html">||Look for web page two folders higher/above the current folder|
|<a href="../../customers/listing.html">||Look for web page two folders higher/above the current folder and then down one sub-folder called customers|
|<a href="/listing.html">||Look for web page located in the top most (highest) folder|
|<a href="/customers/listing.html">||Look for web page in a sub-folder off the top most folder called customers|
Example: Anchor/Bookmark Links
Below is an excerpt of the code used to create bookmark anchor links that enable one to navigate within a web page. Run the page below to see it work.
<h1 id="top">HTML Anchors</p></h1> <p><a href="#s3">Go to Section 3</a></p> <h2 id="s2">Section 2</h2> <h2 id="s3">Section 3</h2> <p><a href="#top">Back to top</a></p>