Ouvrir le lien dans un nouvel onglet en HTML

Sushant Poudel 19 février 2023
Ouvrir le lien dans un nouvel onglet en HTML

Cet article discutera d’une méthode pour ouvrir un lien dans un nouvel onglet en HTML.

Utilisez target="_blank" pour ouvrir le lien dans un nouvel onglet en HTML

Nous pouvons utiliser l’attribut target dans la balise d’ancrage pour ouvrir un lien dans un nouvel onglet en HTML. La valeur _blank dans l’attribut target de la balise d’ancrage ouvre le lien dans le nouvel onglet. La balise d’ancrage <a> définit un lien hypertexte permettant de relier une page à une autre. L’attribut href définit l’URL de la page vers laquelle vous souhaitez créer un lien. L’option target="_blank" bascule le lien vers le nouvel onglet. La valeur _blank informe le navigateur d’ouvrir le lien dans un nouvel onglet, en fonction des paramètres du navigateur. Nous pouvons ajouter l’attribut rel dans la balise d’ancrage avec la valeur noopener noreferrer par mesure de sécurité. Le rel=" noopener noreferrer" a pour but d’empêcher l’onglet nouvellement ouvert de pouvoir modifier malicieusement l’onglet d’origine. Cependant, les navigateurs modernes définissent implicitement l’option lorsque nous utilisons l’option target= "_blank".

Par exemple, à l’intérieur du corps HTML, ouvrez l’onglet d’ancrage <a> et tapez l’attribut href à l’intérieur. Écrivez l’URL https://www.facebook.com/ comme valeur de l’attribut href. Ensuite, écrivez target comme attribut de la balise d’ancrage et donnez-lui une valeur _blank. Après cela, écrivez l’attribut rel avec la valeur noopener noreferrer. Écrivez ensuite le texte Link entre la balise d’ancrage. Enfin, n’oubliez pas de fermer la balise d’ancrage suivie de la balise body.

L’exemple ci-dessous ouvre un nouvel onglet lorsque nous cliquons sur le mot Link. Il ouvre la page Facebook lorsque nous cliquons sur le lien.

Exemple de code :

<body>
    <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer" >
        Link
    </a>
</body>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn