Lesson: HTML Links

A link is an HTML element that allows users to navigation from web page to web page. The link element is defined by the letter a. The attribute href is used to define the destination page. To add a link to your web page, you use <a href=”www.example.com”> Some Content </a>. In the example below, the content is “Click Me!” and the link is “https://www.instagram.com”. The browser does not display the tags (<a> and </a>) to the user but only displays the content (“Click Me!”) in this example.

A link can be a clickable text, a clickable image or a group of clickable items (more details in next lessons).

1. Link Features

HTML links will display default behavior in all browsers.

• A link that was never pressed before is underlined and colored in blue
• A link that was visited in the past is underlined and colored in purple

To see the difference in action, try to press on this link and notice how it starts in blue and turns purple when you referesh the page.

2. Link Path

A link path should be defined in the href attribute as disccused in the previous section. A path can either be absolute (full web address with https://www….) or relative (without https://www…). In most cases, an absolute path is used to link to resources provided by other websites whereas relative path is used to link pages within the same website. An example of absolute and relative path is provided below.

3. Link Types

A link can point to another website, a page within the same website, a pdf document, an image, a video, a sound file or any other resource. Below are some examples that you can try. We hope you like cats…

3. Links Behavior with Target

By default, when clicking on a link, the target page will open in the current browser window. This causes the previously opened page to be replaced with the new page. The target attribute can change this behavior and defined where to open the new page. The target attribute can be one of the following.

• _self which opens the document in the same window/tab when link is clicked (default) – Click to test
• _blank which opens the document in a new window/tab – Click to test
• _parent which opens the document in the parent frame
• _top which opens the document in the full body of the window

4. Links for Contact

A link can also be used to point to an email address, a phone number or a whatsapp contact. To point to an email addresses, a link should contain the mailto: keyword followed by the email address as demonstrated below. By clicking on the link, your defaul email client will launch and write the email address as the recipeint.

To point to a phone number, the link should contain the tel: keyword followed the phone number as demonstrated below. By clicking on the link, your default telephone application will launch and automatically inputs the phone number to call. This usually performs better on mobile phones and international phone numbers are prefered.

To point to a whatsapp contact, the link should contain https://wa.me/ followed by the international number as demonstred below. By clicking on the link, you will be redirected to the whatsapp app installed on your device.

5. Link Title

The title attribute gives additional information about the link in a tooltip text that appears when the mouse is placed over the link. You can try this behavior on the following link. An example code for a link’s title is provided below.

5. Putting it all Together

The code above will generate the output below on any web browser.

5. HTML Links Practice

Time to put yourself to test with these HTML Brealine practice exercises.

5. It’s Good to Know!

• list of html elements
• list of IDEs