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
|
---
title: <strong>
slug: Web/HTML/Element/strong
tags:
- Elemento
- HTML
- Referência(2)
- Semântica HTML a nível de texto(2)
- Web
translation_of: Web/HTML/Element/strong
---
<pre id="Summary">O elemento <strong>HTML </strong><code><strong><strong></strong></code> dá ao texto uma forte importância, e é tipicamente mostrado em negrito.</pre>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorias do conteúdo</a></th>
<td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flux content</a>,<a href="/en-US/docs/HTML/Content_categories#Phrasing_content"> Phrasing content</a>, conteúdo palpável.</td>
</tr>
<tr>
<th scope="row">Conteúdo permitido</th>
<td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
</tr>
<tr>
<th scope="row">Omissão de tag</th>
<td>Nenhuma, deve ter uma tag de início e uma tag de encerramento.</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, ou qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>Qualquer um</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLElement")}} Até Gecko 1.9.2 (Firefox 4) inclusive, Firefox implementa a interface <a href="/en-US/docs/DOM/span"><code>HTMLSpanElement</code></a> para este elemento.</td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Este elemento inclui apenas os <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</p>
<h2 id="Notas_de_uso">Notas de uso</h2>
<p>O elemento <code><strong> </code>é utilizado em conteúdos que são de "grande importância", incluindo coisas de urgentes (como alertas). Podem ser sentenças que são de grande importância para toda a página, ou, você pode meramente tentar pontuar que algumas palavras são de grande importância, comparado ao conteúdo próximo.</p>
<p>Tipicamente, estes elementos são renderizados por padrão, usando fontes em negrito. Contudo, ele não deve ser usado para simplesmente aplicar o estilo negrito; use o CSS {{cssxref("font-weight")}} para este propósito. Use o elemento {{HTMLElement("b")}} para chamar a atenção para certos textos sem a indicação de grande nível de importância. Use o elemento {{HTMLElement("em")}} para marcar textos que tem necessitam de ênfase.</p>
<p>Outro uso aceitavel para <code><strong></code> é denotado com o rótulo (label) de parágrafos, que representa notas ou avisos, dentro do texto da página.</p>
<h3 id="Bold_vs._Strong">Bold vs. Strong</h3>
<p>Muitas vezes é confuso para novos desenvolvedores porque há tantas maneiras de expressar a mesma coisa em um website renderizado. Bold e Strong são talvez um dos casos mais comuns. Porque usar <strong></strong> vs <b></b>? Você precisa digitar muito mais ao usar strong e ela produz o mesmo resultado, certo?</p>
<p>Talvez não; strong é um estado lógico, e bold é um estado físico. Estados lógicos separam apresentação do conteúdo, e ao fazer isso permitem que ele seja expresso de várias maneiras diferentes. Possivelmente em vez de renderizar um texto como negrito você queira renderizá-lo vermelho, ou num tamanho diferente, ou sublinhado, ou seja lá o que for. Faz mais sentido mudar as propriedades de apresentação de strong do que bold. Isto porque bold é um estado físico; não há separação entre a apresentação e o conteúdo, e fazer com que bold faça qualquer outra coisa diferente de deixar o texto em negrito seria confuso e ilógico.</p>
<p>É importante notar que <b></b> tem outros usos, quando se quer chamar atenção sem aumentar a importância.</p>
<h3 id="Emphasis_vs._Strong">Emphasis vs. Strong</h3>
<p>Enquanto no HTML4, Strong simplesmente indicava uma ênfase mais forte, em HTML5, o elemento é descrito como representando "uma forte importância para o seu conteúdo." Esta é uma importante distinção a se fazer. Enquanto Emphasis é usado para alterar o significado de uma sentença ("Eu <em>amo</em> cenouras" vs. "Eu amo <em>cenouras</em>"), Strong é usado para dar mais importância a porções de uma sentença (e.g., "<strong>Cuidado!</strong> Isso é <strong>muito perigoso.</strong>"). Ambos Strong e Emphasis podem ser aninhados para aumentar o grau relativo de importância ou reforçar ênfase, respectivamente.</p>
<h2 id="Exemplo">Exemplo</h2>
<h3 id="Exemplo_básico">Exemplo básico</h3>
<pre class="brush: html"><p>Ao fazer x é <strong>imperativo</strong>
que se faça y antes de prosseguir.</p>
</pre>
<h3 id="Resultado">Resultado</h3>
<p>Ao fazer x é <strong>imperativo</strong> que se faça y antes de prosseguir.</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '<strong>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '<strong>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '<strong>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Navegadores_Compatíveis">Navegadores Compatíveis</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="sect1"></h2>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/HTML/Element/b">HTML bold element</a></li>
</ul>
<div>{{HTMLRef}}</div>
|
