Propiedades del elemento HTML «a»

El elemento «a" de HTML tiene muchas propiedades diferentes, aquí tienes una lista completa de todas las propiedades del elemento «a" de HTML:

Lista completa de todas las propiedades del elemento «a" de HTML.

  • accesskey: Especifica una tecla de acceso para el elemento.
  • coords: Especifica las coordenadas de un área de enlace en una imagen map.
  • download: Especifica el nombre con el que se debe descargar el archivo al que lleva el enlace.
  • href: Especifica la dirección URL del enlace.
  • hreflang: Especifica el idioma del documento al que lleva el enlace.
  • media: Especifica para qué dispositivos se debe mostrar el enlace.
  • name: Especifica el nombre de un fragmento de un documento.
  • rel: Especifica la relación entre la página actual y la página a la que lleva el enlace.
  • shape: Especifica la forma del área de enlace en una imagen map.
  • target: Especifica cómo se debe abrir el enlace.
  • type: Especifica el tipo de contenido al que lleva el enlace.
  • title: Especifica un título o una descripción para el enlace.

Ejemplo de cómo utilizar cada una de las propiedades del elemento a de HTML y una breve explicación de para qué se utiliza cada una:

Ejemplo de uso de la propiedad "<strong>hreflang" </strong>del elemento HTML «a».

  • hreflang: Especifica el idioma del documento al que lleva el enlace. Esta propiedad es útil para indicar a los motores de búsqueda y a los usuarios el idioma del documento al que lleva el enlace. Por ejemplo:
<a href="/pagina-en-espanol" hreflang="es">Página en español</a>

Ejemplo de uso de la propiedad «media« del elemento HTML «a».

  • media: Especifica para qué dispositivos se debe mostrar el enlace. Esta propiedad se utiliza a menudo para enlazar a hojas de estilo específicas para dispositivos móviles o para ocultar enlaces en ciertos dispositivos. Por ejemplo:
<a href="/hoja-de-estilo-movil.css" media="(max-width: 600px)">Hoja de estilo para móviles</a>

Ejemplo de uso de la propiedad «name« del elemento HTML «a».

  • name: Especifica el nombre de un fragmento de un documento. Los fragmentos son secciones de un documento que se pueden enlazar directamente. Por ejemplo:
<a href="#seccion1" name="seccion1">Sección 1</a>

Ejemplo de uso de la propiedad «rel« del elemento HTML «a».

  • rel: Especifica la relación entre la página actual y la página a la que lleva el enlace. Esta propiedad se utiliza a menudo para indicar a los motores de búsqueda si deben seguir el enlace o no. Por ejemplo:
  1. alternate: Indica que el enlace lleva a una versión alternativa de la página actual.
  2. author: Indica que el enlace lleva a una página que incluye información sobre el autor del contenido.
  3. bookmark: Indica que el enlace lleva a una página que es un marcador o favorito.
  4. contact: Indica que el enlace lleva a una página que incluye información de contacto.
  5. help: Indica que el enlace lleva a una página que incluye ayuda o información de soporte.
  6. license: Indica que el enlace lleva a una página que incluye información sobre la licencia del contenido.
  7. next: Indica que el enlace lleva a la página siguiente en una secuencia de páginas.
  8. nofollow: Indica a los motores de búsqueda que no deben seguir el enlace.
  9. noreferrer: Indica que no se debe enviar una referencia al enlace.
  10. prev: Indica que el enlace lleva a la página anterior en una secuencia de páginas.
  11. search: Indica que el enlace lleva a una página de búsqueda.
  12. tag: Indica que el enlace lleva a una página que incluye información sobre etiquetas o categorías.
  13. up: Indica que el enlace lleva a la página principal o a una página «superior» en la jerarquía del sitio.

Para indicar a los motores de búsqueda que no deben seguir el enlace rel=»nofollow»:

<a href="/pagina-externa" rel="nofollow">Enlace a una página externa</a>

Para indicar que el enlace es una versión alternativa de la página actual rel=»alternate»:

<a href="/pagina-en-otro-idioma" rel="alternate" hreflang="es">Versión en español</a>

Para indicar que el enlace lleva a una página relacionada con la actual rel=»related»:

<a href="/pagina-relacionada" rel="related">Página relacionada</a>

Para indicar que el enlace es una página de inicio rel=»home»:

