files/ru/web/html/element/strong/index.html


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

---
title: <strong>
slug: Web/HTML/Element/strong
tags:
  - HTML
  - HTML текстовая семантика
  - strong
  - Важное значение
  - Веб
  - Острая необходимость
  - Справка
  - Элемент
translation_of: Web/HTML/Element/strong
---
<p id="Summary"><span class="seoSummary">Элемент <strong>сильной значимости</strong> (<strong><code>&lt;strong&gt;</code>)</strong> указывает на то, что его содержание имеет большое значение, серьезность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.</span></p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
   <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Потоковой контент</a>, <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Фразовый контент</a>, явный контент.</td>
  </tr>
  <tr>
   <th scope="row">Разрешенный контент</th>
   <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Фразовый контент</a>.</td>
  </tr>
  <tr>
   <th scope="row">Опускание тегов</th>
   <td>Нет, должен иметь как начальный тег, так и конечный тег.</td>
  </tr>
  <tr>
   <th scope="row">Разрешенные родители</th>
   <td>Любой элемент, который принимает <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">фразовый контент</a>, или любой другой элемент, который принимает <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">потоковой контент</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="Атрибуты">Атрибуты</h2>

<p>Этот элемент включает в себя <a href="https://developer.mozilla.org/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">глобальные атрибуты</a>.</p>

<h2 id="Замечания_по_использованию">Замечания по использованию</h2>

<p>Элемент <code>&lt;strong&gt;</code> предназначен для контента, который имеет "большое значение", включая вещи большой серьезности или срочности (например, предупреждения). Это может быть предложение, которое имеет большое значение для всей страницы, или вы можете просто попытаться указать, что некоторые слова имеют большее значение по сравнению с соседним контентом.</p>

<p>Обычно этот элемент отображается по умолчанию с использованием жирного шрифта. Однако, он не должен быть использован просто для применения жирного стиля; используйте свойство CSS {{cssxref("font-weight")}} для этой цели. Используйте элемент {{HTMLElement("b")}}, чтобы привлечь внимание к определенному тексту без указания более высокого уровня важности. Используйте элемент {{HTMLElement("em")}} element для выделения текста, который имеет выраженный акцент.</p>

<p>Другим приемлемым использованием для <code>&lt;strong&gt;</code> является обозначение ярлыков абзацев, которые представляют заметки или предупреждения в тексте страницы.</p>

<h3 id="&lt;b>_против_&lt;strong>">&lt;b&gt; против &lt;strong&gt;</h3>

<p>Это часто путает новых разработчиков, почему существует так много способов выразить одно и то же на представленном веб-сайте. {{HTMLElement("b")}} и <code>&lt;strong&gt;</code> возможно, является одним из наиболее распространенных источников путаницы, заставляя разработчиков задавать себе вопрос: «Должен ли я использовать <code>&lt;b&gt;</code> или <code>&lt;strong&gt;</code>? Разве они не делают одно и тоже?»</p>

<p>Не совсем. Элемент <code>&lt;strong&gt;</code> для контента, который имеет большее значение, в то время как элемент <code>&lt;b&gt;</code> используется для привлечения внимания к тексту, не указывая на то, что это более важно.</p>

<p>Это может помочь понять, что оба являются правильным и семантическими элементами в HTML5, и это совпадение, что оба они имеют одинаковый стиль (полужирный) в большинстве браузеров (хотя некоторые старые браузеры фактически подчеркивают <code>&lt;strong&gt;</code>). Каждый элемент предназначен для использования в определенных типах сценариев, и если вы хотите жирный шрифт просто для украшения, вместо этого вы должные использовать свойства CSS {{cssxref("font-weight")}}.</p>

<p>Предполагаемое значение или цель прилагаемого текста должно быть тем, что определяет, какой элемент вы используете. Значение общения - вот что такое семантика.</p>

<h3 id="&lt;em>_против_&lt;strong>">&lt;em&gt; против &lt;strong&gt;</h3>

<p>Добавление к путанице заключается в том, что, хотя HTML 4 определяет <code>&lt;strong&gt;</code> как просто указывающий на более сильный акцент, HTML 5 определяет <code>&lt;strong&gt;</code> как представляющий "большое значение для его содержимого". Это важное различие.</p>

<p>В то время, как  <code>&lt;em&gt;</code> используется для изменения значения предложения, поскольку делается устный акцент ("Я <em>люблю</em> морковь" против "Я люблю<em>морковь</em>"), <code>&lt;strong&gt;</code> используется, для придания предложению порции особого значения (например, "<strong>Предупреждение!</strong> Это <strong>очень опасно.</strong>") Оба элемента <code>&lt;strong&gt;</code> и <code>&lt;em&gt;</code> могут быть вложены для увеличения относительной степени важности или усиленного акцента, соответственно.</p>

<h2 id="Примеры">Примеры</h2>

<h3 id="Основной_пример">Основной пример</h3>

<pre class="brush: html notranslate">&lt;p&gt;Прежде чем продолжить, &lt;strong&gt;убедитесь, что вы надели защитные очки&lt;/strong&gt;.&lt;/p&gt;</pre>

<p>Результат:</p>

<p>{{EmbedLiveSample("Основной_пример", 650, 80)}}</p>

<h3 id="Маркировочные_предупреждения">Маркировочные предупреждения</h3>

<pre class="brush: html notranslate">&lt;p&gt;&lt;strong&gt;Важно:&lt;/strong&gt; прежде чем продолжить, убедитесь, что вы добавили много масла.&lt;/p&gt;</pre>

<p>Это приведет к:</p>

<p>{{EmbedLiveSample("Маркировочные_предупреждения", 650, 80)}}</p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '&lt;strong&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '&lt;strong&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '&lt;strong&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

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

<p>{{Compat("html.elements.strong")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Элемент {{HTMLElement("b")}}</li>
 <li>Элемент {{HTMLElement("em")}}</li>
 <li>Элемент {{cssxref("font-weight")}}</li>
</ul>

<div>{{HTMLRef}}</div>