El lenguaje HTML es el componente más básico del desarrollo web. Si es un principiante en el desarrollo web y está aprendiendo sobre HTML, entonces debe haber descubierto las etiquetas » enlace» y » a» . Estas dos entidades <link> y <a> se utilizan para algún tipo de enlace, por lo que si está confundido entre ellas o desea conocer la diferencia real entre ellas, entonces está en el lugar correcto. En este artículo, vamos a diferenciarlos, seguido de la definición real con ejemplos de ambos.
Etiqueta <link> : esta etiqueta se utiliza para establecer una conexión/relación entre el documento actual y algunos recursos externos que están asociados con la página web. El recurso podría ser un archivo CSS, un icono utilizado en el sitio, un manifiesto, etc.
Tiene ciertos atributos, algunos de los más utilizados son los siguientes.
|
Attribute_Name=”Valor” |
Ejemplo |
Descripción |
|---|---|---|
| href=”URL” | href=”../estiloexterno.css” | Especifica la ubicación del recurso. |
| medios = «consulta_medios/tipo_medios» | media = «pantalla y (ancho mínimo: 700px)» | Se utiliza para definir en qué dispositivo se mostrará el documento vinculado. |
| rel=”relación_con_recurso” | rel=”hoja de estilo” rel=”licencia” rel=”icono” |
Especifica qué tipo de recurso se asocia con esta etiqueta. |
| tamaño = «Alto x Ancho» | tamaño=”32×32″ | Se utiliza principalmente para que los iconos vinculen el recurso con un tamaño específico. |
| tipo = «MIME_TYPE» | tipo = «imagen/png» tipo = «texto/html» |
Este atributo se utiliza para definir el tipo MIME del contenido vinculado. |
Ejemplo 1: Crear un enlace a alguna hoja de estilo CSS externa en nuestro documento. La identificación dada a la etiqueta h2 contiene solo un color de estilo: verde dentro de ese archivo CSS externo.
Javascript
<!DOCTYPE html> <html> <head> <title>Link Tag</title> <link rel="stylesheet" href="./externalResource.css" /> </head> <body> <h2 id="hello"> Hello, GeeksforGeeks Learner </h2> <p> The above text is having color green instead of default black, because a file which contains some css code is associated/linked with this document. </p> </body> </html>
Producción:
Ejemplo 2: Agregar algún favicon externo para el sitio web.
Javascript
<!DOCTYPE html> <html> <head> <title>Link Tag</title> // Add png image source here <link rel="icon" href="./gfgIcon.png" /> </head> <body> <p> The Favicon being displayed along with text in title is because a png file is associated /linked with this document </p> </body> </html>
Producción:
Etiqueta <a> : esta etiqueta ancla establece un hipervínculo a un documento externo o interno de HTML, una dirección como correo electrónico o teléfono, y algún tipo de dirección URL externa.
- Algunos de los atributos comúnmente utilizados son: –
|
Attribute_Name=”Valor” |
Ejemplo |
Descripción |
|---|---|---|
| href=”URL” | href=”https://www.geeksforgeeks.org” href=”../filePath.ext” href=”#someInternalId” |
Especifica la ubicación del hipervínculo. |
| target=”algún_contexto_de_navegación” | destino=”_blank” destino=”_self” |
Especifica dónde mostrar la URL vinculada. |
| descargar = «nombre de archivo.ext» | descargar=”Imagenvinculada.png” | Esto se usa para descargar el contenido del hipervínculo en lugar de solo una visita. |
| ping=”URL” | ping = «https://someUrl/postRequest» | Envía la solicitud de publicación a la URL proporcionada y se utiliza principalmente con fines de seguimiento. |
Nota: Los atributos rel y type descritos en la etiqueta de enlace también se pueden usar con la etiqueta de anclaje.
Ejemplo 1: Vamos a esbozar un clon básico del pie de página de geeksforgeeks.org para ilustrar los casos de uso de la etiqueta de anclaje. Debes haberlo visto muchas veces, por lo que, para un ejemplo práctico, puede ser una mejor opción.
Explicación:-
- La primera etiqueta de anclaje tiene una referencia al sitio web oficial de GFG, y hay otro objetivo de atributo, que se establece en un valor _blank significa que este hipervínculo se abrirá en otra pestaña.
- La siguiente etiqueta de anclaje entrega un hipervínculo al correo de GFG. su sintaxis es » mailto: any_mail_id_will_appear_here « , cuando el usuario haga clic en esta etiqueta, el navegador abrirá algunas aplicaciones predeterminadas para enviar correo.
- Más adelante hay un enlace al canal de YouTube de GFG, observe la diferencia entre el primero y este, no tiene atributo de destino por lo que por defecto se abrirá en la misma pestaña.
- Al final, hay un hipervínculo para hacer una llamada telefónica que acepta un número con el código de país después de los dos puntos, es decir, » tel: cualquier_número_de_teléfono » , y similar a un hipervínculo de correo aquí, también el navegador decidirá qué aplicación usar para llamar.
HTML
<!DOCTYPE html> <html> <body> <h2>Anchor Tags</h2> <a href="https://www.geeksforgeeks.org" target="_blank"> GeeksforGeeks </a><br> <div> <span> 5th Floor, A-118,<br>Sector-136, Noida, Uttar Pradesh - 201305 </span> </div> <a href="mailto:feedback@geeksforgeeks.org"> feedback@geeksforgeeks.org </a><br> <a href="https://www.youtube.com/geeksforgeeksvideos/"> Video Tutorials </a><br> <a href="tel:00000000">Call Us</a> </body> </html>
Producción:-
Diferencia entre la etiqueta <link>y etiqueta <a> :
|
Etiqueta <enlace> |
<a> Etiqueta |
|
|---|---|---|
| 1. | Esta etiqueta se usa dentro de la sección principal. | Esta etiqueta se usa dentro de la sección del cuerpo. |
| 2. | No se muestra en la parte frontal y solo se usa para fines internos. | El contenido escrito dentro de la etiqueta de anclaje se muestra en la interfaz. |
| 3. | Establece la relación/conexión entre dos entidades. | Establece una ruta desde el documento actual a otro lugar. |
| 4. | Debido a que no es directamente visible para el usuario, no se puede hacer clic en él. | Los usuarios pueden hacer clic en el contenido incluido dentro de esta etiqueta para visitar el hipervínculo. |
| 5. | Es un elemento vacío y no puede tener elementos anidados. | No es un elemento vacío, puede tener algunos elementos anidados en su interior. |
| 6. | No tiene nada que ver con el bloque o las propiedades en línea de los elementos HTML. | Es un elemento HTML en línea. |
| 7. | La estructura básica de esta etiqueta es <link some_attributes_with_value /> |
La estructura básica de esta etiqueta es, <a some_attributes_with_value > some_nested_content </a> |
Publicación traducida automáticamente
Artículo escrito por mrtwinklesharma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA