HTML Links | Colors on Text Links and How to Make a Bookmark in HTML

How to Create Links in HTML | HTML link color | Bookmark links in HTML with Examples

HTML Links are the Super Highway of the Internet. It is not wrong to say this. Because only through Hyperlinks we can search and access the information available on WWW – World Wide Web.

And in this lesson, we will give you complete information about HTML Links, colours and how to make bookmarks in HTML. 

For convenience, we have divided this lesson into several small parts. Whose names are listed below:

{tocify} $title={Table of Contents}

Introduction to HTML Links

The full name of HTML is Hypertext Markup Language. In which Hypertext defines HTML Links.

Links is just a simple word, but it is converted into Hyperlink by Anchor Element.

When you move the mouse cursor over an HTML link, the cursor turns into a hand. This speciality identifies links.

You will find links on almost every webpage. By clicking on it, you go from one page to another.

Note: A link does not have to be text. A link does not have to be text. A link can be a photo or any different HTML element!

Example: 

OK, now we also learn to create HTML Links.

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href=”URL”> Link Text </a>{codeBox}

An essential attribute of the <a> element is the href attribute, which indicates the link's destination. The link text is the part that will be visible to the reader.

Clicking on the link text will transfer the reader to the specified URL address.

Anything between the opening <a> tag and the closing </a> tag becomes part of the link that the user notices and clicks in a browser. A link or hyperlink could be a word, group of words or image.

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.

Information About Some Importance Attributes Used With Anchor Element

Both Global Attributes and Event Attributes can be used with Anchor Elements.

Apart from these, there are some Special and Commonly Used Attributes which are used with Anchor elements. which are explained below:

1. href: This attribute is used to define the destination address of the link. This means the URL of a particular page is defined.

2. target: This attribute tells the browser where to open the Destination Address. The Target Attribute can have the following values:

• _blank - This value opens the URL in a New Window / Tab.
• _self - By this, the URL opens in the same Window/Tab on which you have clicked on that URL.
• _parent - By this value, the URL will be opened in Parent Frame.
• _top - Opens the document in the entire body of the window

3. hreflang: Hreflang is an HTML attribute used to determine a webpage's language and geographical targeting. Suppose you have multiple versions of the same page in different languages. 

In that case, you can use the hreflang tag to tell search engines like Google about these variations. 

This helps them to serve the correct version to their users.

4. type: This attribute tells the Internal Media Type that this type of file is associated with this URL.

5. download: This attribute tells the browser that any downloadable content from this URL is linked.

6. mailto: Email Address is defined by this attribute. When you click on this type of link, you directly reach the Mail Software.

7. title: Link is defined with this attribute. This title appears when you move the mouse over a link.

How to create link in HTML?

To understand how a link is made, first of all, create two or three HTML pages, save them in a folder, open any page in notepad (or any code editor), and practice making links in it as given below.

To create a link, we need anchor tag <a>, an example of which can be seen below:

Example:

<a href="contact.html" title="visit my contact page" target="_self">Contact </a>

Attributes of <a> tag

Anchor tag (<a>) mainly uses three attributes which are as follows:

1. href: This attribute tells the target page, i.e. the URL or address of which page will open on clicking the link.

Above I created a link on clicking which will open the contact page, wrote href="contact.html" because the page with contact.html is at the exact location (folder). 

Note: If you want to link the page of another website, then you have to write its full address.

2. title: When the visitor hovers over our link, that is, when the cursor comes over the link, then what we have written in the title will be shown.

3. target: With this, we tell the browser where our link will open. The link will open in the same browser window or tab if you do not use it. It can have some other values, which are as follows:

•   _blank: This opens the page in a new tab or window (depending on your browser setting).

•   _parent: This was used in the old days when frames were used, but now it is of little use.

Absolute URLs vs. Relative URLs

An absolute URL is a URL that includes every part of the URL format, such as protocol, hostname, and path of the document, 

e.g., https://www.google.com/, https://www.example.com/form.php, etc. While;

Relative URLs are page-relative paths, 

e.g., contact.html, images/tree.png, and so on. 

Note: A relative URL never includes the http:// or https:// prefix.

Example: 

<h3>Absolute URLs</h3>

<p> <a href="https://www.bing.com/">Bing</a></p>

<p> <a href="https://www.google.com/">Google</a></p>

<h3>Relative URLs</h3>

<p> <a href="html_images.html/">HTML Images</a></p>

<p> <a href="/css/default.html/">CSS Tutorial</a></p>{codeBox}

How to use an image as a link in HTML

To use an image as a link, just place the <img> tag inside the <a> tag:

Syntax

Following is the syntax to add an image as a link on the web page.

<a href="link address"><img src="image destination"></a>{codeBox}

Example

Following is the example program to make the image as a link.

<!DOCTYPE html>

<html>

<body>

<h2>Image as a Link</h2>

<p>The image below is a link. Try to click on it.</p>

<a href="default.html"><img src="https://www.google.com/logos" alt="HTML image"></a>

</body>

</html>{codeBox}

Making a clickable link to an email address

Use mailto: inside the href attribute to make a link that opens the user's email program (to allow them send a new email):

Example:

<a href="mailto:example@gmail.com">Send email</a>

create an HTML button that acts like a link

One way is to wrap your <button> tag in a <a> tag:

<a href='https://www.google.com/'><button>Link To google Homepage</button></a>{codeBox}

This will convert your entire button into a link.

Turn a Link Into a Button with CSS:

HTML code:

<a href="https://google.com/" target="_blank" class="button btn color">Colored Button</a>{codeBox}

CSS code:

.a.button{color:#fff;text-decoration:none}

.a.color{color:#fff}

.button{background:#10b981;display:inline-block;height:36px;font-family:var(--body-font);font-size:14px;font-weight:400;line-height:36px;text-align:center;cursor:pointer;padding:0 20px;margin:0 6px 8px 0}

.btn{position:relative;border-radius:6px}{codeBox}

Type of HTML Links 

There are many types of links, some of which are given below:

1. Local Link
2. Internal Link
3. External Link
4. Download Link
5. E-mail Link

1. Local link:

There is not always the case when you have to redirect your user to a page that’s only available on the Internet, and there are many cases when you have to redirect or link a page from your Local Machine (Computer) or a file that available on the exact Location/Folder/Directory.

We can link a page without giving the full path in local web page cases. Simply the file name and follow the file Extension (.html)

Pages available on the same server, directory, folder or same location are linked. Like:

<a href= "contact.html" title= "visit my contact page"> Contact </a>{codeBox}

Here our page contact.html is saved in the same folder.

2. Internal link:

An internal link is used in the HTML page to navigate correctly on the webpage. If you want to go to any specific location on the same page by clicking on a link, you can make an internal link on the webpage. 

<a> tag is used for link creation in HTML pages.

Syntax:

<a href= “www.google.com”> my new link </a>{codeBox}

Here “href” contain the location name where the link will navigate us when we click on “my new link”. 

The location is given a name for reference, and the name contains “www.google.com” at the time of creating a link.

3. External link:

An external link is used to interconnect two HTML web pages. When you want to navigate to some other page or any other URL by clicking on a link on the webpage, external links are created. 

An external link can be created using an HTML web page anchor tag.

Syntax:

<a href= “linkname.html or URL”> text to be written on link </a>{codeBox}

Here linkname.html or URL is the name of the webpage or address where the link will navigate on a click.

4. Download Link

It is similar to a local and external link. The only difference is that in place of the URL of the page, the address of a file is inserted so that clicking on the link starts downloading that file.

Example:

<a href= "file_url.zip"> Click here to download this file </a>{codeBox}

5. E-mail Link

We can create an email link in an HTML webpage. If anyone clicks on that link, it will allow them to send an email to the specified email address. This link can be created through an anchor tag in HTML.

Syntax:

<a href= “mailto: your e-mail id”> Send email </a>{codeBox}

Example:

<! DOCTYPE html>

<html>

<head>

<title> Email link Example</title>

</head>

<body>

<h3> This page creates an emailing link in html webpage</h3>

<br>

<a href= “mailto: your e-mail id”> Send email </a>

</body>

</html>{codeBox}

Importance of HTML Links

The Internet is incomplete without links. Links only demonstrate the importance of the Internet. Below is information about some uses of HTML Links. 

From which you can guess the importance of HTML Links:

• HTML Link is used to linking one document to another document.

• Easy navigation is also made available to the users only through links.

• External Links, which are also called Backlinks in the world of SEO - Search Engine Optimization. This is an essential part of SEO.

HTML Links - Different Colors

An HTML link is shown in various colors depending on whether it has been visited, is unvisited, or is active.

HTML Link Colors

By default, a link will seem like this (in all browsers):

• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.

You can modify the link condition colors by using CSS:

Example: 

Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. 

An active link will be yellow and underlined. In addition, when mousing over a link (a:hover), it will become red and underlined:

<style>

a:link {

  color: green;

  background-color: transparent;

  text-decoration: none;

}

a:visited {

  color: pink;

  background-color: transparent;

  text-decoration: none;

}

a:hover {

  color: red;

  background-color: transparent;

  text-decoration: underline;

}

a:active {

  color: yellow;

  background-color: transparent;

  text-decoration: underline;

}

</style>{codeBox}

HTML Links - Create Bookmarks

Bookmarks can be helpful if a web page is very long.

To make a bookmark - first, create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

Example:

First, create a bookmark with the id attribute:

<h2 id="tips">Useful Tips Section</h2>{codeBox}

Then, add a link to the bookmark ("Useful Tips Section") from within the same page:

<a href="#tips">Visit the Useful Tips Section</a>{codeBox}

Or, add a link to the bookmark ("Useful Tips Section") from another page:

Example:

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>{codeBox}

Note:

• Use the id attribute (id="value") to define bookmarks in a page
• Use the href attribute (href="#value") to link to the bookmark

Conclusion:

Friends, according to my expertise, I have written complete information to help you on “HTML Links | Colors on Text Links and How to Make a Bookmark in HTML.” If this post is favourable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.