HTML href Attribute

HTML href Attribute: It is used to specify the URL of the linked resource. This can be applied to <a> , <link>, <area>, <base> elements. When it is used with <a> and <area>element it specifies the URL of the page the link goes to. When the href attribute is used with <base> element it specifies the base URL for all relative URLs on a page.



HTML href Attribute

If the <link> element is used along with the href attribute it defines the location of the external resource.

Syntax: <a href=”URL”>

Browser Support

This attribute is supported by the following browsers:

  • Chrome
  • Safari
  • Opera
  • Firefox
  • Internet Explorer

Example: for Using <a> Element

<!DOCTYPE html>
<html>
<body>
<p>An absolute URL: <a href="https://freshersnow.com/">Freshersnow.com</a></p>
<p>A relative URL: <a href="https://tutorials.freshersnow.com/">The a tag</a></p>
</body>
</html>

Output:

An absolute URL: Freshersnow
A relative URL: The a tag

Example: for Using <area> Element

<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" hreflang="en">
</map>
</body>
</html>

Output:

HTML href attribute

 Example: for Using <base> Element

<!DOCTYPE html>
<html>
<head>
  <base href="https://tutorials.freshersnow.com/">
</head>
<body>
<p><img src="stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "https://tutorials.freshersnow.com/".</p>
</body>
</html>

Output:

HTML base element

 

Example: for Using <link> Element

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello World!!</p>
</body>
</html>

Output:

HTML link element