Las etiquetas de imagen en HTML son clave para crear páginas atractivas y accesibles. Entender su semántica mejora la experiencia del usuario y el posicionamiento web. A continuación explicamos de forma práctica las etiquetas principales y buenas prácticas para manejar imágenes en proyectos de software a medida y aplicaciones web.
1. Etiqueta básica img
La forma más simple de insertar una imagen es <img src=sunset.jpg alt=Sunset over the mountains> donde src es la ruta del archivo y alt el texto alternativo esencial para accesibilidad y SEO
2. Agrupar con figure
Cuando una imagen es un elemento independiente del contenido conviene envolverla en <figure> <img src=sunset.jpg alt=Sunset over the mountains> </figure> esto indica a navegadores y lectores de pantalla que la imagen tiene significado propio
3. Añadir leyendas con figcaption
Para explicar la imagen coloque una leyenda dentro de figure <figure> <img src=sunset.jpg alt=Sunset over the mountains> <figcaption>Vista espectacular del atardecer en el Himalaya</figcaption> </figure>
4. Imágenes responsive con picture
Utilice picture y source para servir diferentes formatos y tamaños según el dispositivo <picture> <source media=(min-width:800px) srcset=sunset-large.jpg> <source media=(min-width:400px) srcset=sunset-medium.jpg> <img src=sunset-small.jpg alt=Sunset over the mountains> </picture> asà se optimiza rendimiento y experiencia en móviles y escritorio
5. �reas clicables con usemap
Para mapas y diagramas interactivos use usemap y map con area <img src=world-map.jpg alt=World Map usemap=#worldmap> <map name=worldmap> <area shape=rect coords=50,50,200,150 href=https://en.wikipedia.org/wiki/India alt=India> <area shape=circle coords=400,200,50 href=https://en.wikipedia.org/wiki/Australia alt=Australia> </map> útil para productos con puntos interactivos, infografÃas y mapas
Ejemplo semántico final
<article> <h2>Travel to the Himalayas</h2> <figure> <picture> <source srcset=himalaya.avif type=image/avif> <source srcset=himalaya.webp type=image/webp> <img src=himalaya.jpg alt=Snow-covered Himalayan peaks usemap=#himalaya-map> </picture> <map name=himalaya-map> <area shape=circle coords=250,200,50 href=everest.html alt=Mount Everest> </map> <figcaption>Cordillera Himalayan con un área clicable que enlaza a Everest</figcaption> </figure> </article>
Buenas prácticas
Siempre añada alt claro y descriptivo para accesibilidad, use figure y figcaption para dar significado, emplee picture para versiones responsive, y pruebe las áreas clicables en distintos tamaños de pantalla.
Q2BSTUDIO y cómo podemos ayudar
En Q2BSTUDIO somos especialistas en desarrollo de software y aplicaciones a medida, inteligencia artificial e infraestructuras seguras. Si necesita aplicaciones a medida y software a medida pensadas para rendimiento y accesibilidad podemos encargarnos del diseño y la implementación. También ofrecemos servicios de inteligencia artificial para empresas, agentes IA y soluciones de IA a medida, conozca nuestras posibilidades en inteligencia artificial.
Palabras clave y servicios
Integramos ciberseguridad y pruebas de pentesting para proteger activos digitales, servicios cloud aws y azure para escalabilidad, servicios inteligencia de negocio y proyectos con power bi, automatización de procesos y soluciones de agentes IA que mejoran procesos. Estas capacidades hacen que nuestros desarrollos de software a medida y aplicaciones a medida sean seguros, escalables y orientados a resultados.
Si necesita asesoramiento práctico sobre cómo estructurar imágenes semánticas en su proyecto, optimizar para SEO y accesibilidad, o integrar soluciones avanzadas de inteligencia artificial y cloud, en Q2BSTUDIO estamos listos para ayudar.
