Атрибут abbr в HTML


Содержание
Илон Маск рекомендует:  Атрибут hreflang в HTML

Атрибут abbr

Атрибут abbr — сокращение для ячеек заголовка таблицы.

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

Занятое место Имя и версия браузера Процент пользователей
1 Firefox 3 22%
2 Interner Explorer 15%

Голосовой браузер прочитает таблицу в следующей последовательности: «Занятое место 1 Имя и версия браузера Firefox 3 Процент пользователей 22% Занятое место 2 Имя и версия браузера Interner Explorer Процент пользователей 15%» Не очень удобно, когда длинные заголовки колонок будут постоянно повторяться — пользователь после первого полного прочтения заголовков поймет что к чему, дальше достаточно более краткой формы. Для этого и нужен атрибут abbr:

Занятое место Имя и версия браузера Процент пользователей
1 Firefox 3 22%
2 Interner Explorer 15%

При таком коде пользователь услышит так: «Занятое место 1 Имя и версия браузера Firefox 3 Процент пользователей 22% место 2 браузер Interner Explorer процент 15%».

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

HTML Атрибуты

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

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

Атрибут title

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

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

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

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

Атрибут alt

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

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

Атрибут href

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML abbr attribute

The pPurpose of the HTML abbr attribute is to specify the abbreviation for a table header cell.

Supported elements

HTML abbr attribute supports td and th.

Syntax

Type of value

Type of value of HTML abbr attribute is text.

Value

A string / text which sets the abbreviated text.

Default value

There is no default value of HTML abbr attribute.

Supported doctypes

HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset.

Example of HTML abbr attribute with td

Result

View this example in a separate browser window

Example of HTML abbr attribute with th

Result

View this example in a separate browser window

Аббревиатуры и акронимы в HTML

Давайте обратим свои взоры к теме сокращений на веб-страницах, а точнее понятности этих сокращений читателям. В данной статье рассматриваются теги abbr и acronym и нюансы, связанные с ними.

Внимание. В спецификации HTML5 элемент acronym объявлен полностью устаревшим и его настоятельно рекомендуют исключить из употребления. Взамен предлагается использовать элемент abbr (уточнения от 10.11.2011).

Разбираемся с терминалогией

Аббревиатуры и акронимы должны быть понятны всем и всегда

HTML теги и

HTML 4 предоставляет нам два элемента логического форматирования, используемых для выделения аббревиатур и акронимов — abbr и acronym , соответственно. У данных тегов есть атрибут title в котором дается разъяснение термина. Любой нормальный браузер при наведении курсора мыши на такой термин отобразит всплывающую подсказку, заданную атрибутом title .

Билли, который не любит W3C

В списке знакомых ему элементов указан лишь элемент ACRONYM . Но я уверен, что это будет исправлено в седьмой версии браузера.

Конечно, можно махнуть на это рукой и использовать вместо тега abbr тег acronym , но тогда не удивляйтесь если голосовой агент пользователя будет произносить буквенную аббревиатуру УРИ не побуквенно, а одним словом, и получится имя Ури из Х/Ф «Приключения электроника» . Но можно найти и обходной путь, например, вставить внутрь ABBR элемент SPAN :

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

Так как abbr и acronym элементы логического форматирования, то браузеры могут по разному отображать их на странице. Например, Mozilla Firefox и Opera отображают данные элементы с черным подчеркиванием в виде точек, Konqueror — выделяет курсивом, а IE никак визуально не выделяет ( acronym ).

Поэтому не помешает задать стили, которые бы унифицировали отображение данных элементов в разных обозревателях.

Атрибут abbr в HTML

Тег предназначен для выделения аббревиатур и сокращений в тексте. При помощи атрибута title можно добавить расшифровку сокращения. В некоторых браузерах текст, заключенный в элемент с атрибутом title , по умолчанию подчеркивается пунктирной линией. Если же атрибута нет, то текст никак не выделяется.

Атрибуты

Личные атрибуты: нет.

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на элементе.
  • class — задает имя класса или классов HTML-тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Модель тега: inline (встроенный, уровня строки).

Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Открывающий тег: необходим. Закрывающий тег: необходим.

Синтаксис

Пример HTML: применение тега ABBR

Результат: Применение тега ABBR.

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

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

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

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 7.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Нет Да Да Да Да Да

Internet Explorer 6.0 не понимает тег , вместо него можно использовать .

Атрибут abbr в HTML

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

Текст

title — добавляет всплывающую подсказку к тексту, в которой дается расшифровка аббревиатуры.

HTML DOM TableHeader ABBR атрибут

примеров

Возвращает значение атрибута сокр ИД «МИФ» элемента :

Определение и использование

ABBR наборов свойств или возвращает значение атрибута сокр.

сокр атрибут определяет ячейки данных в сокращенном варианте (для невизуальных средств массовой информации, таких как речь или шрифт Брайля).

Если этот атрибут установлен, пользователь будет слышать только значение (а не все содержимое ячейки) ABBR атрибута.

Поддержка браузеров

Все основные браузеры поддерживают атрибут сокр. Однако функциональные возможности этого свойства не было реализовано ни в одном из основных браузеров.

грамматика

Назад сокр атрибута:

Установка ABBR атрибута:

Значение свойства

描述
text 规定表头单元格内容的短描述。

технические детали

Возвращает: Строка, которая представляет собой текст аббревиатуру.

Статьи по Теме

HTML Справочное руководство: HTML сокр атрибут

Тег ABBR

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да
ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

По умолчанию, контент заключенный в контейнере подчеркивается пунктирной линией.

Синтаксис

Параметры

Закрывающий тег

Пример 1. Добавление аббревиатуры на web-страницу

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

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

Рис. 1. Вид всплывающей подсказки при наведении курсора мыши на контент аббревиатуры

Примечание

Браузер Internet Эксплорер до 7 версии включительно не поддерживает тег , взамен рекомендуется использовать тег .

Описание параметров тега

Параметр TITLE

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Расширенное описание элемента. Оно отображается на web-странице в виде всплывающей подсказки при наведении курсора мыши на аббревиатуру.

Синтаксис

Обязательный параметр

Аргументы

Любая контентовая строка. Строка должна заключаться в двойные или одинарные кавычки.

HTML5

Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

Устаревшие атрибуты HTML5

Какие атрибуты в HTML5, являются устаревшими?

Движение концепции HTML5 заключается в том, чтобы код HTML-документа состоял лишь из «пустых» тегов, чтобы было как можно меньше атрибутов, а атрибуты форматирования вообще полностью отсутствовали.

В спецификации HTML5, у различных тегов устарели следующие атрибуты:

У тега устарели атрибуты alink=» » , bgcolor=» » , link=» » , marginbottom=» » , marginheight=» » , marginleft=» » , marginright=» » , margintop=» » , marginw , text=» » и vlink=» » .

У тега
устарел атрибут clear=» » .

У тега устарел атрибут name=» » .

У тега устарел атрибут profile=» » .

У тега устарел атрибут version=» » .

У тега устарел атрибут longdesc=» » .

У тега устарели атрибуты border=» » , longdesc=» » , lowsrc=»http://html-5.ru/ustarevshie-atributy-html5″ и name=» » .

У тега устарел атрибут usemap=» » .

У тега
устарели атрибуты charset=» » , methods=» » , rev=» » , target=» » , type=» » и urn=» » .

У тега устарел атрибут scheme=» » .

У тега устарел атрибут name=» » .

У тега устарели атрибуты archive=» » , , code=» » , codebase=» » , codetype=» » , declare=» » и standby=» » .

устарели атрибуты type=» » и valuetype=» » .

HTML тег

HTML тег

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

Тег

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

Содержимое тега

по умолчанию отображается жирным шрифтом и выравнивается по центру. Для изменения внешнего вида содержимого можно использовать CSS стили.

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

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

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

Синтаксис

Пример

Результат

В этом примере наши заголовки — «Месяц» и «Дата». Для каждого заголовка мы использовали отдельный тег

. Оба тега мы поместили в элемент .

Пример

Результат

В этом примере значение атрибута colspan равно «2». Это означает, что ячейка заголовка должна охватывать два столбца.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL