initial commit

1 files changed, 186 insertions, 0 deletions

diff --git a/files/ru/web/html/element/abbr/index.html b/files/ru/web/html/element/abbr/index.html
new file mode 100644
index 0000000000..c5e667922e
--- /dev/null
+++ b/files/ru/web/html/element/abbr/index.html
@@ -0,0 +1,186 @@
+---
+title: '<abbr>: Элемент Аббревиатура'
+slug: Web/HTML/Element/abbr
+tags:
+  - HTML
+  - Тег
+  - Элемент
+translation_of: Web/HTML/Element/abbr
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>Элемент HTML «аббревиатура» (<code>&lt;abbr&gt;</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>&lt;abbr&gt;</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>&lt;abbr&gt;</code>. Он <em>должен</em> содержать полную расшифровку или описание аббревиатуры.</p>
+
+<p>Каждый элемент <code>&lt;abbr&gt;</code> независим от других. Указание <code>title</code> на одном элементе не применяет это же описание к другим элементам с одинаковым содержанием.</p>
+
+<h2 id="Примечания_к_использованию">Примечания к использованию</h2>
+
+<h3 id="Обычное_использование">Обычное использование</h3>
+
+<p>Необязательно помечать все аббревиатуры с помощью <code>&lt;abbr&gt;</code>. Далее представлено несколько вариантов, которые помогут выбрать как помечать текст:</p>
+
+<ul>
+ <li>Когда используете аббревиатуру и хотите показать описание или расшифровку вне основного потока содержания, используйте <code>&lt;abbr&gt;</code> c подходящим {{htmlattrxref("title")}}.</li>
+ <li>Чтобы обозначить аббревиатуру, которая может быть незнакома читателю, используете <code>&lt;abbr&gt;</code> с атрибутом title или просто текст с описанем.</li>
+ <li>Когда присутствие аббревиатуры в тексте должно быть семантически выделено, полезен элемент <code>&lt;abbr&gt;</code>. В свою очередь, его использование может быть использовано для стилизации или написания сценариев.</li>
+ <li>Вы можете использовать <code>&lt;abbr&gt;</code> вместе с {{HTMLElement("dfn")}}, чтобы установить определения для терминов, которые являются аббревиатурами или акронимами. Смотрите пример {{anch("Определение в абревиатуре")}} ниже.</li>
+</ul>
+
+<h3 id="Граматческие_вопросы">Граматческие вопросы</h3>
+
+<p>В языках с {{interwiki("wikipedia", "grammatical number")}} (то есть, языки, в которых количество предметов влияет на грамматику предложения), используйте одинаковое граматическое число в атрибуте <code>title</code> и внутри элемента <code>&lt;abbr&gt;</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>&lt;abbr&gt;</code> без каких-либо атрибутов, как показано в примере ниже.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Использование &lt;abbr&gt;HTML&lt;/abbr&gt; – весело и легко!&lt;/p&gt;</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Семантическая_пометка_аббревиатуры")}}</p>
+
+<h3 id="Стилизация_аббревиатуры">Стилизация аббревиатуры</h3>
+
+<p>Вы можете использовать CSS, чтобы задать пользовательские стили для аббревиатуры, как показано в примере ниже.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Используя &lt;abbr&gt;CSS&lt;/abbr&gt;, вы можете стилизовать аббревиатуры!&lt;/p&gt;</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">&lt;p&gt;Эта статья великолепна! &lt;abbr title="Подпишусь под Каждым Словом"&gt;ППКС&lt;/abbr&gt;
+без раздумий.&lt;/p&gt;</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Задание_расшифровки")}}</p>
+
+<h3 id="Определение_в_абревиатуре">Определение в абревиатуре</h3>
+
+<p>Вы можете использовать <code>&lt;abbr&gt;</code> вместе с {{HTMLElement("dfn")}} для более формального определения абревиатуры, как показано ниже.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;&lt;dfn id="html"&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;
+&lt;/dfn&gt; – язык разметки, который используется для создания семантических и
+структурированных веб-страниц.&lt;/p&gt;
+
+&lt;p&gt;A &lt;dfn id="spec"&gt;Specification&lt;/dfn&gt;
+(&lt;abbr title="Specification"&gt;spec&lt;/abbr&gt;) – документ, в котором описаны основные
+принципы работы технологи или API и как получить к ним доступ.&lt;/p&gt;</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', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}</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">Использование элемента &lt;abbr&gt;</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>&lt;abbr&gt;</code>.</li>
+</ul>