1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
---
title: '<abbr>: Элемент Аббревиатура'
slug: Web/HTML/Element/abbr
tags:
- HTML
- Тег
- Элемент
translation_of: Web/HTML/Element/abbr
---
<div>{{HTMLRef}}</div>
<p><strong>Элемент HTML «аббревиатура» (<code><abbr></code>)</strong> представляет собой аббревиатуру и, опционально, может показывать её расшифровку. Расшифровка записывается в атрибут {{htmlattrxref("title")}}. Иные значения <code>title</code>, кроме расшифровки аббревиатуры не допускаются.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div>
<p class="hidden">Исходный код этого интерактивного примера находится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте нам запрос.</p>
<p>Статья <em><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting#%D0%90%D0%B1%D0%B1%D1%80%D0%B5%D0%B2%D0%B8%D0%B0%D1%82%D1%83%D1%80%D1%8B">Как помечать аббревиатуры и сделать их потянутыми</a></em> поможет понять как использовать <code><abbr></code> и связанные элементы.</p>
<table class="htmlelt">
<tbody>
<tr>
<th scope="row">Интерфейс DOM</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
<tr>
<th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
<td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories/#Фразовый_контент" title="HTML/Content categories#Phrasing content">текстовый контент</a>, явный контент</td>
</tr>
<tr>
<th scope="row">Разрешённое содержимое</th>
<td><a href="/ru/docs/Web/Guide/HTML/Content_categories/#Фразовый_контент" title="HTML/Content_categories#Phrasing_content">Фразовый контент</a></td>
</tr>
<tr>
<th scope="row">Разрешённые родительские элементы</th>
<td>Любые, поддерживающие <a href="/ru/docs/Web/Guide/HTML/Content_categories/#Фразовый_контент" title="HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
</tr>
<tr>
<th scope="row">Разрешённые ARIA роли</th>
<td>Любые</td>
</tr>
<tr>
<th scope="row">DOM интерфейс</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">Атрибуты</h2>
<p><span style="line-height: 21px;">Этот элемент поддерживает только </span><a href="/ru/docs/Web/HTML/Общие_атрибуты" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">. Атрибут </span>{{htmlattrxref("title")}} имеет специальное семантическое значение, когда используется вместе с элементом <code><abbr></code>. Он <em>должен</em> содержать полную расшифровку или описание аббревиатуры.</p>
<p>Каждый элемент <code><abbr></code> независим от других. Указание <code>title</code> на одном элементе не применяет это же описание к другим элементам с одинаковым содержанием.</p>
<h2 id="Примечания_к_использованию">Примечания к использованию</h2>
<h3 id="Обычное_использование">Обычное использование</h3>
<p>Необязательно помечать все аббревиатуры с помощью <code><abbr></code>. Далее представлено несколько вариантов, которые помогут выбрать как помечать текст:</p>
<ul>
<li>Когда используете аббревиатуру и хотите показать описание или расшифровку вне основного потока содержания, используйте <code><abbr></code> c подходящим {{htmlattrxref("title")}}.</li>
<li>Чтобы обозначить аббревиатуру, которая может быть незнакома читателю, используете <code><abbr></code> с атрибутом title или просто текст с описанием.</li>
<li>Когда присутствие аббревиатуры в тексте должно быть семантически выделено, полезен элемент <code><abbr></code>. В свою очередь, его использование может быть использовано для стилизации или написания сценариев.</li>
<li>Вы можете использовать <code><abbr></code> вместе с {{HTMLElement("dfn")}}, чтобы установить определения для терминов, которые являются аббревиатурами или акронимами. Смотрите пример {{anch("Определение в аббревиатуре")}} ниже.</li>
</ul>
<h3 id="Грамматические_вопросы">Грамматические вопросы</h3>
<p>В языках с {{interwiki("wikipedia", "grammatical number")}} (то есть, языки, в которых количество предметов влияет на грамматику предложения), используйте одинаковое грамматическое число в атрибуте <code>title</code> и внутри элемента <code><abbr></code>. Это также имеет место в языках с более чем двумя грамматическими числами (например, арабский имеет не только категории единственного и множественного числа, но двойственного).</p>
<h2 id="Стили_по умолчанию">Стили по умолчанию</h2>
<p>Назначение данного элемента исключительно для удобства автора и браузеры отображают его как ({{cssxref('display')}}<code>: inline</code>) по умолчанию, хотя его стиль по умолчанию меняется в разных браузерах:</p>
<ul>
<li>Некоторые браузеры, например Internet Explorer, стилизуют его как элемент {{HTMLElement("span")}}.</li>
<li>Opera, Firefox и другие добавляют подчёркивание точками к содержанию элемента.</li>
<li>Некоторые браузеры не только подчёркивают, но и меняют начертание на капитель (small caps). Чтобы избежать этого, добавьте {{cssxref('font-variant')}}<code>: none</code> в ваш CSS.</li>
</ul>
<h2 id="Примеры">Примеры</h2>
<h3 id="Семантическая_пометка_аббревиатуры">Семантическая пометка аббревиатуры</h3>
<p>Чтобы пометить аббревиатуру без задания описания или расшифровок, просто используйте <code><abbr></code> без каких-либо атрибутов, как показано в примере ниже.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p>Использование <abbr>HTML</abbr> – весело и легко!</p></pre>
<h4 id="Результат">Результат</h4>
<p>{{EmbedLiveSample("Семантическая_пометка_аббревиатуры")}}</p>
<h3 id="Стилизация_аббревиатуры">Стилизация аббревиатуры</h3>
<p>Вы можете использовать CSS, чтобы задать пользовательские стили для аббревиатуры, как показано в примере ниже.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><p>Используя <abbr>CSS</abbr>, вы можете стилизовать аббревиатуры!</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">abbr {
font-variant: all-small-caps;
}</pre>
<h4 id="Результат_2">Результат</h4>
<p>{{EmbedLiveSample("Стилизация_аббревиатуры")}}</p>
<h3 id="Задание_расшифровки">Задание расшифровки</h3>
<p>Добавление атрибута {{htmlattrxref("title")}} даёт вам возможность задать расшифровку или описание для аббревиатуры или акронима.</p>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html"><p>Эта статья великолепна! <abbr title="Подпишусь под Каждым Словом">ППКС</abbr>
без раздумий.</p></pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("Задание_расшифровки")}}</p>
<h3 id="Определение_в_аббревиатуре">Определение в аббревиатуре</h3>
<p>Вы можете использовать <code><abbr></code> вместе с {{HTMLElement("dfn")}} для более формального определения аббревиатуры, как показано ниже.</p>
<h4 id="HTML_4">HTML</h4>
<pre class="brush: html"><p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
</dfn> – язык разметки, который используется для создания семантических и
структурированных веб-страниц.</p>
<p>A <dfn id="spec">Specification</dfn>
(<abbr title="Specification">spec</abbr>) – документ, в котором описаны основные
принципы работы технологи или API и как получить к ним доступ.</p></pre>
<h4 id="Result_2">Result</h4>
<p>{{EmbedLiveSample("Определение_в_аббревиатуре", 600, 120)}}</p>
<p>Смотрите больше примеров в статье <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting#%D0%90%D0%B1%D0%B1%D1%80%D0%B5%D0%B2%D0%B8%D0%B0%D1%82%D1%83%D1%80%D1%8B">Как размечать аббревиатуры и делать их понятными</a>.</p>
<h2 id="Specifications" name="Specifications">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Примечание</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
<p>{{Compat("html.elements.abbr")}}</p>
<h2 id="See_also" name="See_also">Смотрите также</h2>
<ul>
<li><a href="/ru/Learn/HTML/Element/abbr">Использование элемента <abbr></a></li>
<li>Другие <a href="/ru/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">элементы, являющиеся семантически текстовыми</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
<li>Устаревший элемент {{HTMLElement("acronym")}}, который был заменён элементом <code><abbr></code>.</li>
</ul>
|
