Аббревиатура html: Тег | htmlbook.ru

— журнал «Доктайп»

• 25 января 2023

Справочник

Нейрокекс

Тег <abbr> означает «аббревиатура» и используется для обозначения аббревиатуры или сокращения на веб-странице.

Синтаксис тега <abbr>

<abbr title="title-text">аббревиатура или акроним</abbr>

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

Согласно спецификации HTML, тег <abbr> является частью стандарта HTML.

Семантический или нет

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

Примеры использования

Базовое использование

<p> 
  <abbr title="World Wide Web">WWW</abbr> - удивительное место.
</p>

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

<h2>
  <abbr title="HyperText Markup Language">HTML</abbr>-справочник
</h2>

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

<table>
  <thead>
    <tr>
      <th scope="col"><abbr title="Идентификатор">ID</abbr></th>
      <th scope="col">Имя</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Коля Шабалин</td>
      <td>kolya@htmlacademy.  ru</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Игорь Антонов</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Для чего использовать тег <abbr>

• Для обозначения сокращений или аббревиатур в тексте.
• Чтобы добавить атрибут title для дополнительной информации об аббревиатуре.
• Использовать в таблицах в качестве аббревиатуры заголовка для улучшения доступности.

Атрибуты тега <abbr>

title — указывает полный текст аббревиатуры или сокращения.

Глобальные атрибуты

Тег <abbr> поддерживает все глобальные атрибуты HTML.

Нюансы

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

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

Тег <abbr>поддерживается всеми основными браузерами.

Альтернативные теги

Для тега <abbr> нет прямой альтернативы.

Чем заменить тег

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

Актуальность

Тег <abbr> не является устаревшим.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

Попробовать

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Справочник по HTML

Основные HTML-теги в 2023 году.

• 31 марта 2023

Глобальные атрибуты HTML

Список основных атрибутов, которые подойдут ко всему.

• 29 марта 2023

Как добавить раздел на страницу. Тег <div>

• 25 января 2023

Список описаний. Тег <dl>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

Пункт выпадающего списка. Тег <option>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

Как правильно добавить секцию на страницу. Тег <section>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

: элемент Abbreviation HTML-элемент представляет собой аббревиатуру или акроним.

Определение и использование Тег <abbr> определяет аббревиатуру или акроним, например «HTML», «CSS», «Mr.», «Dr.», «ASAP», «ATM». Совет. Используйте глобальный атрибут title, чтобы отображать описание аббревиатуры/акронима при наведении указателя мыши на элемент.

abbrev.,abbreviate,abbreviated,abbreviated,abbreviation,abbreviatory.

Тег <abbr> (аббревиатура) в HTML используется для определения аббревиатуры или краткой формы элемента. Теги <abbr> и <acronym> используются как сокращенные версии и используются для представления последовательности букв. Аббревиатура используется для предоставления полезной информации браузерам, системам перевода и поисковым системам.

HTML — элемент <abbr> представляет собой аббревиатуру или акроним.

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

Необязательный атрибут title может предоставить расширение для аббревиатуры или акронима, когда полное раскрытие отсутствует. Это дает подсказку для пользовательских агентов о том, как объявлять/отображать контент, информируя всех пользователей о том, что означает аббревиатура. title , если он присутствует, должен содержать это полное описание и ничего больше.

Try it

Attributes

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

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

Usage notes

Типичные случаи использования

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

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

Grammar considerations

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

Default styling

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

Некоторые браузеры добавляют пунктирное подчеркивание к содержимому элемента. Другие добавляют пунктирное подчеркивание при преобразовании содержимого в маленькие заглавные буквы. Другие не могут стилизовать его иначе, чем элемент <span> . Чтобы управлять этим стилем, используйте text-decoration и font-variant .

Examples

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

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

HTML

<p>Using <abbr>HTML</abbr> is fun and easy!</p>

Result

Styling abbreviations

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

HTML

<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>

CSS

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

Result

Обеспечение расширения

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

HTML

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
time.</p>

Result

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

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

HTML

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr>
</dfn> is a markup language used to create the semantics and structure
of a web page.</p>
<p>A <dfn>Specification</dfn>
(<abbr>spec</abbr>) is a document that outlines
in detail how a technology or API is intended to function and how it is
accessed.</p>

Result

Accessibility concerns

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

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

Example

<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.
  </p>

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

Specifications

Browser compatibility

See also

• Использование элемента <abbr>

• <a>: элемент Anchor

  HTML-элемент <a> (или привязка с атрибутом href) создает веб-страницы с гиперссылками, файлы, адреса электронной почты, местоположения так же, как и все остальное, что URL-адрес может содержать.

• onclick events

  Элементы привязки часто используются как поддельные кнопки, устанавливая их href javascript:void(0) для предотвращения обновления страницы, а затем прослушивая события щелчка.

• <acronym>

  Исправлено:Эта функция больше не рекомендуется.

• <адрес>: элемент контактного адреса

  HTML-элемент <address> указывает, что в нем содержится контактная информация человека, организации.

• 1
• …
• 28
• 29
• 30
• 31
• 32
• …
• 258
• Next

Сократите свой код с помощью HTML-тега abbr

Семантический HTML — отличный способ передать смысл вашей страницы. Размечайте сокращенный контент с помощью тега . И когда вы передаете заголовок, при наведении на него создается всплывающая подсказка. Хороший! 👏

• Стиль по умолчанию
• Стиль тега abbr
• Битва между abbr и аббревиатурой ⚔️
• Смешивание abbr с dfn
• Почему важен семантический HTML
• Отображать аббревиатуру HTML на Mobile
  • Решение 1. Отображение термина без сокращений
  • Решение 2. Отображение термина без сокращений нажатием
  • Решение 3. Подсказка JavaScript
• Поддержка браузера
• Вклад сообщества
90 007 Ресурсы

Стиль по умолчанию

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

TIL что-то потрясающее!

Если открыть эту страницу в Safari, подчеркивания не будет. Кроме того, подчеркивание присутствует только в том случае, если у вас есть атрибут title .

Styling abbr Tag

Благодаря своему уникальному тегу он также упрощает настройку стиля. Вы можете сделать что-то вроде этого

Hover me , чтобы увидеть мою пользовательскую справку (?) курсор

Из-за различий в разных браузерах я бы порекомендовал вам применить собственный стиль для вашего тег. Таким образом, у вас будет единообразный внешний вид в разных браузерах. 04 . Война началась, когда Netscape создала тег , а Microsoft — . Ни одна сторона не хотела сдвинуться с места! А наш посредник, W3C , отказался вмешиваться и отстаивать свою позицию. Битва продолжалась много лет, приводя многих разработчиков в замешательство и неуверенность в том, что использовать. Microsoft, похоже, имеет преимущество благодаря доминирующему присутствию Internet Explorer. Но затем появился HTML5…

W3C, наконец, решил вмешаться и сказал: «Никто не выигрывает, когда семейные распри, Мы все проигрываем, когда семейные распри, Что может быть лучше, чем один миллиардер? Семейные распри, но я почти уверен, что это было именно так 😂

Короче говоря! устарело, поэтому используйте 👍

Смешивание

abbr с dfn

Когда вы определяете термин, вы можете обернуть его в Тег . Поэтому, если вы используете аббревиатуру и поясняете ее, вы можете комбинировать эти теги следующим образом:

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

Почему важен семантический HTML

Семантический HTML важен, потому что он позволяет передать смысл вашего кода. Помню, когда я впервые начал изучать программирование, я просто оборачивал весь свой текст цифрами 9.0003

, а затем используйте CSS, чтобы применить правильный стиль. Для визуального человека это не имело значения. Пользователь увидит то, что я хочу, чтобы он увидел 🤷‍♀️

Но упаковка всего в тег

, даже со стилем, ничего не значит для машины. Таким образом, это означает, что такая машина, как программа чтения с экрана, не будет знать, как взять ваш текст и правильно передать ваш контент для человека с нарушениями зрения. Бот поисковой системы, думаю, SEO , не знает, как сканировать ваш контент и правильно ранжировать ваш сайт. Кстати, заметил, что я там сделал, я завернул свое SEO в тег 😉 Верно! Мы должны всегда применять их знания 😎

Как разработчики, наша работа заключается в том, чтобы наш веб-сайт или приложение были доступны для всех. И способ сделать это — использовать правильный семантический HTML-тег 💛 Точно так же, как если бы вы были рестораном, вы бы не отказали платящим клиентам 😆 (верно, все дело в деньгах! Коммунальные услуги не платят сами себе 🤑 )

Отображать HTML-сокращение на мобильных устройствах

До сих пор я вас всех накачивал об использовании HTML <сокращение> . Это семантика, и у него есть хорошая всплывающая подсказка при наведении курсора. Перед тем, как разбить шампанское. .. есть небольшая проблема 😅

Проблема с Мобильным. Наведение отлично работает на рабочем столе, где есть указывающее устройство. Но как только вы переключитесь на мобильное устройство, всплывающая подсказка не будет работать. Но не беспокойтесь! Я нашел несколько креативных решений 👏

Решение 1: Отобразить несокращенный термин

Вот очень простое решение. Давайте просто отобразим полный несокращенный термин, когда они будут на меньшем размере экрана.

А с помощью CSS мы берем несокращенный термин, указанный в атрибуте title , и выводим его на нашу страницу в скобках.

TIL 👈 Отображается неаббревиатура

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

Авторы и права: Аурелио Де Роса

Решение 2. Отображение несокращенного термина нажатием

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

TIL

☝desktop: Hover, чтобы увидеть неабпликацию

☝mobile: нажмите, чтобы увидеть неаббривация

Мы можем еще больше улучшить эту поддержку, включив в себя поддержку клавиатуры. Мы можем указать, что тег abbr может быть сфокусирован при последовательной навигации с помощью клавиатуры с помощью tabindex="0" , а затем активировать наш несокращенный контент, когда он сфокусирован.

TIL

☝️Используйте клавишу вкладки ИЛИ нажмите, чтобы активировать фокус

Кредит: Ире Адеринокун

Решение 3: Подсказка JavaScript

900 02 Вместо использования CSS вы также можете просто использовать JavaScript для вызова всплывающей подсказки . Если вы используете Bootstrap, вы можете использовать компонент Tooltips.

Определенно было бы неплохо, если бы существовало собственное решение для решения проблем в мобильном или неуказывающем устройстве. К сожалению, на данный момент нет 😔. Но семантический HTML по-прежнему очень важен, и мы, как разработчики, должны делать все возможное, чтобы использовать его, когда это возможно. На данный момент нам просто нужно понять проблемы и использовать наши творческие способности, чтобы обойти их. Семантический HTML полностью!!! 🏆

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

90 211 ✅ 90 211 ✅

Браузер	HTML abbr
Chrome
Firefox	✅
Safari	✅
Edge
Internet Explorer	✅

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

• @oskar.zanota: 9 0249 курсор: помощь не обязательно должно быть в :hover , вы можете просто поместить его в аббр.

Ресурсы

• Веб-документы MDN: Сокращение HTML
• w3schools: Сокращение HTML
• HTML.com: Сокращение
• HTML5Doctor: Сокращение
• W 3C архив
• W3C: dfn
• Переполнение стека: HTML dfn и abbr теги и правильное использование атрибута title
• Улучшение HTML-элемента abbr на мобильных устройствах
• Обеспечение работы элемента abbr для сенсорного экрана, клавиатуры и мыши

: Элемент Abbreviation — HTML: Язык гипертекстовой разметки

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

Исходный код для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на включение.

Категории контента	Текучее содержимое, фразовое содержимое, пальпируемое содержимое
Разрешенный контент	Фразы содержания
Отсутствие тега	Нет, начальный и конечный теги обязательны.
Разрешенные родители	Любой элемент, который принимает фразовое содержимое
Неявная роль ARIA	Нет соответствующей роли
Разрешенные роли ARIA	Любой
Интерфейс DOM	HTMLЭлемент

Атрибуты

Этот элемент поддерживает только глобальные атрибуты. Атрибут title имеет особое семантическое значение при использовании с элементом ; должен содержать полное удобочитаемое описание или расширение аббревиатуры. Этот текст часто представляется браузерами в виде всплывающей подсказки при наведении курсора мыши на элемент.

Каждый используемый вами элемент независим от всех остальных; предоставление заголовка для одного не означает автоматического присоединения одного и того же текста расширения к другим с таким же текстом содержимого.

Замечания по использованию

Типичные варианты использования

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

• Если используется аббревиатура, и вы хотите предоставить расширение или определение вне содержания документа, используйте с соответствующим заголовком .
• Чтобы определить аббревиатуру, которая может быть незнакома читателю, представьте термин, используя и либо атрибут title , либо встроенный текст, содержащий определение.
• Когда присутствие аббревиатуры в тексте необходимо отметить семантически, полезен элемент . Это, в свою очередь, можно использовать для создания стилей или сценариев.
• Можно использовать совместно с для установления определений терминов, являющихся аббревиатурами или акронимами. См. пример «Определение аббревиатуры» ниже.

Вопросы грамматики

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

Стиль по умолчанию

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

• Некоторые браузеры, такие как Internet Explorer, не используют стиль, отличный от стиля элемента .
• Opera, Firefox и некоторые другие добавляют пунктирное подчеркивание к содержимому элемента.
• Некоторые браузеры не только добавляют пунктирное подчеркивание, но и пишут его маленькими прописными буквами; чтобы избежать этого стиля, добавьте в CSS что-то вроде font-variant : none .

Примеры

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

Чтобы разметить аббревиатуру без расширения или описания, просто используйте без каких-либо атрибутов, как показано в этом примере.

HTML

 
Использовать HTML легко и весело!
 

Результат

Сокращения стилей

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

HTML

 
Используя CSS, вы можете оформить свои сокращения!
 

УСБ

 аббревиатура {
  вариант шрифта: все прописные;
} 

Результат

Предоставление расширения

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

HTML

 
Шутка Ашока сделала меня LOL большим
время.
 

Результат

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

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

HTML

 
HTML
 — это язык разметки, используемый для создания семантики и структуры
веб-страницы.
A Спецификация
(spec) – это документ, в котором описываются
подробно о том, как технология или API должны функционировать и как они
доступ. 
 

Результат

Вопросы доступности

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

Пример

 
Объектная нотация JavaScript (JSON) — это облегченный формат обмена данными.
 

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

Технические характеристики

Спецификация	Статус	Комментарий
HTML Living Standard Определение ‘‘ в этой спецификации.	Уровень жизни
HTML5 Определение ‘‘ в этой спецификации.	Рекомендация
Спецификация HTML 4.01 Определение ‘‘ в этой спецификации.	Рекомендация

Совместимость с браузером

Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на включение.

	Настольный компьютер						Мобильный телефон
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Веб-просмотр Android	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet
сокращение 900 04	Хром Полная поддержка 2	Край Полная поддержка 12	Firefox Полная поддержка 1 Примечания Полная поддержка 1 Notes Notes До Firefox 4 этот элемент реализовывал интерфейс HTMLSpanElement вместо стандартного интерфейса HTMLElement .	ИЭ Полная поддержка 7	Опера Полная поддержка Да	Сафари Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка Да

Легенда

Полная поддержка

Полная поддержка

См.