img - котятки на странице

[Makha]

img элемент представляет собой изображение.

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

src атрибут должен присутствовать, и должен содержать действительный непустой URL потенциально окруженные пробелами

Изображения могут таким образом быть статическими битовыми массивами (например. PNGs, GIFs, JPEG), документы вектора единственной страницы (единственная страница, PDFs, XML-файлы с корневым элементом SVG), анимировал битовые массивы (APNGs, анимированный GIFs), анимированная векторная графика (XML-файлы с корневым элементом SVG, которые используют декларативную анимацию SMIL), и т.д. Однако, этот тег не поддерживает файлы SVG со сценарием, многостраничные файлы PDF, интерактивные файлы MNG, документы HTML, документы простого текста, и т.д.

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

usemap атрибут, если он присутствует, может означать, что изображение имеет ассоциированное изображение карты .

ismap атрибут логический атрибут . Атрибут не должен быть определен на элементе, у которого нет предка a элемента с href атрибутом.

ismap атрибут обеспечивает доступ к серверной карте изображения. Это влияет, как события обработаны на соответствии a элемент.

img элемент поддерживает атрибуты размерности.

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

<article>
 <h1>My cats</h1>
 <h2>Fluffy</h2>
 <p>Fluffy is my favorite.</p>
 <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
 <p>She's just too cute.</p>
 <h2>Miles</h2>
 <p>My other cat, Miles just eats and sleeps.</p>
</article>

<article>
 <h1>Photography</h1>
 <h2>Shooting moving targets indoors</h2>
 <p>The trick here is to know how to anticipate; to know at what speed and
 what distance the subject will pass by.</p>
 <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
 photographed quite nicely using this technique.">
 <h2>Nature by night</h2>
 <p>To achieve this, you'll need either an extremely sensitive film, or
 immense flash lights.</p>
</article>

<article>
 <h1>About me</h1>
 <h2>My pets</h2>
 <p>I've got a cat named Fluffy and a dog named Miles.</p>
 <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
 <p>My dog Miles and I like go on long walks together.</p>
 <h2>music</h2>
 <p>After our walks, having emptied my mind, I like listening to Bach.</p>
</article>

<article>
 <h1>Fluffy and the Yarn</h1>
 <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p>
 <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
 <p>He would play in the morning, he would play in the evening.</p>
</article>

Наиболее общее правило рассмотреть при записи альтернативного текста является следующим: намерение состоит в том что замена каждого изображения с текстом alt атрибут не изменяет значение страницы.

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

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

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

<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>

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

Текст должен быть подан alt атрибут, и должен передать то же самое сообщение как изображение, определенное в src атрибут.

Важно понять, что альтернативный текст - замена для изображения, не описание изображения.

<p>In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from sсript.</p>
<p><img src="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
sсript Execution. sсript Execution is linked to the DOM, and, using
document.write(), passes data to the Tokenizer."></p>

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

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

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

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

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

Когда изображение содержит текст, то в атрибуте alt должен быть тот же самый текст.

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

<p>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 sсript Execution. sсript Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.</p>
<p><img src="parsing-model-overview.png" alt=""></p>

Если изображение представлено группой изображений, то содержание изображения должно быть представлено только в 1 атрибуте alt, все остальные должны быть пусты.

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

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

График в финансовом отчете:
<img src = "sales.gif"title="Sales graph"
     alt="С 1998 до 2005, продажи увеличились на следующие проценты с каждым годом: 624 %, 75 %, 138 %, 40 %, 35 %, 9 %, 21 %">

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

Если изображение сложное для описания, то alt можно написать кратко.
В некоторых неудачных случаях не могло бы быть никакого альтернативного текста, доступного вообще, также потому что изображение получено некоторым автоматизированным способом без любого связанного альтернативного текста (например, Веб-камера), или потому что страница сгенерирована сценарием, используя предоставленный пользователем изображения, где пользователь не обеспечивал подходящий или применимый альтернативный текст (например, сайты для хранения фотографии), или потому что автор самостоятельно не знает то, что изображения представляют (например, слепой фотограф, совместно использующий изображение на его блоге).
В таких случаях, alt атрибут может быть опущен, но одно из следующих условий должно быть встречено также:
1. title атрибут присутствует и имеет непустое значение.
2. img элемент находится в figure элементе, который содержит figcaption элемент, который содержит контент кроме межэлементного пробела, и, игнорируя figcaption элемент и его потомки, figure у элемента нет никаких текстовых потомков узла кроме межэлементного пробела, и никакого встроенного потомка контента кроме img элемент.
Такие случаи должны быть сведены к абсолютному минимуму. Если есть даже малейшая возможность автора, имеющего возможность обеспечить реальный альтернативный текст, то не было бы приемлемо опустить alt атрибут.

Фотография на фотосайте для хранения:

<figure>
 <img src="1100670787_6a7c664aef.jpg">
 <figcaption>Bubbles traveled everywhere with us.</figcaption>
</figure>

Иногда весь смысл изображения - то, что текстовое описание не доступно, и пользователь должен обеспечить описание. Например, точка изображения CAPTCHA должна видеть, может ли пользователь буквально считать графику. Вот один способ повысить CAPTCHA (отметьте title атрибут):

<p><label>What does this image say?
<img src="captcha.cgi?id=8934" title="CAPTCHA">
<input type=text name=captcha></label>
(If you cannot see the image, you can use an <a
href="?audio">audio</a> test instead.)</p>

Обычно авторы должны избегать использования img элементы в целях кроме показа изображений.

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

В таких случаях, width и height атрибуты должны оба быть обнулены.