Cómo vincular una imagen en su sitio web
Envuelva un elemento de imagen dentro de un elemento de anclaje
adamkaz / Getty Images
Hay una diferencia entre insertar una imagen en un página web y hacer de esa imagen un enlace en el que se pueda hacer clic. Aunque el HTML es similar, un enlace se basa en un ancla elemento mientras que una imagen utiliza el imagen elemento. Sin embargo, una imagen puede anidar dentro de un ancla, lo que hace que se pueda hacer clic en esa imagen como un enlace.
Insertar imágenes en elementos de anclaje
Un uso común de un enlace basado en imágenes es el gráfico del logotipo del sitio, que luego se vincula a la página de inicio del sitio.
Así es como colocaría una imagen en la que no se puede hacer clic en el documento HTML:
|_+_|Para transformar la imagen en un enlace, agregue el enlace ancla, abriendo el elemento ancla antes de la imagen y cerrando el ancla después de la imagen. Esta técnica es similar a cómo vinculas texto, excepto que en lugar de envolver las palabras, envuelves la imagen:
|_+_|
Cuando agregue este tipo de HTML a su página, no coloque espacios entre la etiqueta del ancla y la etiqueta de la imagen. Si lo hace, algunos navegadores agregarán pequeñas marcas al lado de la imagen, lo que se verá extraño.
El logotipo ahora también actúa como un botón de página de inicio, que es prácticamente un estándar web en estos días.
Tenga en cuenta que no incluimos ningún estilo visual, como el ancho y el alto de la imagen, en nuestro marcado HTML. Dejaremos estos estilos visuales a CSS y mantendremos una clara separación de la estructura HTML y los estilos CSS.