href tag in HTML

HTML href is abbreviated as hypertext reference. This is the attribute that is available inside the anchor () tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.

Real-time Example: Day to day life, we have accessed so many websites. Have you ever think about how would we access this website url? Because of the href tag, we can access any website URLs. We simply required a website within this double quotes (href=”website”) of the href attribute.

How Does href Attribute Work in HTML?

HTML href attribute works based on which href tag we are using. All available href tags purpose is the same for accessing web URLs, but there is a slight difference.

There are 4 tags that allows the href attribute within it. They are:

1. : This tag is used for specifying the URL of the page where the link has to go within the href attribute.

Syntax:

<a href="URL%20link"></a>

2. : This tag is used for specifying the URL of the page where the link has to go within the href attribute.

Syntax:

<area href="URL%20link">

 3. : This tag is used for specifying the base URL of all relative page URLs where the link has to go within the href attribute.

Syntax:

<base href="Base%20URL%20link">

 4. : This tag is used for specifying external file location like styles.css, javascript.js etc. within href attribute.

Syntax:

<link href="external%20link">

Examples to Implement href tag in HTML

Below are the different examples:

Example #1 – tag with href Attribute

Code:

<title>href attribute</title>

<!--CSS code-->
<style>
p
{
color: green;
border: 2px solid brown;
font-size: 22px;
}
h1
{
color: blue;
text-align: center;
}
</style>


<h1>The <a> tag with href attribute introduction</a>
</h1>
<p>HTML href is abbreviated as hypertext reference. This is the attribute which is available inside the anchor (<a>) tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.</a></p>
<p>Real time Example: Day to day life we have accessed so many websites. Have you ever think about how would we access this website URLs? Because of href tag we can access any website URLs. We simply required website within this double quotes (href="website") of href attribute.
</p>
<h1>The <a> tag with href attribute URLs</a>
</h1>

• Duplicate Checker
• EDUCBA
• Google
• Gmail

Output:

Example #2 – tag with href Attribute

Code:

<title>href attribute</title>

<!--CSS code-->
<style>
p
{
color: fuchsia;
border: 2px solid orange;
font-size: 22px;
}
h1
{
color: red;
text-align: center;
}
</style>


<h1>The <a> tag with href attribute introduction</a>
</h1>
<p>HTML href is abbreviated as hypertext reference. This is the attribute which is available inside the anchor (<a>) tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.</a></p>
<p>Real time Example: Day to day life we have accessed so many websites. Have you ever think about how would we access this website URLs? Because of href tag we can access any website URLs. We simply required website within this double quotes (href="website") of href attribute.
</p>
<h1 id="The-area-tag-with-href-attribute-URLs-Example">The <area> tag with href attribute URLs Example</h1>
<img src="/static/imghw/default1.png" data-src="planets.gif" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="href tag in HTML" usemap="#educba">
<map name="educba">
<!--Click on this coordinate gives you that images-->
<area shape="rect" coords="0,0,81,125" href="sun.htm">
<area shape="circle" coords="91,59,4" href="mercur.htm">
<area shape="circle" coords="125,59,9" href="venus.htm">

</map>

Output:

After Click

Example #3 – tag with href Attribute

Code:

<title>href attribute</title>

<!--From this path image is loaded-->
<base href="https://www.w3schools.com/images/">
<!--CSS code-->
<style>
p
{
color: navy;
border: 2px solid blue;
font-size: 22px;
}
h1
{
color: fuchsia;
text-align: center;
}
</style>


<h1>The <a> tag with href attribute introduction</a>
</h1>
<p><img  src="/static/imghw/default1.png" data-src="stickman.gif" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="href tag in HTML" > HTML href is abbreviated as hypertext reference. This is the attribute which is available inside the anchor (<a>) tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.</a></p>
<p>Real time Example: Day to day life we have accessed so many websites. Have you ever think about how would we access this website URLs? Because of href tag we can access any website URLs. We simply required website within this double quotes (href="website") of href attribute.
</p>

Output:

Example #4 – tag with href Attribute

Code:

<title>href attribute</title>

<!--Including external CSS styles file with link tag-->
<link rel="stylesheet" type="text/css" href="styles.css">


<h1>The <a> tag with href attribute introduction</a>
</h1>
<p>HTML href is abbreviated as hypertext reference. This is the attribute which is available inside the anchor (<a>) tag. This href is used for website URLs like www.google.com, www.gmail.com, www.facebook.com etc.</a></p>
<p>Real time Example: Day to day life we have accessed so many websites. Have you ever think about how would we access this website URLs? Because of href tag we can access any website URLs. We simply required website within this double quotes (href="website") of href attribute.
</p>

CSS Code: styles.css

p
{
color: red;
border: 2px solid green;
font-size: 22px;
}
h1
{
color: orange;
text-align: center;
}

Output:

Conclusion

hrefin HTML is used to access the web URLs. There tags that allows the href attribute, those are , , and . Most frequently and tags are used.

Recommended Article

This is a guide to the href tag in HTML. Here we discuss the Introduction to href tag in HTML and its Examples along with code implementation and Output. you can also go through our suggested articles to learn more –

1. Top 15 Properties of Span Tag in HTML
2. How div Tag Works in HTML?
3. HTML Search Bar | Examples
4. Canvas Tag in HTML | Examples

The above is the detailed content of href tag in HTML. For more information, please follow other related articles on the PHP Chinese website!