Согласно валидатору 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="">

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

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

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

Информация о кодировке символов не обнаружена в документе, либо внутри метаэлемента 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="">
    <p>Для нашего клиента, Фабрики кошек, <strong>нам нужен квалифицированный 
       веб-разработчик на HTML и CSS</strong>. Мы предлагаем высокую зарплату, 
       мешок кошачьего корма и игрушки.</p>
    <p>Не жди, подай заявку! Наша сумасшедшая команда ждёт тебя прямо сейчас, мяу!</p>
  </body>
</html>

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

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

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

Источник

I have an IMG tag in my HTML5 document that reads:

<img src="elements/background.png" alt="" width="100%" height="100%" />

When I run the document through the W3C validator (doctype is HTML5, encoding is UTF-8), it comes up with two error messages, one for the width attribute and one for the height attribute. Both say something to the effect of, «Expected a digit but saw % instead.»

I checked on the W3C website, and the width and height attributes for the IMG tag both still support percentages in HTML5. What’s going on?

asked Feb 6, 2011 at 2:16

According to W3C:

[…] The attributes, if specified, must have values that are valid non-negative integers.

4.8.16 Dimension attributes

Change the values to integers or use CSS.

answered Feb 6, 2011 at 2:27

vingavinga

1,90220 silver badges33 bronze badges

Using percentages do work, but I guess it has been discontinued in later versions of HTML… I have used it before, like 7 to 8 years ago…

Here is the link which provides the information for the percentages:

HTML — Images & Pictures

Height and width values can also be a percentage. Percentage values
are relative to the parent HTML element (usually the body), which
means if you have a parent element like a element that is the
whole screen (1024×768), then an image with a height and width of 100%
will take up that entire body element (1024×768). In our example
below, we have placed the image in a table element that is about 400
pixels wide by 200 pixels tall.

answered Jan 10, 2014 at 7:12

I inserted this in the header of my page

<style>
img
{   
    width: 30%;
    height: auto;
    border: solid 1px black;
}
</style>

It does make all of the images on the page have the same width, but this is a page needing just
one image. It stopped the nasty ululations from the HTML5 validator.

answered Jun 4, 2014 at 17:43

ncmathsadistncmathsadist

4,6143 gold badges30 silver badges44 bronze badges

I believe you’re misreading the specification, which says «in pixels».

Ref. img – image

answered Feb 6, 2011 at 2:28

Jonathan FeinbergJonathan Feinberg

44.1k6 gold badges79 silver badges103 bronze badges

Yes, width and height have been supported as a percentage — very useful for mobile devices and resizing based upon the device resolution. HTML5 however, does not (sigh).

Just try this dummy with and without the doctype

<!-- !doctype html -->
<html>
<head></head>
<body>
<style type="text/css">
  .pics { background-color:black !important;
  border:dashed red 2px;
             color:white;
margin:1px; padding:1px; height:65% !important;
   }
</style>
<div>
<span>just junk<br></span>
<span>
<img class="pics" src="any_image_you_like.jpg" >
</span>
<div>
</body</html>

Save and open the file — now resize the browser window.

answered Jan 27, 2014 at 22:15

jobeardjobeard

992 silver badges3 bronze badges

Источник

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

Источник

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

Источник

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="" style="width:1000px;height:563px;"></p>
 </body>
</html>
```

Источник

0 / 0 / 0

Регистрация: 18.11.2016

Сообщений: 2

18.11.2016, 17:53. Показов 2712. Ответов 1

Подскажите, пожалуйста, как в спецификации HTML 5 посмотреть, какие атрибуты обязательны для данного тега. в HTML4 было указано, какой из атрибутов Required. Например, для img в HTML4 было прописано, что src и alt -обязательные. В 5-м просто перечисление

Content attributes:
Global attributes
alt — Replacement text for use when images are not available
src — Address of the resource
crossorigin — How the element handles crossorigin requests
usemap — Name of image map to use
ismap — Whether the image is a server-side image map
width — Horizontal dimension
height — Vertical dimension
Tag omission in text/html:

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь

Модератор

Эксперт JS Эксперт HTML/CSS

3824 / 2674 / 1521

Регистрация: 12.07.2015

Сообщений: 6,674

Записей в блоге: 4

18.11.2016, 19:14

An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. www.w3.org, img

Атрибут alt должен быть, но он не обязательный. Для <img> обязательным атрибутом является src. В списке «Permitted attributes » обязательные атрибуты выделы звездочкой.
Находите элемент в спецификации и читаете. И не забывайте пользоваться валидатором, который мало того, что укажет на ошибки, так еще и даст ссылку на спецификацию, где об этой ошибке можно почитать.

Источник

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

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

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

Firefox

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

Атрибуты

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

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

Примеры

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

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

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

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

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

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

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

Плохо

Хорошо

Атрибут title

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

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

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

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

Атрибут «src».

Атрибут «alt».

Пример HTML:

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

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

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

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

Задачи

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

Задача HTML:

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

Задача HTML:

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

Задача HTML:

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

Задача HTML:

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

Задача HTML:

А вот еще интересные материалы: