Содержание

Что такое атрибуты Alt и Title для картинок и как их правильно составлять

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

Использование картинок сделает сайт привлекательнее и поможет удержать посетителей на нем, но что более важно, из поиска по картинкам в Яндексе или Google к вам на сайт может прийти дополнительный трафик (при корректном использовании атрибутов Alt и Title тега <img>).

Что такое атрибут Alt для картинок

Атрибут Alt для картинок – это текст, описывающий изображение в html-теге <img>. Он становится видимым в случае невозможности загрузки изображения. На месте незагруженной картинки будет показан текст (при заполненном атрибуте Alt).

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

А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега <img>:

Атрибут Alt дает возможность узнать, что изображено на картинке, когда пользователь не может ее увидеть. Кроме того, прописанный текст в атрибуте Alt учитывается поисковыми роботами при индексации сайта. Наконец, оптимизация названий картинок и атрибутов Alt в теге <img> упрощает поиск изображений, например, в Яндекс или Google Картинках.

Как правильно составить атрибут Alt для картинок

  1. Оптимальное количество слов – 3-5, но длина текста тега не более 75-80 символов. Мы рекомендуем использовать краткую и сжатую, но содержательную информацию.
  2. Обязательное условие – использование ключевых запросов.
  3. Ключевые слова лучше употреблять в именительном падеже, чтобы облегчить поиск.
  4. Избегайте спама: мы не рекомендуем перечислять большое количество ключей через запятую, как и в других тегах.
  5. Необходимо, чтобы Alt относился к тексту страницы и описывал то, что изображено на картинке.

Атрибут Title для изображений

Кроме атрибута Alt следует также прописывать текст в атрибуте Title. Данный параметр задает вспомогательную информацию о картинке, когда пользователь наводит курсор на изображение:

В html-коде заполненный атрибут Title для картинок выглядит так:

Правильно составленный атрибут Title даже помогает улучшить поведенческие факторы.

Как правильно составлять Title для картинок

  1. Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
  2. Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке.
  3. Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.

Пример правильного заполнения атрибутов Alt и Title для тега <img>

Рассмотрим на примере, как можно прописать текст в атрибутах Alt и Title для картинки. Для этого возьмем изображение с сайта строительной компании.

При составлении Alt необходимо сделать акцент на то, что вы продаете/предлагаете. Для картинки из нашего примера будет предпочтительнее составить альт «Строительство дома из бревна», а не просто «дом» или «строительство».

Атрибут Title для данного изображения можно немного видоизменить и составить так: «Строительство бревенчатого дома».

Трудности при заполнении Alt и Title

  1. Несколько фотографий одного и того же товара

    Как же быть интернет-магазинам, в которых для разнообразия и удобства пользователей представлено несколько изображений одного и того же товара? В этом случае, нормальное явление – составить одинаковый текст для Alt и Title ко всем картинкам.

  2. Один и тот же товар, но разного цвета

    В данном случае можно порекомендовать добавлять название цвета в текст Alt и Title. Например, для платья зеленого цвета можно составить такой Alt: «женское зеленое платье», а для платья красного цвета – «женское красное платье».

  3. Большое количество товаров

    Крупные интернет-магазины могут столкнуться со следующей проблемой: на сайте слишком много товаров и изображений для них. Чтобы составить атрибуты Alt и Title для тысячи товаров вручную, потребуется очень много времени. Поэтому, в данном случае, можно автоматизировать вывод этих атрибутов из названия продукции и/или заголовка Н1, а также добавить цвет или артикул товара.

Правильно заполненные атрибуты Alt и Title к картинкам помогут в поисковой оптимизации сайта. Но не стоит забывать и про другие аспекты оптимизации картинок, такие как «вес», качество и название изображений. Если у вас нет времени на составление атрибутов Alt и Title, мы можем помочь вам и выполнить эту работу за вас.

Зачем нужен атрибут Title? Как использовать Title?

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

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

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

Title что это?

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

Что касается добавления всплывающих подсказок, то вставляются они следующим образом:

<a href=http://www.workion.ru title=»нажми и начинай зарабатывать»>Заработок в интернете</a>

Как видите, это код обычной ссылки, с анкором «Заработок в интернете», но если навести курсор, будет появляться дополнительный текст. Нет никаких доказательств, что поисковые системы считывают текст из таких подсказок, поэтому на продвижении это может никак не сказаться.

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

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

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

Вам также будет интересно:
— Недорогие прогоны сайтов с Feedsite
— Дешевые вечные ссылки с Addtrust
— Какой контент увеличит естественные ссылки?

Справочная информация по HTML атрибутам — Веб-технологии для разработчиков

hiddenГлобальный атрибутПредотвращает генерирование данного элемента, в то время как сохраняет дочерние элементы, например, элементы script, active.
high<meter>Указывает нижнюю границу верхнего диапазона.
href<a>, <area>, <base>, <link> URL связанного ресурса.
hreflang<a>, <area>, <link>Указывает язык связанного ресурса.
http-equiv<meta>
icon<command>Указывает картинку, которая будет представлять команду.
idГлобальный атрибутЧасто используется с CSS для стилизации заданного элемента. Значение атрибута должно быть уникальным.
ismap<img>Показывает, что изображение часть серверной карты изображений.
itempropГлобальный атрибут
keytype<keygen>Указывает тип сгенерированного ключа.
kind<track>Указывает вид дорожки текста.
label<track>Указывает читабельный заголовок дорожки текста.
langГлобальный атрибутОпределяет язык для используемого элемента.
language<script>Определяет язык скрипта, используемый в элементе.
list<input>Задаёт список предустановленных опций для предложения пользователю.
loop<audio>, <bgsound>, <marquee>, <video>Указывает, следует ли медиа элементам начинать проигрывание сначала, после их завершения.
low<meter>Указывает верхнюю границу нижнего диапазона.
manifest<html>Задает URL кешированного манифеста документа.
max<input>, <meter>, <progress>Указывает максимальное допустимое значение.
maxlength<input>, <textarea>Определяет максимальное количество символов, допустимых в элементе.
media<a>, <area>, <link>, <source>, <style>Задаёт подсказку медиа, для которой, связанный ресурс был спроектирован.
method<form>Определяет, какой HTTP метод использовать, когда отправлются данные формы. Может быть GET (по умолчанию) или POST.
min<input>, <meter>Показывает минимальное допустимое значение.
multiple<input>, <select>Показывает могут ли быть выбраны множественные значения в input типа email или file.
name<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>Имя элемента. К примеру, используется сервером для определения полей отправленной формы.
novalidate<form>Этот атрибут указывает, что форма не должна проверяться, когда передается на сервер.
open<details>Указывает, отображать ли детали при загрузки страницы.
optimum<meter>Указывает оптимальное числовое значение.
pattern<input>Определяет регулярное выражение, которое будет проверять входные данные элемента.
ping<a>, <area>
placeholder<input>, <textarea>Предоставляет подсказку пользователю, касательно того, что можно ввести в поле.
poster<video>URL указывающий блок постера для показа, пока пользователь играет или ищет.
preload<audio>, <video>Указывает загружать ли ресурс целиком, его часть или не загружать вовсе.
pubdate<time>Указывает, что эта дата и время являются ли датой ближайшего элемента предка <article>.
radiogroup<command>
readonly<input>, <textarea>Указывает, можно ли редактировать элемент.
rel<a>, <area>, <link>Задаёт отношение целевого объекта к объекту ссылки.
required<input>, <select>, <textarea>Указывает, необходимо ли заполнять этот элемент или нет.
reversed<ol>Указывает, отображать ли список по убыванию, вместо того, чтобы показывать его по возрастанию.
rows<textarea>Определяет количество строк в textarea.
rowspan<td>, <th>Определяет количество строк ячейки таблицы, которые следует охватывать.
sandbox<iframe>
spellcheckГлобальный атрибутУказывает, разрешена ли проверка правописания для этого элемента.
scope<th>
scoped<style>
seamless<iframe>
selected<option>Определяет значение, которое будет выделено при загрузки страницы.
shape<a>, <area>
size<input>, <select>Определяет ширину элемента (в пикселях). Если у элемента значение атрибута typetext или password, тогда это количество символов.
sizes<link>
span<col>, <colgroup>
src<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>URL встраиваемого содержимого.
srcdoc<iframe>
srclang<track>
srcset<img>
start<ol>Определяет первый номер, если это не 1.
step<input>
styleГлобальный атрибутОпределяет CSS стили, которые перепишут установленные ранее стили.
summary<table>
tabindexГлобальный атрибутПереписывает порядок Tab по умолчанию браузера и следует вместо него заданному.
target<a>, <area>, <base>, <form>
titleГлобальный атрибутТекст, который будет отображаться в всплывающей подсказке, когда на него наведут указатель.
type<button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu>Определяет тип элемента.
usemap<img><input>, <object>
value<button>, <option>, <input>, <li>, <meter>, <progress>, <param>Определяет значение элемента по умолчанию, которое будет отображаться после загрузки страницы.
width<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>Примечание: в некоторых случаях, таких как <div>, это устаревший атрибут, в этом случае используйте свойство CSS width вместо него. В других случаях, таких как <canvas>, ширина должна быть задана этим атрибутом.
wrap<textarea>Указывает, следует ли переносить текст.
border<img>, <object>, <table>

Ширина границы.

Примечание: это устаревший атрибут, используйте свойство CSS border.

buffered<audio>, <video>Содержит отрезок времени уже буферизованного медиа.
challenge<keygen>Строка вызова, которая передаётся вместе с публичным ключом.
charset<meta>, <script>Определяет кодировку страницы или скрипта.
checked<command>, <input>Указывает, следует ли отметить элемент при загрузки страницы.
cite<blockquote>, <del>, <ins>, <q>Содержит URI, который указывает на источник цитаты или изменения.
classГлобальный атрибутЧасто используется вместе с CSS, чтобы стилизовать элементы с общими свойствами.
code<applet>Указывает URL файла класса аплета для загрузки и выполнения.
codebase<applet>Этот атрибут предоставляет абсолютный или относительный URL директории,  файлы аплета .class, на которые ссылаются в хранимом атрибуте кода.
color<basefont>, <font>, <hr>

Этот атрибут устанавливает цвет текста, используя либо название цвета, либо шестнадцатиричный формат #RRGGBB.

Примечание: это устаревший атрибут. Используйте CSS свойство color.

cols<textarea>Определяет количество столбцов в textarea.
colspan<td>, <th>Определяет диапазон количества столбцов ячейки.
content<meta>Значение, ассоциированное с http-equiv или name зависит от контекста.
contenteditableГлобальный атрибутУказывает, редактируется ли содержимое элемента.
contextmenuГлобальный атрибутОпределяет ID элемента <menu> который послужит, как контекстное меню элемента.
controls<audio>, <video>Указывает, следует ли отображать пользователю кнопки воспроизведения.
coords<area>Набор значений, задающий координаты области для активного участка.

data

<object>

Задаёт URL ресурса.

data-*

Глобальный атрибут

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

datetime<del>, <ins>, <time>Указывает дату и время, ассоциированное с элементом.
default<track>Указывает, что дорожка должна быть доступна, если пользовательские настройки не говорят об обратном.
defer<script>Указывает, что скрипт должен быть запущен, после того как страница будет проанализирована.
dirГлобальный атрибутОпределяет направление текста. Допустимые значения ltr (Слева направо) или rtl (Справа налево).
dirname<input>, <textarea>
disabled<button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea>Указывает, может ли пользователь взаимодействовать с элементом.
download<a>, <area>Указывает, что ссылка используется для загрузки.
draggableГлобальный атрибутОпределяет, можно ли перетаскивать элемент.
dropzoneГлобальный атрибутУказывает, что элемент принимает содержимое элемента, которое перетаскивают на него.
enctype<form>Определяет тип содержимого для данных формы, когда method — POST.
for<label>, <output>Описывает элементы, которые принадлежат им.
form<button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>Указывает форму, которая является владельцем элемента.
formaction<input>, <button>Указывает действие элемента, перезаписвающее действие, указанное в форме <form>.
headers<td>, <th>ID элементов <th>, которые применяются к этому элементу.
height<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>Примечание: в некоторых экземплярах, таких как <div>, это устаревший атрибут, в этом случае используйте свойство CSS height. В других экземплярах, таких как <canvas>, высота должна быть задана этим атрибутом.

