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.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 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">лучшая поисковая система</a>
Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— —> </style> </head> <body> <p>Поисковая система № 1 в мире — это <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>
Обратите внимание, что значение атрибута мы разделили на две строчки, в результате чего у нас получилась многострочная всплывающая подсказка:
Атрибут 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-элементов:
| Атрибут | Значение | Описание |
|---|---|---|
| align | right, left, center | Горизонтальное выравнивание тегов |
| valign | top, middle, bottom | Вертикальное вырвнивание тегов внутри HTML-элемента. |
| background | URL | Расположение фонового изображения |
| 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. Вид всплывающей подсказки в браузере
Цвета и оформления всплывающей подсказки зависят от настроек операционной системы и браузера, и меняться разработчиком не могут.