Давайте обратим свои взоры к теме сокращений на веб-страницах, а точнее понятности этих сокращений читателям. В данной статье рассматриваются теги abbr и acronym и нюансы, связанные с ними.
Внимание. В спецификации HTML5 элемент acronym объявлен полностью устаревшим и его настоятельно рекомендуют исключить из употребления. Взамен предлагается использовать элемент abbr (уточнения от 10.11.2011).
Разбираемся с терминалогией
Аббревиатуры и акронимы должны быть понятны всем и всегда
HTML теги и
HTML 4 предоставляет нам два элемента логического форматирования, используемых для выделения аббревиатур и акронимов — abbr и acronym , соответственно. У данных тегов есть атрибут title в котором дается разъяснение термина. Любой нормальный браузер при наведении курсора мыши на такой термин отобразит всплывающую подсказку, заданную атрибутом title .
Билли, который не любит W3C
В списке знакомых ему элементов указан лишь элемент ACRONYM . Но я уверен, что это будет исправлено в седьмой версии браузера.
Конечно, можно махнуть на это рукой и использовать вместо тега abbr тег acronym , но тогда не удивляйтесь если голосовой агент пользователя будет произносить буквенную аббревиатуру УРИ не побуквенно, а одним словом, и получится имя Ури из Х/Ф «Приключения электроника» . Но можно найти и обходной путь, например, вставить внутрь ABBR элемент SPAN :
И лучше этот процесс автоматизировать, выполняя вставки с помощью скрипта, после загрузки документа и только для IE. И что очень важно, не нужно будет менять правильный исходный текст документа.
Наводим CSS-марафет
Так как abbr и acronym элементы логического форматирования, то браузеры могут по разному отображать их на странице. Например, Mozilla Firefox и Opera отображают данные элементы с черным подчеркиванием в виде точек, Konqueror — выделяет курсивом, а IE никак визуально не выделяет ( acronym ).
Поэтому не помешает задать стили, которые бы унифицировали отображение данных элементов в разных обозревателях.
в HTML
Тег предназначен для выделения акронимов в тексте. Акроним — это аббревиатура, которая закрепилась в языке, как самостоятельное слово. Например, сокращенные названия стран (РФ, ЮАР, КНР), ведомств (МИД, МВД, ФСБ), слова: медсанчасть, леспромхоз и т.д. При помощи атрибута title можно добавить расшифровку акронима. В некоторых браузерах текст, заключенный в элемент с атрибутом title , по умолчанию подчеркивается пунктирной линией.
Атрибуты
Личные атрибуты: нет.
class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
dir — указывает направление текста внутри элемента.
id — задает имя идентификатора тега, который может использоваться в качестве «якоря» или в таблицах стилей.
lang — указывает язык, на котором написан текст внутри элемента.
style — необходим для применения встроенных стилей CSS к тегу.
title — выводит всплывающую подсказку при наведении курсора мыши на элемент.
Тип тега
Модель тега: inline (встроенный, уровня строки).
Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).
Элемент указывает, на то, что текст является акронимом. В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово. К акронимам, например, можно отнести следующие слова: БАМ, вуз, комсомол, DOS и т.д.
Текст
title — добавляет всплывающую подсказку к тексту, в которой дается расшифровка акронима.
в HTML
Вышла из употребления Эта возможность вышла из употребления. Хотя она может продолжать работать в некоторых браузерах, её использование не рекомендуется, поскольку она может быть удалена в любое время. Старайтесь избегать её использования.
Аннотация
Примечание: Этот элемент был убран из спецификации HTML5, поэтому его не рекомендуется использовать.Вместо него используйте элемент .
Атрибуты
Этот элемент поддерживает только глобальные атрибуты.
Интерефейс DOM
Этот элемент реализует интерфейс HTMLElement .
Пример
Стилизация по умолчанию
Хотя этого элемент употребляется чисто для удобств автора, разные браузеры отрисовывают его по-разному:
Некоторые, например, Internet Explorer, не стилизуют его, и он выглядит неотличимо от обычного .
Opera, Firefox и некоторые други браузеры подчеркивают его точками.
Малая часть браузеров помимо подчёркивания точками также меняют начертание текста на капитель (small caps). Во избежание такого поведения, как вариант, необходимо добавить font-variant : none в CSS стиль.
Поэтому настоятельно рекомендуется, чтобы веб-авторы не полагались на стиль по умолчанию.
Тег acronym
Тег (с англ. акроним) — тег-контейнер, указывает, что содержимое тега является акронимом (разновидность аббревиатуры, которая произносится не по буквам, а слитно, как одно слово). Строчный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
Атрибуты
class
определяет имя используемого класса
dir
определяет направление символов:
ltr — слева направо
rtl — справа налево
id
уникальный индетификатор
lang
определяет язык отображаемого документа
onclick
щелчек на элементе
ondblclick
двойной щелчек на элементе
onkeydown
нажатие клавиши, когда элемент имеет фокус
onkeypress
нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup
освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown
нажатие кнопки мыши, когда элемент имеет фокус
onmousemove
движение указателя мыши, когда элемент имеет фокус
onmouseout
смещение указателя мыши с элемента
onmouseover
помещение указателя мыши на элемент
onmouseup
освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style
задает встроенную таблицу стилей
title
задает расшифровку акронима, которая показывается в виде всплывающей подсказки
Пример
Рекомендации по использованию
закрывающий тег обязателен ( )
может содержать CDATA и строчные элементы.
некоторыми браузерами по умолчанию подчеркивается пунктиром
обязательных атрибутов нет
Содержимое тега abbr определяет сокращённое выражение, а атрибут title используется для расшифровки аббревиатуры.
Тег acronym
Тег (с англ. акроним) — тег-контейнер, указывает, что содержимое тега является акронимом (разновидность аббревиатуры, которая произносится не по буквам, а слитно, как одно слово). Строчный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
Атрибуты
class
определяет имя используемого класса
dir
определяет направление символов:
ltr — слева направо
rtl — справа налево
id
уникальный идентификатор
lang
определяет язык отображаемого документа
onclick
щелчок на элементе
ondblclick
двойной щелчок на элементе
onkeydown
нажатие клавиши, когда элемент имеет фокус
onkeypress
нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup
освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown
нажатие кнопки мыши, когда элемент имеет фокус
onmousemove
движение указателя мыши, когда элемент имеет фокус
onmouseout
смещение указателя мыши с элемента
onmouseover
помещение указателя мыши на элемент
onmouseup
освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style
задает встроенную таблицу стилей
title
задает расшифровку акронима, которая показывается в виде всплывающей подсказки
Пример
Рекомендации по использованию
закрывающий тег обязателен ( )
может содержать CDATA и строчные элементы.
некоторыми браузерами по умолчанию подчеркивается пунктиром
обязательных атрибутов нет
Содержимое тега abbr определяет сокращённое выражение, а атрибут title используется для расшифровки аббревиатуры.
Тег acronym
Описание
По умолчанию, текст заключенный в контейнере подчеркивается пунктирной линией.
Синтаксис
Атрибуты
Для этого тега доступны универсальные атрибуты и события .
Популярность языка JavaScript порождена его широкими возможностями по взаимодействию с элементами веб-страницы через DOM .
acronym
Тег (с англ. акроним) — тег-контейнер, указывает, что содержимое тега является акронимом (разновидность аббревиатуры, которая произносится не по буквам, а слитно, как одно слово). Строчный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
Атрибуты
class
определяет имя используемого класса
dir
определяет направление символов:
ltr — слева направо
rtl — справа налево
id
уникальный идентификатор
lang
определяет язык отображаемого документа
onclick
щелчок на элементе
ondblclick
двойной щелчок на элементе
onkeydown
нажатие клавиши, когда элемент имеет фокус
onkeypress
нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup
освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown
нажатие кнопки мыши, когда элемент имеет фокус
onmousemove
движение указателя мыши, когда элемент имеет фокус
onmouseout
смещение указателя мыши с элемента
onmouseover
помещение указателя мыши на элемент
onmouseup
освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style
задает встроенную таблицу стилей
title
задает расшифровку акронима, которая показывается в виде всплывающей подсказки
Пример
Рекомендации по использованию
закрывающий тег обязателен ( )
может содержать CDATA и строчные элементы.
некоторыми браузерами по умолчанию подчеркивается пунктиром
обязательных атрибутов нет
Содержимое тега abbr определяет сокращённое выражение, а атрибут title используется для расшифровки аббревиатуры.
Теги HTML5 — acronym.
Поддержка Браузеров
Интернет эксплорер Google Chrome Опера Firefox Сафари, то есть тег поддерживается во всех основных браузерах.
Определение и использование. Тег не поддерживается в HTML5. Используйте вместо тега .
Тег определяет акроним. Аббревиатурой можно говорить, как будто это слово, пример СССР, ООН, НАТО, НАСА и т.д.. По разметкам сокращений вы можете дать полезную информацию для браузеров, проверка правописания, системы перевода и индексаторы поисковых систем. Тег очень полезная маленькая особенность HTML4 и выше. Они не так хорошо известны от части потому, что немногие HTML-редакторы поддерживают тег .
Люди делают предположения, что сокращение или аббревиатура хорошо известна в любом случае, и поэтому никогда не расширяют XML, при добавлении тега, соответствующий атрибут title может принести пользу, просматривающих Ваши сайты несколькими способами: посетитель должен иметь возможность читать полное описание акронима — великая вещь для слепых и слабовидящих пользователей Вашего сайта; для обычных пользователей не нужно повторять акроним на экране при каждом упоминании, для тех, кто не знает акроним, быстро наводите указатель мыши на фразу и покажет полное описание в виде всплывающей подсказки, что избавляет от необходимости создавать отдельный глоссарий страницы и отсылая людей к этой странице на каждом упоминании acronym.
Люди делают предположения, что сокращение или аббревиатура хорошо известна в любом случае, и поэтому никогда не расширяют XML, при добавлении тега, соответствующий атрибут title может принести пользу, просматривающих Ваши сайты несколькими способами: посетитель должен иметь возможность читать полное описание акронима — великая вещь для слепых и слабовидящих пользователей Вашего сайта; для обычных пользователей не нужно повторять акроним на экране при каждом упоминании, для тех, кто не знает акроним, быстро наводите указатель мыши на фразу и покажет полное описание в виде всплывающей подсказки, что избавляет от необходимости создавать отдельный глоссарий страницы и отсылая людей к этой странице на каждом упоминании acronym.
Внимание. Название атрибута может использоваться, чтобы показать полную версию аббревиатурой при наведении указателя мыши над ним.
Отличия между HTML 4.01 и HTML5. Тег не поддерживается в HTML5, но поддерживается в HTML 4.01.
Основы разметок HTML дают необходимый минимум материала, чтобы отображать документ на странице сайта. В настоящее время в разработках HTML наблюдается следующий цикл создания основ HTML. На более высоком интерактивном уровне. В самих разметках создаются атрибуты, которые самостоятельно оживляют действия над объектами при создании и оформления страниц сайта. Будет прорыв основ HTML в голосовом управлении всеми действиями на страницах сайта. Все процессы по созданию сайта возьмет на себя машина и основы HTML преобразятся. Что из этого выйдет — покажет время, точнее идет прорыв в данном направлении.
Стандартные Атрибуты
тег поддерживает следующие стандартные атрибуты в HTML 4.01:
Значение
Значение
Описание
class
класс
Определяет имя класса элемента
dir
rtl
Определяет направление текста для содержания элемента
id
id
Определяет уникальный идентификатор для элемента
lang
language_code
Указывает код языка для содержания элемента
type
style_definition
Определяет встроенный стиль для элемента
title
текст
Определяет дополнительную информацию об элементе
xml:lang
language_code
Указывает код языка для содержания элемента, в XHTML документы
Атрибуты Событий
тег поддерживает следующие атрибуты событий в HTML 4.01:
Значение
Значение
Описание
onclick
script
Скрипт выполняется мыши
ondblclick
script
Скрипт выполняется двойной щелчок мышью
onmousedown
script
Скрипт выполняется при нажатии кнопки мыши
onmousemove
script
Скрипт выполняется при перемещении указателя мыши
onmouseout
script
Скрипт выполняется при перемещении указателя мыши из элемент
onmouseover
script
Скрипт выполняется при перемещении указателя мыши над элемент
onmouseup
script
Скрипт выполняется при отпускании кнопки мыши
onkeydown
script
Скрипт выполняется при нажатии клавиши
onkeypress
script
Скрипт выполняется, когда клавиша нажата и отпущена
onkeyup
script
Скрипт выполняется при отпускании клавиши
Пишем некую программу:
Результат выполнения программы:
Могу ли я получить эту ASAP ?
Примечание: acronym не поддерживается в HTML5.
Известность языка JavaScript пришла с широкими возможностями JavaScript по взаимодействию с тегами на страницах сайта через DOM .
в HTML
Во! Отлично! Спасибо! Теперь осталось настроить Типинатор на хоткеи и, главное, запомнить, какой соответствует какому тегу. Очень, очень полезная инфа — аффтару зачот.
Спасибо за урок HTML-грамотности хотя многие теги редко используются, но в свете данной статьи заставляет взглянуть на них по новому
Allpa, Сергей, спасибо за хорошие отзывы. Я только что заметил, что вопрос о тегах ABBR и ACRONYM освещен не полностью. Вскоре напишу дополнение.
и насколько такие теги значимы для поисковиков? на что влияют?
oyurkov, точных цифр ты нигде не найдешь. Достоверно, что атрибут title в тегах abbr и acronym прекрасно учитывается поисковыми машинами. Вообще, конструкция внутри соответствующего тега логической разметки имеет больший вес, чем просто воткнутая непонятно где в теле страницы.
Хотя в данной области все больше строится на предположениях и здравом смысле. И еще на допущении, что в Гугле и Яндексе работают далеко не идиоты. Уж точно не глупее большинства доморощенных сео-турбо-манимейкеров :).
Весьма интересная статейка, только применимо ли это к вордпресс? Там то для поисковой оптимизации насколько я знаю применяются другие приемы?
