Images · Изображения
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Эта страница требует современного браузера (с поддержкой SharedArrayBuffer). Пожалуйста, обновите Chrome, Edge, Firefox или Safari до последней версии.
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).
Русский
Изображения
- Отобразите картинку с помощью тега
<img>. <img>— это одиночный тег — без закрывающего тега, как<br>.- Он требует двух атрибутов:
src(где находится изображение) иalt(описание).
<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.
Русский
Почему важен alt-текст
alt— это текст, который описывает изображение.- Он отображается, если изображение не удалось загрузить, а скринридеры читают его вслух.
- Всегда добавляйте краткое и понятное
alt— это делает вашу страницу удобнее для всех.
English
Common mistakes
- An image needs
src(the file) andalt(a description). <img>has no separate closing tag.
Русский
Распространенные ошибки
- Изображению нужны
src(файл) иalt(описание). <img>не имеет отдельного закрывающего тега.
English
Now you try
- The picture lives at
/static/code/web-basics/cat.svg. - Show it, then add
alttext to an image.
Русский
Теперь попробуйте сами
- Картинка расположена по адресу
/static/code/web-basics/cat.svg. - Добавьте её, а затем напишите
alt-текст к изображению.
Show the cat picture. Add an <img> with src="/static/code/web-basics/cat.svg". · Покажите изображение кошки. Добавьте <img> с src="/static/code/web-basics/cat.svg".
This image has no description. Add an alt attribute that describes it, like alt="A cartoon cat". · У этого изображения нет описания. Добавьте атрибут alt, который его описывает, например, alt="A cartoon cat".