Links in HTML

Links are found on almost all the websites on the Internet. They are the feature that makes HTML  web pages different from normal pages from a book or a newspaper. In the case of traditional print-based media, we are only able to navigate from one page to another in a linear manner. We cannot go directly from the first chapter to the last without turning the pages in between. But in the case of web pages, we have hyperlinks that can link to any other page on the web. This feature is what gives the web its name. Since the connection of pages looks like a spider web. The hyper part indicates the non-linear nature of links on the web. A link is normally a text but can be any element like an image or a button.

In order to create our own links, we need to use the <a> tag. The <a> element requires the href attribute. This attribute takes the URL i.e, the web address of the particular web page. By default, most browsers underline the text and give them a blue color.


<a href="http://bluekatanasoft.gq">The best place on the internet about software.</a>

Internal page links

Sometimes we may want to link to a section of the same page. This is particularly useful when the web page is long and we need to quickly navigate to certain sections. This can be done by using the <a> element. The link would look something like:


<a href="#another-section">Go to another section of this page</a>

This would link to a portion of the page where an element has the id attribute with value another-section. For example:


<h2 id="another-section">Just another section</h2>

On clicking the link the browser will automatically scroll to that section. The value of the attribute id can be anything as long as it matches with the one in <a> element. It is also possible to link to another page’s section by adding the id to the end of the page address. For example:

<a href="http://bluekatanasoft.gq/web-development/html/html-elements-and-tags/#Empty-HTML-elements">Empty HTML elements</a>

Target attribute

The target attribute defines how the link will be opened. We can control how the links open in the browser using this attribute.

_self(default)
Use this to open in the same window or tab as the current web page.
_blank
Use this to open in a new window or tab.
_blank
Use this to open in a new window or tab.
_parent
Use this to open in a the parent window or tab of current page.
_top
Use this to open in top most window or tab.
frame_name
Use this to open the link in a window or tab named as frame_name.
<a href="http://bluekatanasoft.gq" target="_blank">Open in a new page</a>