Title атрибут – the_title_attribute() — Выводит заголовок записи подготовленный для использования в атрибутах html тега. Функция WordPress.

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 и выше
Поддержка:ДаДаДаДаДа

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 5. Статья "Атрибуты"

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

W3C (Консорциум Всемирной паутины) рекомендует использование нижнего регистра, как в тегах, так и в написании атрибутов. Атрибуты, как правило, записываются таким образом: имя = "значение". В элементе допускается использовать несколько атрибутов в любом порядке, но при этом необходимо разделять их пробелом (только пробелом и больше никак).


Как мы с Вами поняли, на примере тега <img>, рассмотренного в предыдущей статье, некоторые теги используются только совместно с атрибутами (бесполезны сами по себе). Еще один нюанс использования атрибутов заключается в том, что если для тега явным образом не задан атрибут, то это значит, что значение этого атрибута установлено по умолчанию браузером пользователя.


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

<p title = 'Валерий "ББПЕ" Сюткин'>текст параграфа </p> <!-- значение атрибута в одинарных, кавычки в тексте двойные -->

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

<p title = "Валерий 'ББПЕ' Сюткин">текст параграфа </p> <!-- значение атрибута в двойных, кавычки в тексте одинарные -->

Давайте рассмотрим пример в котором используем атрибут title к тегу <p>, благодаря которому при наведении на параграф мышью, значение атрибута будет отображаться в виде всплывающей подсказки:

<!DOCTYPE html> 
<html>
	<head>
		<title>Пример использования атрибута title</title>
	</head>
	<body>
		<p title = "Валерий 'ББПЕ'
		Сюткин">Российский певец и музыкант, автор текстов песен для рок-н-ролл группы «Браво».<br> 
		Заслуженный артист России, профессор кафедры вокала и художественный руководитель эстрадного отделения МГГУ имени М. А. Шолохова.</p> 
	</body>
</html> 

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

Рис. 11 Пример использования атрибута title к тегу <p>.

Атрибут lang

Давайте теперь поговорим о таком атрибуте как lang, основная его функция это определить язык содержимого внутри элемента. Например, атрибут lang, применённый к тегу <html> указывает язык содержимого веб-страницы (для всего текста на странице).


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


Атрибут имеет следующий синтаксис:

lang = "Код языка"

Код языка, подразумевает собой сокращенное наименование, состоящее из двух букв которые определяют язык содержимого. Если у языка есть диалект, то через дефис добавляют еще две буквы (например, США lang ="en-us").

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

<!DOCTYPE html> 
<html lang =  "ru"> <!-- указывает язык содержимого веб-страницы -->
	<head>
		<title>Пример использования атрибута lang</title>
	</head>
	<body>
		<p lang =  "es"> ¿Por qué necesita una traducción? </p> <!-- Этот параграф интерпретируется как испанский -->
		<p>И дальше по тексту интерпретация языка продолжается на русском <p> 
	</body>
</html> 

В этом примере основной язык документа является русский ("ru"), а один абзац объявлен на испанском языке ("es").

Полный перечень кодов вы можете найти в разделе "Коды языков".

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

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

Атрибут Значение
dir Определяет направление текста содержимого элемента.
id Определяет уникальный идентификатор для элемента. Атрибут должен использоваться только один раз в конкретном HTML документе.
lang Определяет язык содержимого в элементе.
style Задает встроенный CSS стиль для элемента.
title Указывает дополнительную текстовую подсказку о содержимом при наведении курсора на элемент.


Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив с текстовым файлом и изображениями:

  • Используя полученные знания составьте следующий мультиязычный документ HTML:

Практическое задание № 3.

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


HTML Атрибуты



Атрибуты задаются в начальном тэге элемента и состоят из имени и значения, которые отделяются друг от друга знаком равно (=). Например в атрибуте href="http://www.wm-school.ru/" href является именем, а

http://www.wm-school.ru/ значением.

HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются в тег для того, чтобы информировать браузер о том, как данный тег должен отображаться в html-документе.

Атрибут title

Рассмотрим следующий пример:

Пример HTML:

Попробуй сам
<abbr title="Язык гипертекстовой разметки">HTML</abbr>

В этом примере используется тег <abbr>, который предназначен для обозначения аббревиатуры или акронима. В начальном теге элемента дополнительно был добавлен атрибут. Этот атрибут содержит заголовок для элемента.

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

Атрибут title может (необязательно) использоваться в любом HTML - элементе, чтобы предоставить дополнительную информацию о содержимом элемента.

При использовании атрибута title, большинство браузеров будет отображать его значение как "всплывающую подсказку", когда пользователь наводит указатель мыши на элемент.

Атрибут alt

Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега <img>. Атрибут alt добавляется внутрь тera <img> и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.

В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.

Атрибут href

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

Вот пример сложения двух атрибутов к элементу <a>(который используется для создания гиперссылки на другую веб - страницу).

Пример HTML:

Попробуй сам
<a href="http://www.wm-school.ru" title="Лучшие уроки HTML!">HTML Tutorials</a>

Атрибут href определяет расположение веб - страницы, на которую ведет ссылка.

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

Указывать атрибуты можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные (" ") или одинарные кавычки(' ').

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

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

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

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

Чаще всего в HTML используются "двойные кавычки", но вы можете использовать и 'одинарные'. Иногда вам придется использовать одинарные кавычки, если в значении есть часть, которая отдельно должна быть заключена в кавычки:


<abbr title="Hypertext 'Markup' Language">HTML</abbr>

Можно наоборот:


<abbr title='Hypertext "Markup" Language'>HTML</abbr>

Общие атрибуты

Ниже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов:

АтрибутЗначениеОписание
alignright, left, centerГоризонтальное выравнивание тегов
valigntop, middle, bottomВертикальное вырвнивание тегов внутри HTML-элемента.
backgroundURLРасположение фонового изображения
idУникальное имяУникальное имя для использования с каскадными таблицами стилей.
classправило класса или стиль классаКлассифицирует элемент для использования с каскадными таблицами стилей.
widthЧисловое значениеОпределяет ширину таблиц, изображений или ячеек таблицы.
heightЧисловое значениеОпределяет высотуу таблиц, изображений или ячеек таблицы.
titleТекст подсказкиТекст, отображаемый во всплывающей подсказке.

Полный список всех атрибутов для каждого элемента HTML, указан в нашем справочнике: HTML Атрибуты.

Задачи


Первое итоговое задание [1-4]

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

Пришло время повторить изученное и выполнить несложные задания:

Всплывающая подсказка


Сделайте всплывающую подсказку с текстом "Хороший сайт", который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Всплывающая подсказка</title>  
 </head>
 <body>
  <p> title="Хороший сайт">wm-school.ru — сайт для разработчиков.</p>
 </body>
</html>

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

Измените размер изображения до 200 пикселей в ширину и 150 пикселей в высоту.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Размеры изображения</title>  
 </head>
 <body>
  <img src="smile.jpg">
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Размеры изображения</title>  
 </head>
 <body>
  <img src="smile.jpg">
 </body>
</html>

Ссылка на веб-сайт

Измените нижеприведенный код так, чтобы при щелчке кнопкой мыши по тексту "Это ссылка на сайт", вы перешли на главную страницу сайта www.wm-school.ru.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылка на веб-сайт</title>  
 </head>
 <body>
  Это ссылка на сайт
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылка на веб-сайт</title>  
 </head>
 <body>
  <a href="http://www.wm-school.ru">Это ссылка на сайт</al>
 </body>
</html>

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


Создайте для изображения альтернативный текст "Смайлик", который будет показан при наведении указателя мыши на картинку или если картинка не загрузится.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Альтернативный текст</title>  
 </head>
 <body>
  <img src="noimage.jpg">
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Альтернативный текст</title>  
 </head>
 <body>
  <img src="noimage.jpg" alt="Смайлик">
 </body>
</html>





Please enable JavaScript to view the comments powered by Disqus.

Атрибуты ссылок | htmlbook.ru

Основной атрибут href тега <a> мы уже освоили, рассмотрим еще несколько полезных, но необязательных атрибутов этого тега.

target

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>. Синтаксис следующий.

<a target="имя окна">...</a>

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

  • _blank — загружает страницу в новое окно браузера.
  • _self — загружает страницу в текущее окно (это значение задается по умолчанию).
  • _parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

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

Пример 8.4. Открытие ссылки в новом окне

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Ссылка в новом окне</title>
 </head>
 <body>
  <p><a href="new.html" target="_blank">Открыть
      в новом окне</a></p>
 </body>
</html>

Атрибут target корректно использовать только при переходном <!DOCTYPE>, при строгом <!DOCTYPE> будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается.

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

title

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

<a title="текст">...</a>

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

Пример 8.5. Создание всплывающей подсказки

<!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>Подсказка к ссылке</title>
 </head>
 <body>
  <p><a href="zoo.html" title="Рисунки различных животных и не только...">Рисунки</a></p>
 </body>
</html>

Результат данного примера показан на рис. 8.8.

Рис. 8.8. Вид всплывающей подсказки в браузере

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

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

avatar
  Подписаться  
Уведомление о