La etiqueta <a> (etiqueta de anclaje) en HTML se utiliza para crear un hipervínculo en la página web. Este hipervínculo se utiliza para vincular la página web a otras páginas web o alguna sección de la misma página web. Se utiliza para proporcionar una referencia absoluta o una referencia relativa como su valor «href».
Sintaxis:
<a href = "link"> Link Name </a>
Atributo: la etiqueta de anclaje contiene muchos atributos que se enumeran a continuación.
- Atributo de juego de caracteres HTML <a> : este atributo se utiliza para especificar el juego de caracteres. No es compatible con HTML 5.
- Atributo de descarga HTML <a> : se utiliza para especificar el enlace de destino para descargar cuando el usuario hace clic.
- Atributo HTML <a> hreflang : Se utiliza para especificar el idioma del documento vinculado.
- Atributo de medios HTML <a> : se utiliza para especificar los medios vinculados.
- Atributo HTML <a> coords: Se utiliza para especificar la coordenada de los enlaces. No es compatible con HTML 5.
- Atributo de nombre HTML <a> : Se utiliza para especificar el nombre del ancla. No es compatible con HTML 5, puede usar el atributo de identificación global en su lugar.
- Atributo HTML <a> rel : se utiliza para especificar la relación entre el documento actual y el documento vinculado.
- Atributo de forma HTML <a> : se utiliza para especificar la forma del enlace. No es compatible con HTML 5.
- Atributo de tipo HTML <a> : Se utiliza para especificar el tipo de enlaces.
- HTML <a> target Attribute : Especifica el enlace de destino.
- Atributo HTML <a> rev : Se utiliza para especificar la relación entre el documento vinculado y el documento actual. No es compatible con HTML 5.
Ejemplo 1: En este ejemplo, la página del Tutorial HTML de GeeksforGeeks se abrirá cuando haga clic en el enlace del Tutorial HTML de GeeksforGeeks.
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome to GeeksforGeeks HTML Tutorial</h2> <a href="https://www.geeksforgeeks.org/html-tutorials/"> GeeksforGeeks HTML Tutorial </a> </body> </html>
Producción:
Etiqueta HTML <a>
Ejemplo 2: En este ejemplo, simplemente redirigimos de GeeksforGeeks a la página de Geeksforgeeks.
HTML
<!DOCTYPE html> <html> <body> <h1> Welcome to <a href="https://www.geeksforgeeks.org/"> GeeksforGeeks </a> </h1> <h2>This is anchor Tag</h2> </body> </html>
Producción:
Redirigir el texto vinculado al sitio usando la etiqueta <a>
Ejemplo 3: En este ejemplo, usaremos una imagen para redirigir a la página de Geeksforgeeks.
HTML
<!DOCTYPE html> <html> <body> <p>Click on the image to open web page.</p> <!-- anchor tag starts here --> <a href="https://www.geeksforgeeks.org/"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/gfg1-11.png" width="300" height="250" /> </a> <!-- anchor tag ends here --> </body> </html>
Producción:
Redirigir la imagen vinculada al sitio web usando la etiqueta HTML <a>
Ejemplo 4: en este ejemplo, vemos cómo se puede usar una etiqueta de anclaje para vincular diferentes secciones en la misma página web usando el atributo href y el selector de id .
HTML
<!DOCTYPE html> <html> <head> <title>Example 4</title> </head> <body> <div class="nav"> <p>GeeksforGeeks</p> <ul> <li><a href="#section1" class="btn">Section 1</a></li> <li><a href="#section2" class="btn">Section 2</a></li> <li><a href="#section3" class="btn">Section 3</a></li> <li><a href="#section4" class="btn">Section 4</a></li> <li><a href="#section5" class="btn">Section 5</a></li> <li><a href="#section6" class="btn">Section 6</a></li> <li><a href="#section7" class="btn">Section 7</a></li> <li><a href="#section8" class="btn">Section 8</a></li> <li><a href="#section9" class="btn">Section 9</a></li> <li><a href="#section10" class="btn">Section 10</a></li> </ul> </div> <div class="sections" id="section1"> Section 1 </div> <div class="sections" id="section2"> Section 2 </div> <div class="sections" id="section3"> Section 3 </div> <div class="sections" id="section4"> Section 4 </div> <div class="sections" id="section5"> Section 5 </div> <div class="sections" id="section6"> Section 6 </div> <div class="sections" id="section7"> Section 7 </div> <div class="sections" id="section8"> Section 8 </div> <div class="sections" id="section9"> Section 9 </div> <div class="sections" id="section10"> Section 10 </div> </body> </html>
CSS
/* Write CSS Here */
* {
margin: 0px;
padding: 0px;
}
.nav {
height: 250px;
width: 250px;
text-align: center;
background-color: green;
color: whitesmoke;
font-size: 18px;
}
p {
font-size: 28px;
}
ul {
list-style: none;
}
a:hover {
color: whitesmoke;
}
.sections {
width: 12vw;
height: 15vh;
background-color: #7EC8E3;
font-size: 25px;
color: white;
text-align: center;
margin: 8px 5px;
}
.sections:nth-of-type(2n) {
background-color: #FB4570;
}
Producción :
Redirigir a otra sección en la misma página
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
- Borde de Microsoft
Publicación traducida automáticamente
Artículo escrito por shivangsharma15 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA