Images · Imágenes
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página necesita un navegador reciente (con soporte para SharedArrayBuffer). Por favor, actualiza Chrome, Edge, Firefox o Safari a la última versión.
English
Images
- Show a picture with the
<img>tag. <img>is a single tag — no closing tag, like<br>.- It needs two attributes:
src(where the picture is) andalt(a description).
Español
Imágenes
- Muestra una imagen con la etiqueta
<img>. - La etiqueta
<img>es una etiqueta simple — no tiene etiqueta de cierre, al igual que<br>. - Necesita dos atributos:
src(donde está la imagen) yalt(una descripción).
<img src="/static/code/web-basics/cat.svg" alt="A cartoon cat">
English
Why alt text matters
altis text that describes the picture.- It shows if the image cannot load, and screen readers read it aloud.
- Always add a short, clear
alt— it makes your page kinder to everyone.
Español
Por qué importa el texto alternativo
altes un texto que describe la imagen.- Aparece si la imagen no puede cargarse, y los lectores de pantalla lo leen en voz alta.
- Siempre añade un
altbreve y claro; esto hace tu página más accesible para todos.
English
Common mistakes
- An image needs
src(the file) andalt(a description). <img>has no separate closing tag.
Español
Errores comunes
- Una imagen necesita
src(el archivo) yalt(una descripción). <img>no tiene etiqueta de cierre separada.
English
Now you try
- The picture lives at
/static/code/web-basics/cat.svg. - Show it, then add
alttext to an image.
Español
Ahora tú intentas
- La imagen se encuentra en
/static/code/web-basics/cat.svg. - Muéstrala, luego añade texto
alta la imagen.
Show the cat picture. Add an <img> with src="/static/code/web-basics/cat.svg". · Muestra la imagen del gato. Añade una etiqueta <img> con src="/static/code/web-basics/cat.svg".
This image has no description. Add an alt attribute that describes it, like alt="A cartoon cat". · Esta imagen no tiene descripción. Agregar un atributo alt que la describa, como alt="A cartoon cat".