HTML Links

HTML links or hyperlinks are some text and images which when clicked can take us to some other web page document. Following is an example of hyperlink text.

Click Me! To check HTML Introduction

Anchor Tags

We create HTML links using the anchor tag <a>. The above link to HTML Introduction tutorial was created by writing the following HTML code.

<a href="https://dyclassroom.com/html/html-introduction">Click Me! To check HTML Introduction</a>

The href attribute of the anchor tag is set to the url of the web page we want to redirect.

target Attribute

The anchor tag has an attribute named target which tells us where the linked document will be opened. Following are some of the values of the target attribute.

_blank This will open the linked web page document in a new window.

<a href="/html/html-introduction" target="_blank">Click Me! To check HTML Introduction</a>

Output _blank

Click Me! To check HTML Introduction

_self This will open the linked web page document in the same page.

<a href="/html/html-introduction" target="_self">Click Me! To check HTML Introduction</a>

Output _self

Click Me! To check HTML Introduction

_parent This will open the linked web page document in the parennt frame.

<a href="/html/html-introduction" target="_parent">Click Me! To check HTML Introduction</a>

Output _parent

Click Me! To check HTML Introduction

_top This will open the linked web page document in the full body of the window.

<a href="/html/html-introduction" target="_top">Click Me! To check HTML Introduction</a>

Output _top

Click Me! To check HTML Introduction

Scroll To Top - section link

We can use the anchor tag to create links which on clicked will take us to different sections of the web page. A common example is the "Scroll to Top" link in web pages which users click to scroll back to the top after they have scrolled down too far in the document.

To create section links we need two anchor tags. The first tag is placed in the section where we want to take the user to. The first anchor has the attribute name set to some value which is used in the second tag.

The second anchor is the link that when clicked takes the user to the targeted section. The attribute href of this anchor has #name where name is equal to the value used in the first anchor.

Example

<h1>Top of the page</h1>
<a name="top"></a>

<p>Some text in this paragraph...
</p>

<a href="#top">Scroll To Top</a>

Links to download files

We can create links to download files by setting the href attribute of the anchor tag to the URL of the file.

<a href="http://www.example.com/download/doc.pdf">Download PDF</a>

We can use this to create download links for files like PDF, CSV, DOC, PSD etc.

Image Link

We can also make an image link by enclosing the image tag <img> inside the anchor tag <a>.

<a href="https://dyclassroom.com">
	<img alt="Brand" src="https://dyclassroom.com/image/dyclassroom-logo-black-311x48.png">
</a>

Output