Атрибут title
Описывает содержимое элемента в виде всплывающей подсказки, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.
Синтаксис
title="текст"
Значения
Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.
Значение по умолчанию
Применяется к тегам
Пример
HTML5 IE Cr Op Sa Fx
Атрибут title Пример всплывающей подсказки
Результат данного примера показан на рис. 1.

Рис. 1. Вид всплывающей подсказки
Статьи по теме
- Альтернативный текст
- Атрибуты ссылок
Атрибут title
Атрибут title задает всплывающую подсказку для элемента, которая будет появляться по наведению мышкой на элемент (нужно навести и немного подержать курсор, секунду-две).
К сожалению, применить какие-либо CSS стили к этой подсказке невозможно, а выглядит эта подсказка не очень (используйте JavaScript, чтобы сделать стилизованную подсказку).
Пример
Давайте попробуем навести мышкой на текст абзаца из примера — и увидим содержимое атрибута title в виде всплывающей подсказки:
HTML: Атрибуты HTML
Разметка информации на странице включает в себя множество тонкостей и нюансов. Например, можно задавать не только тип элемента, но и передавать дополнительную информацию, которая будет обработана браузером. Наведите курсор на текст ниже:
Наведите курсор мыши на эту строку текста. Лучше сделать это с компьютера
При наведении мыши на элемент появилось небольшое окно с текстом «Всплывающая подсказка. Здесь можно указать дополнительную информацию». Такое поведение задаётся с помощью атрибутов — специальных конструкций, которые могут влиять на вывод информации на странице. Каждый тег в HTML имеет несколько стандартных атрибутов, которые записываются по шаблону атрибут=»значение» , где:
- Атрибут — название атрибута. Для появления всплывающей подсказки использовался атрибут title
- Значение — значение атрибута. Оно может быть разным, в зависимости от самого атрибута. В примере, в качестве значения, использовался текст, который должен быть выведен при наведении на элемент
Разметка примера со всплывающей подсказкой:
Наведите курсор мыши на эту строку текста. Лучше сделать это с компьютера
Атрибут title можно использовать не только на параграфах, а на любом элементе страницы. Такие атрибуты называются глобальными, так как не зависят от элемента. В противовес им есть атрибуты, которые уникальны для одного или нескольких тегов. Например, атрибут colspan , который указывает на объединение ячеек в таблицах. Его использование вне таблиц не имеет никакого смысла.
Атрибуты могут неявно влиять на вывод информации. Например, при использовании языка стилей CSS, встречается атрибут class , задача которого — отделить похожие элементы друг от друга с помощью значения атрибута. О работе классов вы узнаете из курса по CSS, а сейчас важно знать, что этот атрибут никак не проявляет себя при выводе информации на страницу
У одного тега может быть указано сразу несколько атрибутов. Тогда они записываются последовательно, при этом порядок указания не имеет значения:
Параграф с несколькими атрибутами
В этом уроке мы изучили понятие атрибута и их запись. Изучили работу атрибутов title и class , а также узнали о том, что атрибуты бывают глобальные и уникальные для HTML-элементов. Глобальные атрибуты могут быть использованы для любого тега, тогда как уникальные только для определённых
Задание
Создайте параграф с произвольным текстом и всплывающей подсказкой. Добавьте к нему класс hexlet
Упражнение не проходит проверку — что делать?
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя
Это нормально , в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
- Все глобальные атрибуты можно посмотреть на MDN Web Docs
Общий HTML атрибут title
Атрибут title определяет дополнительную информацию о HTML элементе.
Информация отображается как всплывающая подсказка при наведении указателя мыши на элемент.
В HTML5 атрибут title можно использовать с любым HTML элементом (все элементы с этим атрибутом будут проходить валидацию. Тем не менее, это не всегда имеет смысл!).
В HTML 4.01 атрибут title не может использоваться с элементами , , , , , , , .
Синтаксис атрибута
Значения атрибута
| Значение | Описание |
|---|---|
| текст | Текст пояснения |
Пример использования атрибута
Использование атрибута title в HTML документе:
ВОЗ была основана в 1948 году.
MSiter.ru