Generalmente, usamos texto alternativo para describir la imagen. A veces, necesitamos proporcionar descripciones más largas de las imágenes y, en esta situación, es posible que el texto alternativo no proporcione el espacio adecuado. El atributo longdesc es la solución a este problema. Tenemos que proporcionar el enlace o URL de la página web que contiene una descripción de la imagen como valor del atributo longdesc.
Podemos usar el atributo longdesc dentro de los elementos IMG , iframe y frame . Se puede usar dentro del elemento IMG, en lugar del texto alternativo . Podemos usarlo dentro del elemento iframe de HTML , como complemento del atributo de título . Sin embargo, el atributo longdesc no es compatible con la mayoría de los navegadores, ya que se eliminó de HTML5.
Sintaxis:
<img src="Image_path_URL" longdesc="URL or data URI">
Valores de atributo: Toma una URL o URI de datos como valor del atributo longdesc.
- URL completa: Es una URL de recursos externos.
- URL relativa: Es un enlace a recursos internos.
- URL basada en ID: para señalar cualquier elemento en la misma página usando la identificación.
- URI de datos: versión codificada del contenido real.
Ejemplo 1:
HTML
<!--HTML code to demonstrate longdesc attribute inside the img element--> <!DOCTYPE html> <html> <body> <h1 style="color:green">GeeksforGeek</h1> <!-- Id-based URL --> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png" width="100" height="132" longdesc="#longdescdeno"> <!-- Internal URL --> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png" width="100" height="132" longdesc="longdesc.txt"> <!-- External URL --> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png" width="100" height="132" longdesc= "https://www.geeksforgeeks.org/html-iframe-longdesc-attribute/"> <!--data:URI --> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png" width="100" height="132" longdesc= "data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20Logo%3C/title%3E%3C/head%3E%3Cbody%3E%3Cp%3ESome%20description%20goes%20here%3C/body%3E%3C/html%3E"> </body> </html>
Producción:
En HTML 5, podemos usar la etiqueta <a> para proporcionar enlaces a los recursos externos o internos de la imagen. Es la mejor alternativa a longdesc y es compatible con todos los navegadores.
Sintaxis:
<a herf="image_description_URL"> <img src="image_path_URL"> </a>
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <a href= "https://www.geeksforgeeks.org/html-iframe-longdesc-attribute/"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> </a> </body> </html>
Producción:
Conclusión: como la mayoría de los navegadores no admiten el atributo longdesc , los usuarios deben usar la etiqueta img dentro de la etiqueta <a> para proporcionar una descripción larga de las imágenes.
Publicación traducida automáticamente
Artículo escrito por shubhamvora05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA