How to Link Web Resources in HTML

 | 

Links in HTML allow users to seamlessly surf from one page to another. Basically, a link, otherwise called a hyperlink is a connection from one web resource to another.


Links in HTML

Links in HTML enable users to traverse between pages easily. Every link usually has two ends, also called anchors. The link starts at a source anchor and points to a destination anchor which could be an image, an audio file, or an element within the document itself.

Syntax

Links are defined in HTML using <a> tag. Note that a hyperlink can point to any web resource which could be a web document such as a HTML file or an audio/ video file, image file, etc.

The syntax for a HTML link is <a href="url">link text</a>. URL is the acronym for Uniform Resource Locator. It defines the address of the web resource.

Sample Code

<a href="https://google.com/">Google</a>
<a href="/static/logo.png">Logo</a>

Output

HTML Link Colors

By default in HTML, links appear as below in most of the browsers —

  1. An unvisited link is underlined and blue.
  2. A visited link is underlined and purple.
  3. An active link is underlined and red.

Note that you can also overwrite these styles using CSS. You can learn much about styling links here.

Setting Targets for HTML Links

Targets of HTML links define where to open the linked web document. They are defined using the target attribute.

html links

Attribute ValueDescription
_blankOpens the linked document in a new window or tab
_parentOpens the linked document in the parent window
_selfOpens the linked document in the same window or tab as the source document
_topOpens the linked document in the full body of the window

Note that the target attribute value _self is default and hence there is no need to explicitly specify this value everytime.

Sample Code

<a href="https://bing.com/" target="_blank">Bing</a>
<a href="https://google.com/" target="_top">Google</a>

Output

Note that the target attribute value _top is useful to break out of the iframe and show the target page in a new full browser window.

Creating Bookmark Anchors

Bookmark anchors allow users to jump to specific sections of a web page. Bookmarks can be especially helpful if your web page is long.

Creating bookmark anchors is a two step process —

Step 1: To create a bookmark, add id attribute to the element where you want to jump.

Step 2: Later, to create a bookmark link, use that id attribute value preceded by the hash sign # as the value of the href attribute of the <a> tag.

Sample Code

<a href="#conclusion">Jump to conclusion</a>

<h2 id="conclusion">Conclusion</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Note that you can jump to sections of another page other than the source page by specifying the url along with the # followed by id of the bookmark — <a href="/home.html#conclusion">Jump to conclusion</a>

Creating Download Links

Download links allow users to download files from the server to the local machine. Download links are created in the same fashion as navigation text links, instead pointing to the files which are intended to be downloaded.

Sample Code

<a href="/static/test.zip">Download ZIP file</a>
<a href="/static/test.pdf">Download PDF file</a>
<a href="/static/test.jpg">Download image file</a>

Note that the files such as images/ videos and PDFs open in the browser itself when tried to download. Further you have to save it to the disk manually.

Files such as ZIP files are directly downloaded to the disk when clicked on the download link.

This depends on the browser compatibility and hence, differs from browser to browser.

Comments