<a href="/" rel="home">Página de inicio</a>

Para indicar que el enlace lleva a una versión imprimible de la página actual rel=»print»:

<a href="/pagina-imprimible" rel="print">Versión imprimible</a>

Para indicar que el enlace lleva a una página que incluye la información de contacto rel=»contact»:

<a href="/pagina-de-contacto" rel="contact">Página de contacto</a>

Para indicar que el enlace lleva a una página que incluye la política de privacidad rel=»privacy«:

<a href="/politica-de-privacidad" rel="privacy">Política de privacidad</a>

Para indicar que el enlace lleva a una página que incluye términos y condiciones rel=»terms»:

<a href="/terminos-y-condiciones" rel="terms">Términos y condiciones</a>

Para indicar que el enlace lleva a una página que incluye la licencia de uso del contenido rel=»license»:

<a href="/licencia" rel="license">Licencia de uso</a>

Ejemplo de uso de la propiedad «shape« del elemento HTML «a».

  • shape: Especifica la forma del área de enlace en una imagen map. Las formas disponibles son circulo, rectángulo y polígono. Por ejemplo:
<img src="/mapa.jpg" usemap="#mapa">
<map name="mapa">
  <a href="/seccion1" shape="rect" coords="0,0,82,126">Sección 1</a>
  <a href="/seccion2" shape="circle" coords="90,58,14">Sección 2</a>
</map>

Ejemplo de uso de la propiedad «target« del elemento HTML «a».

  • target: Especifica cómo se debe abrir el enlace.

Para abrir el enlace en una nueva pestaña o ventana target=»_blank»:

<a href="/pagina-externa" target="_blank">Enlace a una página externa</a>

Para abrir el enlace en la misma pestaña o ventana target=»_self»:

<a href="/pagina-interna" target="_self">Enlace a una página interna</a>

Para abrir el enlace en la página principal del sitio target=»_top»:

<a href="/" target="_top">Página de inicio</a>

Para abrir el enlace en una ventana emergente target=»_popup»:

<a href="/pagina-con-ventana-emergente" target="_popup">Ventana emergente</a>

Ejemplo de uso de la propiedad «type« del elemento HTML «a».

  • type: Especifica el tipo de contenido al que lleva el enlace. Esta propiedad se utiliza a menudo para indicar al navegador el tipo de archivo al que lleva el enlace. Por ejemplo:
<a href="/documento.pdf" type="application/pdf">Enlace a un archivo PDF</a>

Ejemplo de uso de la propiedad «title« del elemento HTML «a».

  • title: Especifica un título o una descripción para el enlace. Esta propiedad es útil para proporcionar información adicional sobre el contenido al que lleva el enlace.

Ejemplos de la propiedad title del elemento HTML a.

Para proporcionar una descripción del enlace:

<a href="/pagina-externa" title="Enlace a una página externa">Página externa</a>

Para proporcionar instrucciones adicionales sobre cómo utilizar el enlace:

<a href="/pagina-con-formulario" title="Haz clic para rellenar el formulario">Formulario</a>

Para proporcionar una advertencia sobre el contenido al que lleva el enlace:

<a href="/pagina-con-contenido-inapropiado" title="Este enlace lleva a contenido inapropiado para menores">Contenido inapropiado</a>

Foto de Perfil de Juan Luis Martel

Juan Luis Martel.

Profesional en Tecnologías Integradas - Desarrollo Web y Electrónica.

Las Palmas de Gran Canaria, España

Soy un apasionado de la programación con experiencia en Wordpress, PHP, PIC, Microcontroladores y ASM. Además, soy Técnico Especialista en Electrónica y también tengo experiencia como profesor en este campo. Mi pasión por la electrónica me ha llevado a combinar mis habilidades en programación con mi conocimiento técnico, lo que me permite crear soluciones innovadoras y eficientes en mis proyectos de paginas webs y de electrónica.

¡No te vayas sin valorar el contenido!

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 2

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Ya que has encontrado útil el contenido...

🙏 Ayúdame y compártelo en tus redes sociales ¡Significa mucho para mí! - Gracias

¡Siento que el contenido no te haya sido útil o gustado! 😔

¡Déjame mejorar este contenido!

Dime, ¿cómo crees que puedo mejorar este contenido? 🙏 ¡Significa mucho para mí! - Gracias

Deja un comentario