En este artículo, discutiremos longdesc en HTML. Longdesc es un atributo HTML que se utiliza para proporcionar una descripción detallada de una imagen. Es un atributo opcional que se puede usar para agregar detalles adicionales sobre una imagen más allá de la descripción más breve proporcionada como información sobre herramientas.
Sintaxis:
<img longdesc="string">
Valor de atributo:
- longdesc: el valor puede ser una URL del documento especificado que contiene la descripción detallada.
Nota: el atributo longdesc solo funcionará con la versión anterior de HTML (es decir, HTML 4.0 o anterior). Ya no es compatible con el navegador que utiliza la última versión de HTML.
Ejemplo: En este ejemplo, incluiremos GFG.html, que es un archivo HTML sin formato que contiene detalles adicionales sobre la imagen.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML img longdesc Attribute</title>
<style>
.container {
position: fixed;
top: 20%;
left: 44%;
margin-top: -65px;
margin-left: -100px;
text-align: center;
}
h1 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to GeeksforGeeks</h1>
<p>Click on the image</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073840/gfg5.png"
longdesc="image-descriptions/GFG.html" />
</div>
</body>
</html>
GFG.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p {
text-align: justify;
text-justify: inter-word;
}
.container {
box-sizing: content-box;
width: 600px;
height: 214px;
padding: 20px;
font-size: 18px;
position: fixed;
top: 20%;
left: 33%;
margin-top: -65px;
margin-left: -100px;
border-radius: 2px;
}
h1 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<p>
What We Offer We provide a variety of
services for you to learn, thrive and
also have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses ,Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
With the idea of imparting programming
knowledge, Mr. Sandeep Jain, an IIT
Roorkee alumnus started a dream,
GeeksforGeeks. Whether programming
excites you or you feel stifled,
wondering how to prepare for interview
questions or how to ace data structures
and algorithms, GeeksforGeeks is a
one-stop solution. Our vision is to
build a gigantic network of geeks
and we are only a fraction of it yet.
</p>
</div>
</body>
</html>
Producción:
Ejemplo: Sin embargo, la función utilizada en el ejemplo anterior ya no se recomienda y no es compatible con ningún navegador. En su lugar, podemos agregar el enlace (etiqueta <a>) a la imagen que mostrará la descripción de la imagen. Para ello, incluiremos el archivo GFG.html en nuestro archivo index.html .
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML img longdesc Attribute</title>
<style>
.container {
position: fixed;
top: 20%;
left: 44%;
margin-top: -65px;
margin-left: -100px;
text-align: center;
}
h1 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to GeeksforGeeks</h1>
<p>Click on the image</p>
<a href="GFG.html">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073840/gfg5.png" />
</a>
</div>
</body>
</html>
GFG.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p {
text-align: justify;
text-justify: inter-word;
}
.container {
box-sizing: content-box;
width: 600px;
height: 214px;
padding: 20px;
border: 1px solid black;
font-size: 18px;
position: fixed;
top: 20%;
left: 33%;
margin-top: -65px;
margin-left: -100px;
border-radius: 2px;
}
h1 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="container">
<p>
A Computer Science portal for geeks.
It contains well written, well
thought and well explained computer
science and programming articles.
Free Tutorials, Millions of Articles,
Live, Online and Classroom Courses,
Frequent Coding Competitions, Webinars
by Industry Experts. With the idea
of imparting programming knowledge,
Mr. Sandeep Jain, an IIT Roorkee
alumnus started a dream, GeeksforGeeks.
Whether programming excites you or you
feel stifled, wondering how to prepare
for interview questions or how to ace
data structures and algorithms,
GeeksforGeeks is a one-stop solution.
Our vision is to build a gigantic
network of geeks and we are only a
fraction of it yet.
</p>
</div>
</body>
</html>
Producción:
Navegadores compatibles: este atributo no es compatible con ningún navegador ahora.