HTML-атрибутов


Атрибуты HTML предоставляют дополнительную информацию об элементах HTML.


Атрибуты HTML

  • Все элементы HTML могут иметь атрибуты
  • Атрибуты предоставляют дополнительную информацию об элементах
  • Атрибуты всегда указываются в начальном теге
  • Атрибуты обычно представлены парами имя / значение, например: name = «value»

Атрибут href

Тег определяет гиперссылку. В
href Атрибут указывает URL-адрес страницы
ссылка идет на:

Вы узнаете больше о ссылках в наших HTML-ссылках.
главу.


Атрибут src

Тег используется для встраивания
изображение на HTML-странице. Атрибут src
указывает путь к отображаемому изображению:

Есть два способа указать URL-адрес в src
атрибут:

1.Абсолютный URL — ссылки на размещенное внешнее изображение
на другом сайте. Пример: src = «https://www.w3schools.com/images/img_girl.jpg».

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

2. Относительный URL-адрес — Ссылки на изображение, размещенное в
веб-сайт. Здесь URL-адрес не включает имя домена. Если URL начинается
без косой черты он будет относительно текущей страницы. Пример: src = «img_girl.jpg».
Если URL-адрес начинается с косой черты, он будет относиться к домену. Пример: src = «/ images / img_girl.jpg».

Совет: Почти всегда лучше использовать относительные URL-адреса. Oни
не сломается при смене домена.


Атрибуты ширины и высоты

Тег также должен содержать
ширина и
атрибуты height
, которые определяют ширину и
высота изображения (в пикселях):


Атрибут alt

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

Пример

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

Атрибут стиля

Атрибут стиля используется для добавления стилей в
элемент, такой как цвет, шрифт, размер и т. д.

Вы узнаете больше о стилях в нашей главе «Стили HTML».


Атрибут lang

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

В следующем примере в качестве языка указан английский:






Коды стран также можно добавить к коду языка в lang
атрибут. Итак, первые два символа определяют язык HTML-страницы,
а последние два символа определяют страну.

В следующем примере английский язык указан как язык, а США — как язык.
страна:






Вы можете увидеть все языковые коды в нашем
Справочник по языку HTML.


Атрибут заголовка

Атрибут title определяет некоторые дополнительные
информация о
элемент.

Значение атрибута title будет отображаться как всплывающая подсказка, когда
вы наводите курсор на элемент:


Мы рекомендуем: всегда использовать строчные атрибуты

Стандарт HTML не требует имен атрибутов в нижнем регистре.

Атрибут заголовка (и все другие атрибуты) может быть записан в верхнем или нижнем регистре.
например заголовок или заголовок .

Однако W3C рекомендует атрибутов нижнего регистра в HTML, а требует
атрибуты нижнего регистра для более строгих типов документов, таких как XHTML.

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


Мы предлагаем: всегда указывать значения атрибутов

Стандарт HTML не требует заключения в кавычки значений атрибутов.

Однако W3C рекомендует кавычек в HTML, а требует котировок для
более строгие типы документов, такие как XHTML.

Хорошо:

Посетите наш учебник HTML

Плохо:

Посетите наше руководство по HTML

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

В W3Schools мы всегда используем кавычки вокруг значений атрибутов.


Одинарные или двойные кавычки?

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

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

Или наоборот:


Краткое содержание главы


Упражнения HTML

Проверьте себя упражнениями

Задание:

Добавьте «всплывающую подсказку» к абзацу ниже с текстом «О W3Schools».

W3Schools — это сайт веб-разработчиков.

Отправить ответ »

Начало упражнения


Ссылка на атрибут HTML

title — Веб-технологии для разработчиков

Глобальный атрибут title содержит текст, представляющий консультативную информацию, относящуюся к элементу, которому он принадлежит.

Исходный код этого интерактивного примера хранится в репозитории GitHub.Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Некоторые типичные применения: