balise href en HTML

HTML href est abrégé en référence hypertexte. Il s'agit de l'attribut disponible à l'intérieur de la balise d'ancrage (). Ce href est utilisé pour les URL de sites Web tels que www.google.com, www.gmail.com, www.facebook.com etc.

Exemple en temps réel : Dans la vie de tous les jours, nous avons accédé à de nombreux sites Web. Avez-vous déjà réfléchi à la manière dont nous pourrions accéder à l'URL de ce site Web ? Grâce à la balise href, nous pouvons accéder à toutes les URL de sites Web. Nous avions simplement besoin d'un site Web entre ces guillemets doubles (href=”website”) de l'attribut href.

Comment fonctionne l'attribut href en HTML ?

L'attribut HTML href fonctionne en fonction de la balise href que nous utilisons. Toutes les balises href disponibles ont le même objectif pour accéder aux URL Web, mais il existe une légère différence.

Il y a 4 balises qui autorisent l'attribut href en son sein. Ce sont :

1.  : Cette balise est utilisée pour spécifier l'URL de la page où le lien doit aller dans l'attribut href.

Syntaxe :

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

2.  : Cette balise est utilisée pour spécifier l'URL de la page où le lien doit aller dans l'attribut href.

Syntaxe :

<area href="URL%20link">

 3.  : Cette balise est utilisée pour spécifier l'URL de base de toutes les URL de page relatives où le lien doit aller dans l'attribut href.

Syntaxe :

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

 4.  : Cette balise est utilisée pour spécifier l'emplacement d'un fichier externe tel que styles.css, javascript.js, etc. dans l'attribut href.

Syntaxe :

<link href="external%20link">

Exemples d'implémentation de la balise href en HTML

Voici les différents exemples :

Exemple n°1 – balise avec l'attribut href

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

Sortie :

Exemple n°2 – balise avec l'attribut href

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="balise href en 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>

Sortie :

Après le clic

Exemple n°3 – balise avec l'attribut href

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="balise href en 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>

Sortie :

Exemple n°4 – balise avec l'attribut href

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>

Code CSS : styles.css

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

Sortie :

Conclusion

hrefin HTML est utilisé pour accéder aux URL Web. Il existe des balises qui autorisent l'attribut href, ce sont , , et . Le plus souvent et des balises sont utilisées.

Article recommandé

Ceci est un guide de la balise href en HTML. Nous discutons ici de l'introduction à la balise href en HTML et de ses exemples ainsi que de l'implémentation du code et de la sortie. vous pouvez également consulter nos suggestions d’articles pour en savoir plus –

1. Top 15 des propriétés de la balise Span en HTML
2. Comment fonctionne la balise div en HTML ?
3. Barre de recherche HTML | Exemples
4. Balise de toile en HTML | Exemples

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!