Html расшифровка аббревиатуры: : Элемент Аббревиатура — HTML

: Элемент Аббревиатура — HTML

Элемент HTML «аббревиатура» (<abbr>) представляет собой аббревиатуру и, опционально, может показывать её расшифровку. Расшифровка записывается в атрибут title. Иные значения title, кроме расшифровки аббревиатуры не допускаются.

Статья Как помечать аббревиатуры и сделать их потянутыми поможет понять как использовать <abbr> и связанные элементы.

Категории контента	Основной поток, текстовый контент, явный контент
Допустимое содержимое	Фразовый контент
Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
Допустимые родители	Любые, поддерживающие фразовый контент.
Допустимые ARIA-роли	Любые
DOM-интерфейс	HTMLElement

Этот элемент поддерживает только глобальные атрибуты. Атрибут title имеет специальное семантическое значение, когда используется вместе с элементом <abbr>. Он должен содержать полную расшифровку или описание аббревиатуры.

Каждый элемент <abbr> независим от других. Указание title на одном элементе не применяет это же описание к другим элементам с одинаковым содержанием.

Обычное использование

Необязательно помечать все аббревиатуры с помощью <abbr>. Далее представлено несколько вариантов, которые помогут выбрать как помечать текст:

• Когда используете аббревиатуру и хотите показать описание или расшифровку вне основного потока содержания, используйте <abbr> c подходящим title.
• Чтобы обозначить аббревиатуру, которая может быть незнакома читателю, используете <abbr> с атрибутом title или просто текст с описанием.
• Когда присутствие аббревиатуры в тексте должно быть семантически выделено, полезен элемент <abbr>. В свою очередь, его использование может быть использовано для стилизации или написания сценариев.
• Вы можете использовать <abbr> вместе с <dfn>, чтобы установить определения для терминов, которые являются аббревиатурами или акронимами. Смотрите пример Определение в аббревиатуре ниже.

Грамматические вопросы

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

Назначение данного элемента исключительно для удобства автора и браузеры отображают его как (display: inline) по умолчанию, хотя его стиль по умолчанию меняется в разных браузерах:

• Некоторые браузеры, например Internet Explorer, стилизуют его как элемент <span>.
• Opera, Firefox и другие добавляют подчёркивание точками к содержанию элемента.
• Некоторые браузеры не только подчёркивают, но и меняют начертание на капитель (small caps). Чтобы избежать этого, добавьте font-variant (en-US): none в ваш CSS.

Семантическая пометка аббревиатуры

Чтобы пометить аббревиатуру без задания описания или расшифровок, просто используйте <abbr> без каких-либо атрибутов, как показано в примере ниже.

HTML

<p>Использование <abbr>HTML</abbr> – весело и легко!</p>

Результат

Стилизация аббревиатуры

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

HTML

<p>Используя <abbr>CSS</abbr>, вы можете стилизовать аббревиатуры!</p>

CSS

abbr {
  font-variant: all-small-caps;
}

Результат

Задание расшифровки

Добавление атрибута title даёт вам возможность задать расшифровку или описание для аббревиатуры или акронима.

HTML

<p>Эта статья великолепна! <abbr title="Подпишусь под Каждым Словом">ППКС</abbr>
без раздумий.</p>

Result

Определение в аббревиатуре

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

HTML

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr>
</dfn> – язык разметки, который используется для создания семантических и
структурированных веб-страниц.</p>
<p>A <dfn>Specification</dfn>
(<abbr title="Specification">spec</abbr>) – документ, в котором описаны основные
принципы работы технологи или API и как получить к ним доступ.</p>

Result

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

Specification
HTML Standard # the-abbr-element

BCD tables only load in the browser with JavaScript enabled.

Enable JavaScript to view data.

• Использование элемента <abbr>
• Другие элементы, являющиеся семантически текстовыми: <a>, <em>, <strong>, <small> (en-US), <cite>, <q> (en-US), <dfn>, <time>, <code>, <var> (en-US), <samp> (en-US), <kbd>, <sub> (en-US), <sup> (en-US), <b>, <i> (en-US), <mark>, <ruby>, <rp> (en-US), <rt> (en-US), <bdo>, <span>, <br>
  , <wbr>.
• Устаревший элемент <acronym>, который был заменён элементом <abbr>.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 4 мар. 2023 г. by MDN contributors.

| HTML | WebReference

Элемент <abbr> (от англ. abbreviation — аббревиатура) указывает, что последовательность символов является аббревиатурой. С помощью атрибута title даётся расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, это может использоваться для повышения рейтинга документа.

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

Синтаксис

<abbr>Текст</abbr>

Атрибуты

Для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE HTML> <html> <head> <title>abbr</title> <meta charset=»utf-8″> <style> abbr { border-bottom: 1px dashed red; /* Пунктирное подчёркивание текста */ color: #000080; /* Тёмно-синий цвет текста */ } </style> </head> <body> <p><abbr>CGI</abbr> обозначается протокол, с помощью которого любые внешние программы взаимодействуют с веб-сервером. С помощью <abbr title=»Common Gateway Interface, общий шлюзовый интерфейс»>CGI</abbr> на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы.</p> </body> </html>

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

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

Примечание

Браузер Internet Explorer до 6 версии включительно не поддерживает элемент <abbr>, но понимает элемент <acronym>.

Спецификация

Спецификация	Статус
WHATWG HTML Living Standard	Живой стандарт
HTML5	Возможная рекомендация
HTML 4.01 Specification	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

7	12	2	1.3	1	1

1	1	6	1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Текст

См. также

• <acronym>
• Продвинутая семантика и доступность
• Семантика строчных элементов

Как использовать аббревиатуру HTML в коде

Время чтения 1 мин

Опубликовано 29 июня 2017 г.

Обновлено 2 октября 2019 г.

Содержание

• 1. HTML abbr : Основные советы
• 2. Использование сокращения
• 3. Определение сокращений HTML
• 4. Поддержка браузера

HTML abbr: Основные советы

• HTML Элемент помечает комбинацию символов как аббревиатура или аббревиатура.
• С помощью атрибута title в открывающем теге HTML
  вы предоставляете полнотекстовое пояснение для указанной аббревиатуры (или акронима).
• Этот элемент является современной версией устаревшего .

Использование аббревиатуры

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

Пример

 
HTML — это язык представления. 
 

Попробуйте вживую. Учитесь на Udacity

Объяснение в атрибуте title : not видно сразу. Пользователи должны навести курсор на последовательность символов, чтобы вызвать комментарий.

Плюсы

• Простой дизайн (без лишней информации)
• Качественные курсы (даже бесплатные)
• Разнообразие функций

Основные характеристики

• Программы наностепени
• Подходит для предприятий
• Платные сертификаты об окончании

EXCL USIVE: СКИДКА 75%

Плюсы

• Удобная навигация
• Нет технические вопросы
• Кажется, заботятся о своих пользователях

Основные характеристики

• Большое разнообразие курсов
• 30-дневная политика возврата
• Бесплатные сертификаты об окончании

ОТ 12,99$

Pros

• Отличный пользовательский интерфейс
• Предлагает качественный контент
• Очень прозрачный с их ценами

Основные характеристики

• Бесплатные сертификаты завершение
• Ориентирован на навыки работы с данными
• Гибкий график обучения

СКИДКА 75%

Определение сокращений HTML

Когда аббревиатура (или аббревиатура) малоизвестный , простой расшифровки может быть недостаточно: вам может потребоваться дополнительное пояснение. Для этого вложите ваших тегов внутрь элемента :

Пример

 
EVM
 — это программная платформа на основе блокчейна. 
 

Попробуйте вживую Учитесь на Udacity

Давайте пошагово разберем приведенный выше пример:

• Теги отмечают, что EVM является аббревиатурой HTML .
• Теги показывают, что EVM является определяемым термином .
• Атрибут title определяет полный термин , который представляет EVM.

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

Chrome

2+

Edge

Все

Firefox

1+

IE

7+

Opera

Все

Safari

Все

Поддержка мобильных браузеров

Chrome

Все

Firefox

4+

Opera

Все

Safari

Все

Предыдущая тема Следующая тема

Тег HTML abbr | Synatx и различные примеры HTML abbr Tag

HTML 5 имеет интересные функции, которые упрощают разработку веб-страниц HTML с минимальным написанием кода. Он предоставляет богатый набор интересных тегов для разработки веб-элементов. Один из таких тегов полезен, он известен как тег . Этот тег используется для определения и отображения аббревиатуры за один раз. Тег HTML abbr позволит нам определить полную форму аббревиатур или акронимов, и браузер будет отображать краткую версию букв, как обычно на веб-странице, но при наведении курсора на эти аббревиатуры браузер отобразит полную форму эта аббревиатура автоматически.

Синтаксис HTML-тега abbr

Тег обычно используется вместе с атрибутом <стиль> тело { выравнивание текста: по левому краю; } <тело> ПФА

Вывод:  будет простым текстом, как показано ниже,

Пример #2

В этом примере мы видим аббревиатуру With a Title Tag.

Код:

 

<голова>
Тег сокращения 
<стиль>
тело {
выравнивание текста: по левому краю;
}


<тело>
 PFA 

 

Вывод:  будет аббревиатурой, подчеркнутой точкой.

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

Пример #3

Здесь мы использовали стиль шрифта элемента стиля CSS как курсив над тегом .

Код:

 

<голова>
Тег сокращения 
<стиль>
тело {
выравнивание текста: по левому краю;
}
п {
размер шрифта: x-большой;
}
сокращение {
стиль шрифта: курсив;
}


<тело>
 при написании электронного письма обычно используется  PFA  

 

Вывод:

Пример #4

Давайте применим еще несколько элементов стиля CSS поверх тега .

Код:

 

<голова>
Тег сокращения 
<стиль>
тело {
выравнивание текста: по левому краю;
}
сокращение {
стиль шрифта: курсив;
красный цвет ;
вес шрифта: полужирный;
}


<тело>
 при написании электронного письма обычно используется  PFA  

 

Вывод:

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

Пример #5

Давайте изменим тот же пример, чтобы добавить больше стиля и дизайна.

Код:

 

<голова>
Тег сокращения 
<стиль>
тело {
выравнивание текста: по левому краю;
}
п {
размер шрифта: x-большой;
фоновый цвет: бланшированный миндаль;
padding-top: 25px ;
padding-bottom: 25px ;
выравнивание текста: по центру;
граница: 1px сплошной кадетский синий;
радиус границы: 10 пикселей;
}
сокращение {
стиль шрифта: курсив;
красный цвет ;
вес шрифта: полужирный;
}


<тело>
 при написании электронного письма обычно используется  PFA  

 

Вывод:

В каждом из приведенных выше примеров попробуйте навести курсор на аббревиатуру, которую мы использовали, т. е. PFA, и посмотрите, как браузер отобразит название, которое мы ему присвоили.

Важные моменты, которые следует помнить

• Тег поддерживается почти всеми браузерами, включая Google Chrome, Internet Explorer, Safari, Firefox, Opera и т. д. Вывод, создаваемый всеми браузерами, может в некоторых случаях отличаться, но результат тот же.
• Поскольку для тега нет конкретных атрибутов, мы увидим, как можно стилизовать атрибут (используя доступные глобальные атрибуты) в следующих примерах. Стиль отображения этого элемента по умолчанию — display: inline, и он может варьироваться от браузера к браузеру.
• Тег можно использовать для предоставления пользователю полной формы или во время определения в конкретном содержимом или, возможно, в случае оформления документа. Не обязательно всегда использовать тег .
• Атрибут