Title html атрибут – Как изменить стиль атрибута title внутри тега привязки?

Leave a Comment / Html / By /

seodon.ru | Общие атрибуты HTML

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Атрибут title используется для вывода «всплывающей» подсказки при наведении курсора мыши на HTML-элемент, что позволяет пользователю получить дополнительную информацию при просмотре веб-страницы. Например, title часто указывают для ссылок (тег <A>) или изображений (тег <IMG>).

Атрибут title появился в HTML довольно давно, но раньше он поддерживался ограниченным количеством тегов, а теперь он есть у всех. Поэтому, если на страницах описания каких-то тегов вы увидите логотип HTML 5 () напротив атрибута, то знайте, что этот тег начал поддерживать данный атрибут именно с версии HTML 5. C другой стороны, хоть в HTML 5 теперь все теги могут иметь этот атрибут — не факт, что браузеры его будут также понимать во всех случаях. Более того, в описаниях W3C также нет конкретики по данному вопросу, например о том, для чего использовать атрибут title в теге <META> или <TITLE>.

Значения

Значением атрибута title является любая строка текста, заключенная в двойные (» «) или одинарные (‘ ‘) кавычки. Причем, если используются двойные кавычки, то внутри текста можно использовать только одинарные и наоборот.

Значение по умолчанию: нет.

Синтаксис

<body title="текст">...</body>
<img src="URL" alt="текст" title="текст">
<a href="URL" title="текст">...</a>

Обязательный атрибут: нет.

Пример HTML: применение атрибута title

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - атрибут title</title>
 </head>
 <body>
  <p><a href="http://seodon.ru/" title="Переход на 'Главную' страницу">Главная</a></p>
  <address title="Автора не бить - пишет, как умеет!">
  Автором данного опуса является Бездарных Б.Б.<br>
  Все свои положительные эмоции по поводу его<br>
  творения вы можете высказать ему лично по<br>
  тел. +1 111-222-33-44.</address>
 </body>
</html>

Результат примера

Результат: Применение атрибута title.

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

Атрибут title — Примеры

Атрибут title в HTML

Атрибут

title создаёт всплывающую подсказку при наведении курсора мышки на элемент. Внешний вид подсказки изменить нельзя.

<mark title="всплывающая подсказка">содержимое</mark>
Значением атрибута может быть только текст. Но возможен его перенос на другую строку: навести на меня
<mark title="строка 1
строка 2
строка 3">содержимое</mark>
Для того, чтобы внутри title сделать кавычки, их следует заменить на специальные символы.
<a href="#" title="&quot;какой-то текст&quot;">специальные символы</a>

title в ссылках | SEO

Атрибут title не индексируется (не будет найдена страница, на которой он располагается) и не передаёт динамический вес (не будет найдена страница-акцептор): Яндекс, Google. Иначе говоря, для SEO абсолютно бесполезен. Но он удобен для пояснения второстепенных деталей посетителям, например, как это сделано на shpargalkablog.ru в верхнем меню.

title в изображениях | SEO

Атрибут title в картинках не индексируется, но в Гугл передаёт анкорный вес странице-акцептору. В Google атрибут alt индексируется и передаёт анкорный вес: title в ссылке: Яндекс, Google
title в картинке: Яндекс, Google
alt в картинке: Яндекс, Google

Вывод:

  1. меню из ссылок-картинок или логотип веб-проекта сможет «прочитать» и оценить только Google,
  2. только Гугл будет учитывать атрибут alt у изображения внутри тега h в структуре заголовков страницы сайта (подробнее).

По результатам эксперимента Devaka от 2011 года (нужна перепроверка) [devaka.ru] title в теге img индексируют только Яндекс.Изображения. Сервис учитывает 275-280 символов текста, который берётся в равных частях из alt

и из title. Для Картинок.Google нужен только alt.

Также следует обязательно ознакомиться с support.google.com и help.yandex.ru.

HTML атрибут title | назначение, значения, примеры

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

Значения атрибута title по разному могут рассматриваться пользовательскими агентами. К примеру, визуальные браузеры часто отображают title как всплывающую подсказку (краткое сообщение, появляющееся при наведении указательного устройства на объект).

Голосовые браузеры могут произносить содержимое title по требованию пользователя.

Тип значения%Text
Значение по умолчаниюНет
Применим к: Все элементы кроме: base, basefont, head, html, meta, param, script, title.
Аналог в CSSнет

Пример

<a href="http://google.com/" title="перейти на сайт google">лучшая поисковая система&lt/a>

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— —> </style> </head> <body> <p>Поисковая система № 1 в мире &mdash; это <a href=»http://google.com/» title=»перейти на сайт google»>Google</a>.</p> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

Используй атрибут title для улучшения доступности (понятности) веб страниц. Примеры хорошего тона:

  • описать в подсказке куда ведет ссылка, если из ее текста это не очевидно
  • описать, что произойдет по клику на элементе (например, крестик — закрыть окно)
  • сделать расшифровку аббревиатуры для тегов <abbr> и <acronym>

HTML атрибут title | назначение, значения, примеры

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

Значения атрибута title по разному могут рассматриваться пользовательскими агентами. К примеру, визуальные браузеры часто отображают title как всплывающую подсказку (краткое сообщение, появляющееся при наведении указательного устройства на объект).

Голосовые браузеры могут произносить содержимое title по требованию пользователя.

Тип значения %Text
Значение по умолчанию Нет
Применим к: Все элементы кроме: base, basefont, head, html, meta, param, script, title.
Аналог в CSS нет

Пример

<a href="http://google.com/" title="перейти на сайт google">лучшая поисковая система&lt/a>

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— —> </style> </head> <body> <p>Поисковая система № 1 в мире &mdash; это <a href=»http://google.com/» title=»перейти на сайт google»>Google</a>.</p> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

Используй атрибут title для улучшения доступности (понятности) веб страниц. Примеры хорошего тона:

  • описать в подсказке куда ведет ссылка, если из ее текста это не очевидно
  • описать, что произойдет по клику на элементе (например, крестик — закрыть окно)
  • сделать расшифровку аббревиатуры для тегов <abbr> и <acronym>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *