Согласно валидатору w3c какие атрибуты обязательно должны быть у элемента img чтобы не было ошибки - Ремонт и установка крупной бытовой техники

HTML-элемент <img> встраивает изображение в документ. Это замещаемый элемент.

Интерактивный пример

Приведённый выше пример показывает очень простое использование элемента <img>. Атрибут src обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут alt содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.

Есть много других атрибутов, которые могут быть указаны для достижения различных целей, например:

управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты crossorigin и referrerpolicy;
настройка внутреннего размера (en-US) с использованием width и height, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;
адаптивные изображения рекомендуется использовать с атрибутами sizes и srcset (смотрите также элемент <picture> и наше руководство «Адаптивные изображения»).

Категории контента	Потоковый контент, фразовый контент, встроенный контент, явный контент. Если элемент имеет атрибут `usemap`, он так же принадлежит к категории интерактивного контента.
Разрешённое содержимое	Никакое, так как это пустой элемент.
Пропуск тега	Должен иметь открывающий тег и не должен иметь закрывающий.
Разрешённые родительские элементы	Любой элемент, который разрешает встроенный контент в качестве содержимого.
Разрешённые роли ARIA	Любые
DOM-интерфейс	`HTMLImageElement`

Поддерживаемые форматы изображений

Стандарт HTML не содержит списка форматов изображений, которые должны поддерживаться. Поэтому разные пользовательские агенты поддерживают разные наборы форматов.

Firefox

Форматы изображений, поддерживаемые Firefox:

JPEG;
GIF, включая анимированные GIF;
PNG;
APNG;
SVG;
BMP;
BMP ICO;
PNG ICO.

Ошибки загрузки изображения

Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события onerror был настроен на обработку события error (en-US), тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:

атрибут src пустой или null;
указанный URL в атрибуте src совпадает с URL страницы, на которой в данный момент находится пользователь;
указанное изображение каким-то образом повреждено, что препятствует его загрузке;
метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента <img> не было указано никаких размеров;
указанное изображение имеет формат, который не поддерживается пользовательским агентом.

Атрибуты

К этому элементу применимы глобальные атрибуты.

alt

Этим атрибутом задаётся альтернативное текстовое описание изображения.

Примечание: Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или неподдерживаемый тип. В этих случаях браузер может заменить изображение текстом записанным в атрибуте alt элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте alt.
Примечание: Пропуск этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (alt="") указывает, что это изображение не является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при рендеринге (en-US).

crossorigin

Этот атрибут указывает, следует ли использовать CORS при загрузке изображения или нет. Изображения с включённой поддержкой CORS могут быть повторно использованы в элементе <canvas> не будучи «испорченными». Допустимые значения:

anonymous: Запрос cross-origin (т.е. с HTTP-заголовком Origin) выполняется, но параметры доступа не передаются (т.е. нет cookie, не используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок Access-Control-Allow-Origin), изображение будет «испорчено» и его использование будет ограничено;
use-credentials: Запрос cross-origin (т.е. с HTTP-заголовком Origin) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовка Access-Control-Allow-Origin), изображение будет «испорчено» и его использование будет ограничено.Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовка Origin), ограничивая его использование в элементе <canvas>. Если задан неправильно, то он обрабатывается так, как если бы использовалось значение anonymous. Для получения дополнительной информации смотрите «Настройки атрибутов CORS».

decoding

Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:

sync: Декодировать изображение синхронно для одновременного отображения с другим контентом;
async: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;
auto: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.

height

Внутренняя высота (см. Внутренний размер (en-US)) изображения в пикселях.

importance
Экспериментальная возможность

Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:

auto: Указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритета изображения;
high: Указывает браузеру, что изображение имеет высокий приоритет;
low: Указывает браузеру, что изображение имеет низкий приоритет.

intrinsicsize
Экспериментальная возможность

Этот атрибут говорит браузеру игнорировать действительный внутренний размер (en-US) изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а narutalWidth/naturalHeight изображения будут возвращать значения, указанные в этом атрибуте. Объяснение, примеры.

ismap

Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.

Примечание: Этот атрибут разрешён, только если элемент <img> является потомком элемента <a> с валидным (соответствующий требованиям) атрибутом href.

loading
Экспериментальная возможность

Указывает на то, как браузер должен загрузить изображение:

eager: Загружает изображение немедленно независимо от того, находится оно в области просмотра или нет (является значением по умолчанию).
lazy: Откладывает загрузку изображения до того момента, пока оно не достигнет подсчитанного расстояния области просмотра, определяемого браузером. Данное значение помогает избежать использования ресурсов сети и хранилища, необходимых для обработки изображения, пока это действительно не понадобится. В большинстве случаев использование этого аргумента улучшает производительность.
Примечание: Загрузка откладывается только тогда, когда включён JavaScript. Это анти-трэкинг мера. Если бы пользовательский клиент поддерживал опцию отложенной загрузки изображения при отключённом JavaScript, то сайт имел бы возможность отслеживать приблизительную позицию области просмотра в течение сессии пользователя, размещая изображения на странице таким образом, чтобы сервер мог отслеживать, сколько изображений загружено и когда.

referrerpolicy
Экспериментальная возможность

Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:

no-referrer: Заголовок Referer не будет отправлен;
no-referrer-when-downgrade: Заголовок Referer не отправляется, когда происходит переход к источнику без TLS (HTTPS). Это поведение по умолчанию для пользовательских агентов, если не указано иное;
origin: Заголовок Referer будет содержать схему адресации ресурса (HTTP, HTTPS, FTP и т.д), хост и порт;
origin-when-cross-origin: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса, хостом и портом, в то время как переход из того же источника будет включать полный путь реферала;
unsafe-url: Заголовок Referer будет включать источник и путь, но не фрагмент URL, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённых TLS, к незащищённым источникам.

sizes

Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:1. Условия медиа-запроса. Должно быть пропущено для последнего элемента. 2. Значения размера источника.Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. Пользовательские агенты используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом srcset, если эти источники описываются с помощью дескриптора ширины ‘w‘ (сокращение от width). Выбранный размер источника влияет на внутренний размер (en-US) изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибут srcset отсутствует или не содержит значений с дескриптором ‘w‘, то атрибут sizes не будет иметь никакого эффекта.

src

URL изображения. Этот атрибут является обязательным для элемента <img>. В браузерах, поддерживающих srcset, src обрабатывается как изображение-кандидат с дескриптором плотности пикселей 1x, если только изображение с этим дескриптором уже не определено в srcset или если srcset не содержит дескрипторы ‘w‘.

srcset

Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использования пользовательскими агентами. Каждая строка состоит из:1. URL изображения. 2. Необязательного, пробела, сопровождаемого:

дескриптором ширины или положительным целым числом, за которым сразу же следует ‘w‘. Дескриптор ширины делится на размер источника, полученный из атрибута sizes, для расчёта эффективной плотности пикселей;
дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует ‘x‘.Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: 1x.Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте srcset. Повторение дескрипторов (например, два источника в одном srcset с одинаковым дескриптором ‘2x‘) так же является недопустимым.Пользовательские агенты выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или пропускная способность. Смотрите наше руководство «Адаптивные изображения» для примера.

width

Внутренняя ширина (см. Внутренний размер (en-US)) изображения в пикселях.

usemap

Неполный URL (начиная с ‘#‘) карты-изображения, связанной с элементом.

Примечание: вы не можете использовать этот атрибут, если элемент <img> является потомком элемента <a> или <button>.

Устаревшие атрибуты

align
Этот API вышел из употребления и его работа больше не гарантируется.

Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован — вместо этого используйте CSS-свойства float и/или vertical-align. Вы можете так же использовать CSS-свойство object-position для позиционирования изображения внутри границ элемента <img>. Допустимые значения:

top: Аналог vertical-align: top или vertical-align: text-top;
middle: Аналог vertical-align: -moz-middle-with-baseline;
bottom: Отсутствует значение по умолчанию, аналог vertical-align: unset или vertical-align: initial;
left: Аналог float: left;
right: Аналог float: right.

border
Этот API вышел из употребления и его работа больше не гарантируется.

Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство border вместо этого атрибута.

hspace
Этот API вышел из употребления и его работа больше не гарантируется.

Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство margin вместо этого атрибута.

longdesc
Этот API вышел из употребления и его работа больше не гарантируется.

Ссылка на более подробное описание изображения. Возможными значениями являются URL или id элемента.

name
Этот API вышел из употребления и его работа больше не гарантируется.

Имя для элемента. Вы должны использовать атрибут id вместо этого атрибута.

vspace
Этот API вышел из употребления и его работа больше не гарантируется.

Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойство margin вместо этого атрибута.

Взаимодействие с CSS

<img> является замещаемым элементом; по умолчанию он имеет значение свойства display равное inline, но его размеры по умолчанию определяются внутренними значениями (см. внутренний размер (en-US)) встроенного изображения. Вы можете установить на изображение такие свойства, как border/border-radius, padding/margin, width/height и так далее.

Однако, часто бывает полезно установить для изображений свойство display в значение block, так что вы имеете максимальный контроль над стилизацией (например, margin: 0 auto не работает на изображениях с display: inline, легче размещать изображения в контексте с окружающими элементами, когда они являются блочными).

У <img> нет базовой линии, когда изображения используются в ситуации со строчным форматированием (display: inline) вместе с vertical-align: baseline, нижняя граница изображения будет размещена на базовой линии контейнера.

Вы можете использовать свойство object-position для позиционирования изображения внутри границ элемента <img> и свойством object-fit регулировать размеры изображения внутри этих границ (например, должно ли изображение помещаться в границы элемента или заполнить элемент полностью, даже если потребуется обрезка).

В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее внутренние размеры (en-US) не обязательны. SVG-изображения, например, могут не иметь внутренних размеров, если для корня их элемента <svg> не заданы width и height.

Примеры

Альтернативный текст

Следующий простой пример встраивает изображение с альтернативным текстом в страницу для улучшения доступности.

<img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
     alt="Логотип MDN - изображение динозавра с текстом MDN web docs">

Изображение-ссылка

Этот пример основан на предыдущем и показывает как превратить изображение в ссылку. Это очень просто сделать так — вы вставляете тег <img> внутрь элемента <a>. Также вы должны изменить альтернативный текст, чтобы он описывал назначение ссылки.

<a href="https://developer.mozilla.org">
  <img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
       alt="Посетить сайт MDN">
</a>

Использование атрибута srcset

В этом примере мы добавляем атрибут srcset, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в src на устройствах с высоким разрешением. Изображение указанное в атрибуте src, считается 1x кандидатом в пользовательских агентах, которые поддерживают srcset.

 <img src="mdn-logo-sm.png"
      alt="MDN"
      srcset="mdn-logo-HD.png 2x">

Использование атрибутов srcset и sizes

Атрибут src игнорируется в пользовательских агентах, которые поддерживают srcset, когда добавлены дескрипторы ‘w‘. Когда условие медиавыражения (max-width: 600px) совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиавыражении), иначе будет загружено другое изображение.

 <img src="clock-demo-thumb-200.png"
      alt="Часы"
      srcset="clock-demo-thumb-200.png 200w,
          clock-demo-thumb-400.png 400w"
      sizes="(max-width: 600px) 200px, 50vw">

Проблемы безопасности и приватности

Хотя у элементов <img> есть множество безобидных применений, они могут иметь нежелательные последствия для безопасности и приватности пользователя. Смотрите «Заголовок Referer: проблемы приватности и безопасности (en-US)» для получения дополнительной информации.

Проблемы доступности

Создание значимых альтернативных описаний

Значение атрибута alt должно чётко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут alt намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.

Плохо

<img alt="image" src="penguin.jpg">

Хорошо

<img alt="Пингвин на пляже." src="penguin.jpg">

Когда у изображения отсутствует атрибут alt, некоторые программы чтения с экрана могут объявить вместо него имя файла изображения. Это может привести к путанице, если имя файла не соответствует содержимому изображения.

Дерево решений атрибута alt • Изображения • Веб-руководство WAI по доступности.
Альтернативные тексты: максимальное руководство — Axess Lab.
Как создать отличный альтернативный текст: введение | Deque.
MDN Понимание WCAG, Руководство 1.1. объяснения.
Понимание критерия успешного исхода 1.1.1 | W3C Понимание WCAG 2.0.

Атрибут title

Атрибут title не является приемлемой заменой атрибута alt. Кроме того, избегайте повторения значения атрибута alt в атрибуте title, объявленном на том же изображении.

Атрибут title также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент <figure> вместе с элементом <figcaption>.

Использование HTML-атрибута title — обновлено | The Paciello Group.

Спецификации

Specification
HTML Standard # the-img-element

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

На данный момент мы создали наш первый веб-сайт. К сожалению, в соответствии с современными стандартами хороших веб-страниц, работа ещё не завершена. Так же, как у инженеров есть строгий план строительства или у ресторанов есть правила здоровья и безопасности, так и у веб-разработчиков существует набор правил, определяющих хорошо проделанную работу.

Давайте начнём с имеющегося у нас кода, со всеми элементами, о которых мы узнали.

<h1>Мы ищем разработчика на HTML и CSS</h1>
<img src="image/white-cat.jpg">
<p>Для нашего клиента, Фабрики кошек, <strong>нам нужен 
   квалифицированный веб-разработчик на HTML и CSS</strong>. 
   Мы предлагаем высокую зарплату, мешок кошачьего корма и игрушки.</p>
<p>Не жди, подай заявку! Наша сумасшедшая команда ждёт тебя прямо сейчас, мяу!</p>

В самом верху любой уважающей себя веб-страницы должно быть указание типа документа. Это доктайп.

<!DOCTYPE html>
<h1>Мы ищем разработчика на HTML и CSS</h1>
<img src="image/white-cat.jpg">
<p>Для нашего клиента, Фабрики кошек, <strong>нам нужен 
   квалифицированный веб-разработчик на HTML и CSS</strong>. 
   Мы предлагаем высокую зарплату, мешок кошачьего корма и игрушки.</p>
<p>Не жди, подай заявку! Наша сумасшедшая команда ждёт тебя прямо сейчас, мяу!</p>

Выделенный выше раздел «говорит» браузеру, что эта страница является HTML-документом и код должен рассматриваться в соответствии с установленными стандартами языка. Это информирует браузер о некоторых правилах, которые будут определять, как наш сайт выглядит. Среди прочего, это помогает браузеру узнать, какие теги могут быть разрешены или запрещены. Также помогает браузеру лучше интерпретировать наш код.

Ниже доктайпа мы хотим поставить тег <html>.

<!DOCTYPE html>
<html>
  <h1>Мы ищем разработчика на HTML и CSS</h1>
  <img src="image/white-cat.jpg">
  <p>Для нашего клиента, Фабрики кошек, <strong>нам нужен
     квалифицированный веб-разработчик на HTML и CSS</strong>. 
     Мы предлагаем высокую зарплату, мешок кошачьего корма и игрушки.</p>
  <p>Не жди, подай заявку! Наша сумасшедшая команда ждёт тебя прямо сейчас, мяу!</p>
</html>

Заметьте, что этот тег следует закрыть, так что в конце мы должны добавить </ html>.

<!DOCTYPE html>
<html>
  код
</html>

В результате, всё, что является частью нашего сайта располагается ниже тега <html>. При написании HTML это имеет значение, что код вложен в <html>.

Однако тег <html> не завершён. Мы хотим добавить больше информации о языке нашего сайта. Так как это пример на русском, давайте обозначим его таковым.

<!DOCTYPE html>
<html lang="ru">
  <h1>Мы ищем разработчика на HTML и CSS</h1>
  <img src="image/white-cat.jpg">
  <p>Для нашего клиента, Фабрики кошек, <strong>нам нужен 
     квалифицированный веб-разработчик на HTML и CSS</strong>. 
     Мы предлагаем высокую зарплату, мешок кошачьего корма и игрушки.</p>
  <p>Не жди, подай заявку! Наша сумасшедшая команда ждёт тебя прямо сейчас, мяу!</p>
</html>

Обратите внимание на выделенный фрагмент в изменённом теге <html>. Это называется «атрибут». Атрибуты это модификаторы в HTML и всегда пишутся рядом с тегом, внутри скобок <>. Атрибуты имеют следующий шаблон при написании кода.

тег атрибут="значение"

С ростом, разработчик HTML осваивает больше разных атрибутов. В дополнение к lang есть большой выбор атрибутов. Вот только несколько примеров:

<div id=»sidebar»></div> — имя атрибута id, а его значение sidebar;
<p class=»landscape»></p> — имя атрибута class, а его значение landscape;
<input type=»text»> — имя атрибута type, а его значение text.

Мы используем атрибуты, потому что многие теги (например <html>) не содержат всю информацию, которую мы хотим добавить. С атрибутами мы можем модифицировать используемые теги и добавить для них больше полезной информации. В нашем случае мы сообщаем браузеру информацию, что документ написан на русском языке, поэтому модифицировали тег <html> с помощью атрибута lang и дали ему значение ru (русский).
В одном теге могут встречаться несколько атрибутов. Вот несколько примеров.

<input type="text" value="enter text here">
<a href="http://functionite.com" title="We Train Developers">HTML Training</a>

Важно отметить, что атрибуты также являются частью стандартов HTML, как и вложение тегов. Списки этих атрибутов наряду с тегами, которые они могут модифицировать, можно найти в Интернете.

На самом деле мы уже использовали атрибут, когда первый раз начали создавать веб-страницу! Помните код изображения? Вы поместили его в HTML-документ с помощью следующей строки.

<img src="image/white-cat.jpg">

В этом случае тег <img> был модифицирован атрибутом src со значением images/white-cat.jpg.

Сам по себе тег это лишь <img>, так что если мы просто оставим его в одиночестве, браузер не будет иметь никакой возможности для получения источника информации для отображения. Когда мы определяем src, то говорим браузеру: «Эй, загрузи информацию из этого источника». Браузер знает, что нужно искать папку images и в ней файл white-cat.jpg. Мы также можем передать ссылку на любой ресурс в Интернете (если он не ограничен), например http://4.bp.blogspot.com/-z4sMggeD4dg/UO2TB9INuFI/AAAAAAAAdwc/Kg5dqlKKHrQ/s1600/funny-cat-pictures-032-025.jpg.

В этом суть работы атрибутов. Благодаря атрибутам мы можем добавить богатую и ценную информацию, которая полезна для HTML-тегов.

Теперь вернёмся к нашему документу и добавим другие необходимые компоненты. Взглянем на тег <head>, который содержит элементы, не обязательно полезные для содержимого вашей страницы, но очень полезные для поисковых систем, вкладок браузера и т. д. Например, название веб-страницы помогает поисковым системам находить ваш контент.

<!DOCTYPE html>
<html lang="ru">
  <head>
  </head>
  <h1>Мы ищем разработчика на HTML и CSS</h1>
  <img src="image/white-cat.jpg">
  <p>Для нашего клиента, Фабрики кошек, <strong>нам нужен 
     квалифицированный веб-разработчик на HTML и CSS</strong>. 
     Мы предлагаем высокую зарплату, мешок кошачьего корма и игрушки.</p>
  <p>Не жди, подай заявку! Наша сумасшедшая команда ждёт тебя прямо сейчас, мяу!</p>
</html>

На данный момент наш тег <head> пуст, но обычно это место, в которое вы хотите поместить всю мета-информацию вроде названия всего документа. Так как мы создаём страницу с предложением работы, давайте сообщим об этом в названии «Предложение работы: разработчик на HTML и CSS». Теперь добавим его!

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Предложение работы: разработчик на HTML и CSS</title>
  </head>
  <h1>Мы ищем разработчика на HTML и CSS</h1>
  <img src="image/white-cat.jpg">
  <p>Для нашего клиента, Фабрики кошек, <strong>нам нужен 
     квалифицированный веб-разработчик на HTML и CSS</strong>. 
     Мы предлагаем высокую зарплату, мешок кошачьего корма и игрушки.</p>
  <p>Не жди, подай заявку! Наша сумасшедшая команда ждёт тебя прямо сейчас, мяу!</p>
</html>

Как вы могли заметить, мы добавили название внутрь тега <title>. В чём разница и зачем мы это делаем? На рисунке ниже объясняется, что происходит, если у нас нет тега <title> (слева), и наша страница содержит тег <title> (справа). Сайты с названием более удобны для пользователей браузера и с ними гораздо проще перемещаться среди множества вкладок.

Другим примером служит сайт моей компании. Я использовал «Functionite — JavaScript workshop team» в качестве текста внутри тега <title>. Вот как это показывается в результатах поиска Google:

Как можете видеть, очень важно учитывать это при написании кода вашего сайта. Без названия сайт окажется без имени и будет оставлять плохое впечатление на посетителей. Лично я не стал бы доверять странице, у которой даже нет названия.

Мы должны сделать ещё одну вещь после добавления <head> и вставить тег <body>. Он отделяет содержание всей страницы от <head>. Всё, что отображается на веб-странице, помещается в <body>.

<!DOCTYPE html>
  <html lang="ru">
  <head>
    <title>Предложение работы: разработчик на HTML и CSS</title>
  </head>
  <body>
    <h1>Мы ищем разработчика на HTML и CSS</h1>
    <img src="image/white-cat.jpg">
    <p>Для нашего клиента, Фабрики кошек, <strong>нам нужен 
       квалифицированный веб-разработчик на HTML и CSS</strong>. 
       Мы предлагаем высокую зарплату, мешок кошачьего корма и игрушки.</p>
    <p>Не жди, подай заявку! Наша сумасшедшая команда ждёт тебя прямо сейчас, мяу!</p>
  </body>
</html>

Ура! Это похоже на завершение наших усилий и кажется всё правильно. Для начинающего кодера, вероятно, будет хорошей идеей проверить, всё ли в порядке (например, вложение тегов, правильные атрибуты и др.). Но не у всех есть друзья среди опытных HTML-разработчиков, которые могут проконсультировать. К счастью, имеется специальный инструмент, который мы сможем использовать для проверки правильности кода. Организация W3C, та же группа, что определяет стандарты HTML-документов, сделала инструмент для проверки кода. Инструмент называется HTML-валидатор и доступен по адресу http://validator.w3.org.

Страница должна выглядеть как на картинке ниже.

Validator HTML

Давайте воспользуемся инструментом и проверим наш код на корректность.

Ой! У нас есть одна ошибка и несколько предупреждений. Взглянем на них.

Единственная ошибка, о которой сообщает валидатор, связана с нашим изображением. Посмотрим на содержание ошибки.

Элемент img должен иметь атрибут alt, за исключением определённых условий. Для получения подробной информации обратитесь к руководству об альтернативном тексте для изображений.

Получается, что тег <img> в документе всегда должен иметь атрибут alt, который будет использоваться в случае, если браузер не сможет загрузить изображение. Тогда вместо него будет отображаться значение этого атрибута (это лучше, чем пустое пространство, верно?).

Перед выбором значения для атрибута alt давайте обратимся к спецификации HTML, чтобы убедиться, что мы делаем всё правильно. Вот эта страница.

Даёт резервное содержание для изображения. Требования к значению атрибута alt описаны в следующем разделе.

И дальше идут несколько различных сценариев того, когда и как использовать атрибут alt. В нашем случае мы имеем дело с изображением, которое было добавлено для оформления поста и не содержит какого-либо содержания, схемы, или другой информации для читателя. В этом случае мы, согласно спецификации, должны оставить альтернативный атрибут пустым.

Однако декоративные изображения, которые не обсуждаются в окружающем тексте, но в некотором смысле уместны, могут быть включены на страницу с помощью элемента img. Такие изображения являются декоративными и они по-прежнему формально относятся к части контента. В таких случаях атрибут alt должен присутствовать, но его значение должно быть пустой строкой.

В остальных случаях мы хотели бы выбрать текстовую строку, которая может заменить содержание картинки. Подробные указания по некоторым особым случая можно найти в спецификации для тега <img> здесь: http://www.w3.org/wiki/HTML/Elements/img.

Итак, теперь мы знаем, что хотим оставить атрибут alt пустым.

Добавим его.

<img src="image/white-cat.jpg" alt="Согласно валидатору w3c какие атрибуты обязательно должны быть у элемента img чтобы не было ошибки">

И затем проверим наш документ в валидаторе снова.

Всё прошло без ошибок!

Но у нас по-прежнему есть несколько предупреждений. Наиболее важное из них следующее.

Информация о кодировке символов не обнаружена в документе, либо внутри метаэлемента HTML или декларации XML. Она часто рекомендуется, чтобы объявить кодировку в самом документе, особенно, если есть шанс, что документ будут читать или сохранять на диске, CD и т. д.

Но не волнуйтесь, это просто предупреждение. Прежде чем мы попытаемся его понять, рассмотрим следующий пример, который позволит нам лучше понять проблему.

Важно понимать, что ваш сайт могут посещать люди из разных стран, таких как Испания, Китай или Швеции, не говоря уже об остальных. Если вы позволите, они могут оставить комментарий или сообщение, которое, возможно, будет отображаться рядом с вашими статьями. Важно отметить, однако, что в разных странах используются различные языки с их собственными диакритическими знаками. В шведском это может быть ä или ö, в то время как китайский предложит вам целый набор таких 汉语拼音方案. В глобальной сети важно, чтобы разные языки правильно отображались на одной странице. Посмотрим, что случится, если бы мы использовали китайский язык.

<p>PS 再见</p>

Проверим эффект в браузере.

Обратите внимание на последнюю строку, где вместо правильного предложения на китайском, мы видим какие-то странные символы, которые не имеют смысла в любом из современных языков. Не паникуйте, это связано с предупреждением, что мы получили от валидатора. Оказывается мы не добавили особую строку, которая позволяет другим языкам отображаться правильно. В мире компьютеров она называется «кодировка символов». Если мы передали эту информацию HTML-странице, то «говорим» браузеру, чтобы он был готов отобразить широкий набор символов, включая все разные диакритические знаки.

Сделаем это!

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Предложение работы: разработчик на HTML и CSS</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Мы ищем разработчика на HTML и CSS</h1>
    <img src="image/white-cat.jpg" alt="Согласно валидатору w3c какие атрибуты обязательно должны быть у элемента img чтобы не было ошибки">
    <p>Для нашего клиента, Фабрики кошек, <strong>нам нужен квалифицированный 
       веб-разработчик на HTML и CSS</strong>. Мы предлагаем высокую зарплату, 
       мешок кошачьего корма и игрушки.</p>
    <p>Не жди, подай заявку! Наша сумасшедшая команда ждёт тебя прямо сейчас, мяу!</p>
  </body>
</html>

На этот раз мы должны использовать особый тег <meta> с атрибутом charset и дать ему значение utf-8. utf-8 означает специальную кодировку, которая включает большинство языков мира, если не все.

И это всё! Вы только что создали свой самый первый сайт! Поздравляем!

Последнее изменение: 11.08.2018

HTML Изображения

Изображения — лучшее украшение веб-документа. Благодаря изображениям мы можем улучшить вид сайта, сделать его ярче, интереснее и удобнее для пользователей. Под изображениями подразумевают значки, рисунки, фотографии и карты изображений, занимающие часть окна браузера. Для вставки изображения в веб-страницу используется одинарный строчный тег <img>. Для него должны быть указаны следующие два атрибута:

Атрибут «src».

Собственно, по-настоящему обязательный атрибут у тега <img> только один — это атрибут src. Атрибут src (от англ. source — источник) позволяет указать путь к изображению, которое должно быть отображено в HTML-документе. URL — обязательный параметр, который указывает браузеру, где находится изображение. В основном на сайтах используется графика файловых форматов: JPEG, GIF, PNG, BMP и SVG.

Если изображение находится в том же каталоге, что и содержащий его HTML-документ, достаточно указать только имя этого файла, например:

Если изображение находится на том же сервере, что и содержащий его HTML-документ, но в другом каталоге, следует указать имя каталога и имя файла с изображением, например:

<img src="pictures/nameimage.gif">

Если изображение находится не на том сервере, на котором находится содержащий его HTML-документ, необходимо указать полный адрес файла с изображением, например:

<img src="httр://www.wm-school.ru/pictures/nameimage.gif">

При такой записи размер изображения на экране будет соответствовать его реальным размерам.

Атрибут «alt».

При отображении веб-документа прежде всего загружается текстовая часть, а затем — более ёмкие графические файлы. При медленном Интернете вы можете заметить как в окне браузера вместо этих файлов сначала появляются прямоугольные области, зарезервированные под рисунки. Img является строчным элементом. По умолчанию изображение будет выводиться в общем потоке как одна большая буква в том месте, где встретится элемент img. Как правило, первоначальные изображения представляются в виде небольшой пиктограммы в виде прямоугольника. Уже на этом этапе можно дать знать пользователю, загрузку какого изображения он ожидает. Это очень полезно для пользователей текстовых браузеров или для тех, у кого отключено воспроизведение графики. Для отображения такого поясняющего текста служит атрибут alt. Он позволяет добавить альтернативный текст, который будет отображаться вместо изображения, если по каким-либо причинам графический файл загрузить не удалось. Кроме того, атрибут alt используется поисковыми системами для поиска по содержимому альтернативному тексту картинок в Интернете.

	Даже если вам нечего сказать об загружаемом изображении, атрибут alt все равно нужно указывать, присваивая ему пустое значение: alt=»». Иначе валидатор обнаружит изображение без атрибута alt и сообщит об ошибке.

В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Теоретически, если рисунок не может быть найден, вместо него выводится значение атрибута alt:

Пример HTML:

Попробуй сам

<p><img src="rabbit.gif" alt="Это кролик"></p>
<p><img src="errorname.gif" alt="Это слон"></p>

Атрибуты «width» и «height»

Вы уже знаете, что браузер загружает изображения после того, как загрузит HTML-документ и начнет отображать веб-страницу. И если вы отдельно не укажете размеры изображения, то браузер не будет их знать до тех пор, пока не загрузит рисунок. В этом случае вместо изображения сначала отображается квадратик, а после загрузки графического файла происходит обновление страницы с соответствующим перемещением текста, других объектов страницы и потерей времени. Если же размеры заданы, то браузер оставляет место для изображения и страница загружается быстрее. Вы также можете указать значения атрибутов width и height, которые меньше или больше, чем фактические размеры изображения, и браузер установит пропорции рисунка так, чтобы они соответствовали новым размерам.
Их значения можно указывать в пикселах или процентах от размера окна (в этом случае после размера ставится знак %). Если после числовых значений атрибутов размерность не указана явно то, по-умолчанию, браузер интерпретирует эти величины в пикселях.

Пример: использования атрибутов width и height

	Если вам нужно значительно изменить размеры изображения, то используйте специальные графические редакторы для работы с изображениями. Они смогут изменить размеры изображения вовсе без искажений.

Если указан только один из атрибутов, то второй вычисляется автоматически с сохранением пропорций. При этом размер загружаемого изображения не изменяется, но время на его трансформацию, естественно, требуется. При больших размерах файла затраты времени, при этом, могут быть достаточно ощутимыми.

Если вы используете атрибуты width и height для того, чтобы изменить размеры изображения в браузере, то можно сказать, что вы применяете их для оформления веб-страницы, а в этом случае, лучше использовать CSS, что позволит добиться тех же результатов. Вы можете использовать атрибут style указав свойства width и height изображения:

<img src="images/orange.jpg" alt="апельсин" style="width:150px;height:147px;">

Размеры изображения и CSS

В HTML5 приемлемы оба вышеприведенных способа задания размеров изображения.
Однако, вместо того чтобы использовать атрибуты width и height элемента <img>, как указано выше, целесообрзнее установить размер с помощью CSS. Это может дать вам дополнительную гибкость при отображениии картинки на странице.

Если изображение не помещается внутри области содержимого при просмотре на устройстве с небольшим экраном (например, мобильный телефон), пользователю приходится прокручивать страницу по горизонтали или уменьшать масштаб, чтобы увидеть картинку полностью, при этом, он испытывает большие неудобства.
В таких случаях предпочтительнее указать в атрибуте style значения max-width или max-height вместо абсолютных размеров.
В следующем примере мы используем max-width:100% для того, чтобы изображение не было слишком большим для своего контекста. При использовании только max-width (без использования max-height), браузер будет масштабировать изображение пропорционально. Другими словами, высота будет масштабируется вместе с шириной, а изображение не будет искажаться.

Обратите внимание, как будет отображаться изображение при изменении размеров окна браузера. Если у вас достаточно большой экран, изображение должно отображаться в разных измерениях.

<img src="images/camel.jpg" style="max-width:100%" alt="Верблюд">

Карты-изображения

Карта изображений (Image Map) позволяет привязывать ссылки к разным областям одного изображения. Щелкая мышью по отдельным фрагментам изображения, пользователь может переходить по той или иной ссылке на разные веб-страницы.
Карты в HTML создаются с помощью тега <map>, а области-ссылки в них с помощью тега <area>.
Атрибут name тега <map> связан с атрибутом usemap и создает связь между изображением и картой.


<img src="images/foto_elem.jpg" alt="Карта изображений" style="width:450px;height:292px;" usemap="#mykarta">
<map name="mykarta">
  <!-- прямоугольник с координатами в верхнем левом углу изображения (133,163)-->
  <area shape="rect" coords="133,163,414,252" 
  title="Зажигалка" href="javascript:alert('Это прямоугольная ссылка');"> 
  <!-- круг с радиусом в 40 пикселей и центром, расположенном в точке (58, 158) -->
  <area shape="circle"" coords="58,158,40" 
  title="Монета" href="javascript:alert('Вы выбрали круг');">
  <!-- многоугольник с координатами вершин (133,62), (278,59) и т.д. --> 
  <area shape="poly" coords="133,62,278,59,284,24,407,22,410,130,285,134,278,96,133,95" 
  title="Ключ от авто" href="images/auto500.jpg" target=_blank> 
</map>

Пример карты-изображения (по фрагментам изображения можно щелкать):

Атрибуты тега <area>:

Название атрибута	Описание
shape	Очертания области. Возможные значения атрибута: rect – прямоугольник; circle – круг; poly – многоугольник.
coords	Координаты области: Для прямоугольника – координаты левого верхнего и правого нижнего углов. Для круга – координаты центра и радиус. Для многоугольника – координаты всех углов.
href	URL-адрес файла, на который делается ссылка.
title	Всплывающий текст, появляющийся при наведении курсора на заданную область.
alt	Текстовое описание области. Служит альтернативой при отключенной в браузере загрузке изображений.

Задачи

Путь к изображению

В приведенном коде ошибочно указан путь к изображению «face_smiley.jpg» вместо «smiley.jpg». Исправьте ошибку.
Задача HTML:

Реши сам »
```
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Путь к изображению</title>  
 </head>
 <body>
  <p><img src="face_smiley.jpg" style="width:100px;height:75px;"></p>
 </body>
</html>
```

Альтернативный текст

Изображение в данном примере не может быть отображено веб-браузером. Укажите для изображения альтернативный текст «wm-school.ru», который необходим для пользователей текстовых браузеров или для тех, у кого отключено воспроизведение графики.
Задача HTML:

Реши сам »
```
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Альтернативный текст</title>  
 </head>
 <body>
  <p><img src="wm-school.jpg" style="width:100px;height:75px;"></p>
 </body>
</html>
```

Изображение-ссылка

Сделайте изображение абсолютной ссылкой, ведущей на сайт «www.wm-school.ru».

Задача HTML:

Реши сам »

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Изображение-ссылка</title>  
 </head>
 <body>
  <p><img src="smiley.jpg" alt="Уроки HTML" style="width:100px;height:75px;"></p>
 </body>
</html>

Размеры изображения

С помощью HTML увеличьте изображение в 2 раза.
Задача HTML:

Реши сам »
```
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Размеры изображения</title>  
 </head>
 <body>
  <p><img src="smiley.jpg" alt="Смайлик" style="width:100px;height:75px;"></p>
 </body>
</html>
```

Изображение в 100%

Сделайте чтобы изображение отображалось полностью вне зависимости от ширины окна браузера.
Изменяйте размер окна браузера с помощью растягивания/сужения размера или меняйте масштаб с помощью Ctrl+»+» / Ctrl+»-«.
Задача HTML:

Реши сам »
```
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Изображение в 100%</title>  
 </head>
 <body>
  <p><img src="../images/ship1000.jpg" alt="Согласно валидатору w3c какие атрибуты обязательно должны быть у элемента img чтобы не было ошибки" style="width:1000px;height:563px;"></p>
 </body>
</html>
```

Источник

This is what the W3C Validator prints for an img tag without an alt attribute:

«An img element must have an alt attribute, except under certain conditions.»

I can’t find anything about it… at least nothing more than what the alt tag is about.

Does anybody know what conditions?

asked Mar 25, 2014 at 16:06

The W3 outlines the reason:

In some cases an image is included in a published document, but the
author is unable to provide an appropriate text alternative. In such
cases the minimum requirement is to provide a caption for the image
using the figure and figcaption elements under the following
conditions:

The img element is in a figure element

The figure element contains a figcaption element

The figcaption element contains content other than inter-element whitespace

Ignoring the figcaption element and its descendants, the figure element has no Text node descendants other than inter-element
whitespace, and no embedded content descendant other than the img
element.

In other words, the only content of the figure is an img element and a
figcaption element, and the figcaption element must include (caption)
content.

Such cases are to be kept to an absolute minimum. If there is even the
slightest possibility of the author having the ability to provide real
alternative text, then it would not be acceptable to omit the alt
attribute.

Code example of an allowable case for no alt attribute:

<figure>
<img src="clara.jpg">
<figcaption>clara.jpg, taken on 12/11/2010.</figcaption>
</figure>

WHATWG.org adds:

A conformance checker must report the lack of an alt attribute as an
error unless one of the conditions listed below applies:

The img element is in a figure element that satisfies the conditions described above.

The img element has a title attribute with a value that is not the empty string (also as described above).

The conformance checker has been configured to assume that the document is an e-mail or document intended for a specific person who
is known to be able to view images.

The img element has a (non-conforming) generator-unable-to-provide-required-alt attribute whose value is the
empty string. A conformance checker that is not reporting the lack of
an alt attribute as an error must also not report the presence of the
empty generator-unable-to-provide-required-alt attribute as an error.
(This case does not represent a case where the document is conforming,
only that the generator could not determine appropriate alternative
text — validators are not required to show an error in this case,
because such an error might encourage markup generators to include
bogus alternative text purely in an attempt to silence validators.
Naturally, conformance checkers may report the lack of an alt
attribute as an error even in the presence of the
generator-unable-to-provide-required-alt attribute; for example, there
could be a user option to report all conformance errors even those
that might be the more or less inevitable result of using a markup
generator.)

answered Mar 25, 2014 at 16:12

Источник

Так как атрибут alt HTML-элемента <img> является обязательным, то, если он будет опущен, при валидации на Validator.W3.Org будет возникать следующая ошибка:
An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

Указывать атрибут alt нужно всегда, однако заполнять его значение лучше только для значимых изображений, а в остальных случаях (для элементов конструкции сайта (например, иконок) и тому подобном) значение рекомендуется опустить:

<img src="image.png" alt="Согласно валидатору w3c какие атрибуты обязательно должны быть у элемента img чтобы не было ошибки">

Рекомендации по оформлению и подбору контента

27.06.2014

Источник

Rocket Validator integrates the W3C Validator HTML checker
into an automated web crawler.

img
role
aria

A single <img> element is used to embed an image, so adding the img role to it is redundant.

The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner, for example:

<div role="img" aria-label="Description of the overall image">
  <img src="graphic1.png" alt="">
  <img src="graphic2.png">
</div>

Learn more:

MDN: ARIA img role

Related W3C validator issues

Источник

List of Elements
- Embedded Content
  - img
  - iframe
  - embed
  - object
  - param
  - video
  - audio
  - source
  - track
  - canvas
  - map
  - area
  - math
  - svg
  - applet
  - frame
  - frameset
  - noframes
  - bgsound
  - noembed
  - plaintext

1 <img>
- 1.1 Point
- 1.2 HTML Attributes
- 1.3 Requirements for providing text to act as an alternative for images
  - 1.3.1 A link or button containing nothing but the image
  - 1.3.2 A phrase or paragraph with an alternative graphical representation
  - 1.3.3 A short phrase or label with an alternative graphical representation
  - 1.3.4 Text that has been rendered to a graphic for typographical effect
  - 1.3.5 A graphical representation of some of the surrounding text
  - 1.3.6 A purely decorative image that doesn’t add any information
  - 1.3.7 A group of images that form a single larger picture with no links
  - 1.3.8 A group of images that form a single larger picture with links
  - 1.3.9 A key part of the content
  - 1.3.10 An image not intended for the user
  - 1.3.11 An image in an e-mail or private document intended for a specific person who is known to be able to view images
- 1.4 Example
  - 1.4.1 Example A
- 1.5 HTML Reference

<img>

The <img> element represents an image.

Point

The image given by the src attribute is the embedded content, and the value of the alt attribute is the img element’s fallback content.

Example of images:
- PNG
- JPEG
- GIF
- single-page PDF
- XML file with an SVG root elemet
- APNG
- animated GIF …

However, this also precludes SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text documents, and so forth.

HTML Attributes

alt = normal character data
Gives the fallback content for the image.
The requirements on the alt attribute’s value are described in the next section.

src = URL potentially surrounded by spaces
Specifies a URL referencing a non-interactive, optionally animated, image that is neither paged nor scripted.

usemap = hash-name reference
Specifies a hash-name reference to a map element with which to associate the object.

ismap = boolean
Specifies that its img element provides access to a server-side image map.

width = non-negative integer
Give the width of the visual content of the element, in CSS pixels.

height = non-negative integer
Give the height of the visual content of the element, in CSS pixels.

Requirements for providing text to act as an alternative for images

A link or button containing nothing but the image

When an a element that creates a hyperlink, or a button element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of the link or button.

In this example, a user is asked to pick his preferred color from a list of three. Each color is given by an image, but for users who have configured their user agent not to display images, the color names are used instead:

<h1>Pick your color</h1>
<ul>
  <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
  <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
  <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
</ul>

A phrase or paragraph with an alternative graphical representation

Sometimes something can be more clearly stated in graphical form, for example as a flowchart, a diagram, a graph, or a simple map showing directions. In such cases, an image can be given using the img element, but the lesser textual version must still be given, so that users who are unable to view the image (e.g. because they have a very slow connection, or because they are using a text-only browser, or because they are listening to the page being read out by a hands-free automobile voice Web browser, or simply because they are blind) are still able to understand the message being conveyed.

It is important to realize that the alternative text is a replacement for the image, not a description of the image.

In the following example we have a flowchart in image form, with text in the alt attribute rephrasing the flowchart in prose form

<p>In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.</p>
<p><img src="images/parsing-model-overview.png" alt="The network
passes data to the Tokenizer stage, which passes data to the Tree
Construction stage. From there, data goes to both the DOM and to
Script Execution. Script Execution is linked to the DOM, and, using
document.write(), passes data to the Tokenizer."></p>

A short phrase or label with an alternative graphical representation

A document can contain information in iconic form. The icon is intended to help users of visual browsers to recognize features at a glance.

In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, the alt attribute must be present but must be empty.

In the following snippets, all four of the above cases are present. First, we see a logo used to represent a company:

<h1><img src="w3c.png" alt="W3C"></h1>

Next, we see a paragraph which uses a logo right next to the company name, and so doesn’t have any alternative text:

<article>
  <h2>News</h2>
  <p>W3C<img src="w3c.png" alt="Согласно валидатору w3c какие атрибуты обязательно должны быть у элемента img чтобы не было ошибки"> was ...</p>
</article>

In this third snippet, we have a logo being used in an aside, as part of the larger article discussing the acquisition:

<aside><p><img src="w3c.png" alt="Согласно валидатору w3c какие атрибуты обязательно должны быть у элемента img чтобы не было ошибки"></p></aside>

Finally, we have an opinion piece talking about a logo, and the logo is therefore described in detail in the alternative text.

<p>Consider for a moment their logo:</p>
<p><img src="w3c.png" alt="It is written W3C by a white character, and the background is blue."></p>

Text that has been rendered to a graphic for typographical effect

Sometimes, an image just consists of text, and the purpose of the image is not to highlight the actual typographic effects used to render the text, but just to convey the text itself.

In such cases, the alt attribute must be present but must consist of the same text as written in the image itself.

<h1><img src="earthdayheading.png" alt="Earth Day"></h1>

A graphical representation of some of the surrounding text

A document can contain information in iconic form. The icon is intended to help users of visual browsers to recognize features at a glance.

In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, the alt attribute must be present but must be empty.

A purely decorative image that doesn’t add any information

In general, if an image is decorative but isn’t especially page-specific, for example an image that forms part of a site-wide design scheme, the image should be specified in the site’s CSS, not in the markup of the document.

However, a decorative image that isn’t discussed by the surrounding text but still has some relevance can be included in a page using the img element. Such images are decorative, but still form part of the content. In these cases, the alt attribute must be present but its value must be the empty string.

A group of images that form a single larger picture with no links

When a picture has been sliced into smaller image files that are then displayed together to form the complete picture again, one of the images must have its alt attribute set as per the relevant rules that would be appropriate for the picture as a whole, and then all the remaining images must have their alt attribute set to the empty string.

In the following example, a picture representing a company logo for W3C has been split into two pieces, the first containing the letters «W3» and the second with the word «C». The alternative text («W3C») is all in the first image.

<h1><img src="logo1.png" alt="W3C"><img src="logo2.png" alt="Согласно валидатору w3c какие атрибуты обязательно должны быть у элемента img чтобы не было ошибки"></h1>

A group of images that form a single larger picture with links

Generally, image maps should be used instead of slicing an image for links.

However, if an image is indeed sliced and any of the components of the sliced picture are the sole contents of links, then one image per link must have alternative text in its alt attribute representing the purpose of the link.

<p>
  <a href="?go=left" ><img src="fsm-left.png"  alt="Left side. "></a>
  <img src="fsm-middle.png" alt="Согласно валидатору w3c какие атрибуты обязательно должны быть у элемента img чтобы не было ошибки">
  <a href="?go=right"><img src="fsm-right.png" alt="Right side."></a>
</p>

A key part of the content

In some cases, the image is a critical part of the content. This could be the case, for instance, on a page that is part of a photo gallery. The image is the whole point of the page containing it.

How to provide alternative text for an image that is a key part of the content depends on the image’s provenance.

The general case
When it is possible for detailed alternative text to be provided, for example if the image is part of a series of screenshots in a magazine review, or part of a comic strip, or is a photograph in a blog entry about that photograph, text that can serve as a substitute for the image must be given as the contents of the alt attribute.

<img src="sales.gif"
     title="Sales graph"
     alt="From 1998 to 2005, sales increased by the following percentages
     with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">

Images that defy a complete description
In certain cases, the nature of the image might be such that providing thorough alternative text is impractical. For example, the image could be indistinct, or could be a complex fractal, or could be a detailed topographical map.
In these cases, the alt attribute must contain some suitable alternative text, but it may be somewhat brief.

<figure>
 <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
 symmetry with indistinct edges, with a small gap in the center, two
 larger gaps offset slightly from the center, with two similar gaps
 under them. The outline is wider in the top half than the bottom
 half, with the sides extending upwards higher than the center, and
 the center extending below the sides.">
 <figcaption>A black outline of the first of the ten cards
 in the Rorschach inkblot test.</figcaption>
</figure>

Images whose contents are not known
In some unfortunate cases, there might be no alternative text available at all, either because the image is obtained in some automated fashion without any associated alternative text (e.g. a Webcam), or because the page is being generated by a script using user-provided images where the user did not provide suitable or usable alternative text (e.g. photograph sharing sites), or because the author does not himself know what the images represent (e.g. a blind photographer sharing an image on his blog).
In such cases, the alt attribute may be omitted, but one of the following conditions must be met as well:
- The title attribute is present and has a non-empty value.
- The img element is in a figure element that contains a figcaption element that contains content other than inter-element whitespace, and, ignoring the figcaption element and its descendants, the figure element has no text node descendants other than inter-element whitespace, and no embedded content descendant other than the img element.

An image not intended for the user

Generally authors should avoid using img elements for purposes other than showing images.

If an img element is being used for purposes other than showing an image, e.g. as part of a service to count page views, then the alt attribute must be the empty string.

In such cases, the width and height attributes should both be set to zero.

An image in an e-mail or private document intended for a specific person who is known to be able to view images

When an image is included in a private communication (such as an HTML e-mail) aimed at a specific person who is known to be able to view images, the alt attribute may be omitted. However, even in such cases it is strongly recommended that alternative text be included (as appropriate according to the kind of image involved, as described in the above entries), so that the e-mail is still usable should the user use a mail client that does not support images, or should the document be forwarded on to other users whose abilities might not include easily seeing images.

Example

Example A

Here’s another example, showing a good solution and a bad solution to the problem of including an image in a description.

First, here’s the good solution. This sample shows how the alternative text should just be what you would have put in the prose if the image had never existed.

<p>
  You are standing in an open field west of a house.
  <img src="house.jpeg" alt="The house is white, with a boarded front door.">
  There is a small mailbox here.
</p>

Second, here’s the bad solution. In this incorrect way of doing things, the alternative text is simply a description of the image, instead of a textual replacement for the image. It’s bad because when the image isn’t shown, the text doesn’t flow as well as in the first example.

<!-- do not copy this example, it is an example of bad usage! -->
<p>
  You are standing in an open field west of a house.
  <img src="house.jpeg" alt="A white house, with a boarded front door.">
  There is a small mailbox here.
</p>

HTML Reference

The HTML5 specification defines the <img> element in 4.8.1 The img element.

Источник

Интерактивный пример

Поддерживаемые форматы изображений

Firefox

Ошибки загрузки изображения

Атрибуты

Устаревшие атрибуты

Взаимодействие с CSS

Примеры

Альтернативный текст

Изображение-ссылка

Использование атрибута srcset

Использование атрибутов srcset и sizes

Проблемы безопасности и приватности

Проблемы доступности

Создание значимых альтернативных описаний

Плохо

Хорошо

Атрибут title

Спецификации

Поддержка браузерами

Смотрите также

HTML Изображения

Атрибут «src».

Атрибут «alt».

Пример HTML:

Атрибуты «width» и «height»

Пример: использования атрибутов width и height

Размеры изображения и CSS

Карты-изображения

Задачи

Путь к изображению

Задача HTML:

Альтернативный текст

Задача HTML:

Изображение-ссылка

Задача HTML:

Размеры изображения

Задача HTML:

Изображение в 100%

Задача HTML:

Related W3C validator issues

Contents

<img>

Point

HTML Attributes

Requirements for providing text to act as an alternative for images

A link or button containing nothing but the image

A phrase or paragraph with an alternative graphical representation

A short phrase or label with an alternative graphical representation

Text that has been rendered to a graphic for typographical effect

A graphical representation of some of the surrounding text

A purely decorative image that doesn’t add any information

A group of images that form a single larger picture with no links

A group of images that form a single larger picture with links

A key part of the content

An image not intended for the user

An image in an e-mail or private document intended for a specific person who is known to be able to view images

Example

Example A

HTML Reference

Возможно, вам также будет интересно: