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.
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.
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">
Below are the different examples:
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>
Output:
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>The <area> tag with href attribute URLs Example</h1>
<imgsrc width="150" 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></imgsrc>Output:
After Click
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 style="max-width:90%" style="max-width:90%" src="stickman.gif" 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:
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:
hrefin HTML is used to access the web URLs. There tags that allows the href attribute, those are , , and
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 –
The above is the detailed content of href tag in HTML. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
