Hay una diferencia entre insertar una imagen en un página web y convertir esa imagen en un enlace en el que se puede hacer clic. Aunque el HTML es similar, un vínculo se basa en un ancla mientras que una imagen usa el img 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 de ancla, abriendo el elemento de ancla antes de la imagen y cerrando el ancla después de la imagen. Esta técnica es similar a cómo enlaza el texto, excepto que en lugar de envolver las palabras, envuelve la imagen:
Cuando agregue este tipo de HTML a su página, no ponga ningún espacio entre la etiqueta de anclaje y la etiqueta de 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 la 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 en CSS y mantendremos una separación limpia entre la estructura HTML y los estilos CSS.