<strong>

  • Revision slug: HTML/Element/strong
  • Revision title: strong
  • Revision id: 1900
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment 1 words added

Revision Content

Summary

The HTML Strong Element (<strong>) gives text strong emphasis, typically this is displayed in bold.

Usage context

Content categories Flow content, phrasing content
Permitted content Phrasing content
Tag omission None, must have both a start tag and an end tag.
Permitted parent elements Any element that accepts phrasing content, or any element that accepts flow content.
Normative document HTML5, section 4.6.3; HTML 4.01, section 9.2.1

Attributes

Like all other HTML elements, this element supports the global attributes.

DOM Interface

This element implements the HTMLElement interface.

Implementation note: up to Gecko 1.9.2 inclusive, Firefox implements the HTMLSpanElement interface for this element.

Example

<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>

Result

When doing x it is imperative to do y before proceeding.

Bold vs. Strong

It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. Bold and Strong are perhaps one of the most common. Why use <strong></strong> vs <b></b> you have to type a whole lot more with strong and it produces the exact same result right?

Perhaps not, strong is a logical state, and bold is a physical state. Logical states separate presentation from the content, and by doing so allows for it to be expressed in many different ways, perhaps instead of rendering some text as bold you want to render it red, or a different size, or underlined, or whatever. It makes more sense to change the presentational properties of strong than it does bold. This is because of bold is a physical state, there is no separation of presentation and content, making bold do anything other than bold text would be confusing and illogical.

See also

{{ HTML:Element_Navigation() }}

{{ languages( { "de": "de/HTML/Element/strong", "pl": "pl/HTML/Element/strong" } ) }}

Revision Source

<h2>Summary</h2>
<p>The HTML Strong Element (<span style="font-family: Courier New;">&lt;strong&gt;</span>) gives text strong emphasis, typically this is displayed in bold.</p>
<h3 class="editable">Usage context</h3>
<table class="standard-table"> <tbody> <tr> <td>Content categories</td> <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content categories#Flow content">Flow content</a>, <a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">phrasing content</a><a href="/en/HTML/Content_categories#form-associated_content" title="en/HTML/Content categories#form-associated content"><br> </a></td> </tr> <tr> <td>Permitted content</td> <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a><a href="/en/HTML/Content_categories#form-associated_content" title="en/HTML/Content categories#form-associated content"><br> </a></td> </tr> <tr> <td>Tag omission</td> <td>None, must have both a start tag and an end tag.</td> </tr> <tr> <td>Permitted parent elements</td> <td>Any element that accepts <a href="/en/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Flow_content">flow content</a>.</td> </tr> <tr> <td>Normative document</td> <td><a class="external" href="http://www.w3.org/TR/html5/text-level-semantics.html#the-strong-element" title="http://www.w3.org/TR/html5/text-level-semantics.html#the-strong-element">HTML5, section 4.6.3</a>; <a class="external" href="http://www.w3.org/TR/html401/struct/text.html#edef-STRONG" title="http://www.w3.org/TR/html401/struct/text.html#edef-STRONG">HTML 4.01, section 9.2.1</a></td> </tr> </tbody>
</table>
<h3 class="editable">Attributes</h3>
<p>Like all other HTML elements, this element supports the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<h3 class="editable">DOM Interface</h3>
<p>This element implements the <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> interface.</p>
<div class="note">
<p><strong>Implementation note: </strong>up to Gecko 1.9.2 inclusive, Firefox implements the <a href="/en/DOM/span" title="en/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface for this element.</p>
</div>
<h3>Example</h3>
<pre class="brush: html">&lt;p&gt;When doing x it is &lt;strong&gt;imperative&lt;/strong&gt; to do y before proceeding.&lt;/p&gt;
</pre>
<h4>Result</h4>
<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>
<h3>Bold vs. Strong</h3>
<p>It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. Bold and Strong are perhaps one of the most common. Why use &lt;strong&gt;&lt;/strong&gt; vs &lt;b&gt;&lt;/b&gt; you have to type a whole lot more with strong and it produces the exact same result right?</p>
<p>Perhaps not, strong is a logical state, and bold is a physical state. Logical states separate presentation from the content, and by doing so allows for it to be expressed in many different ways, perhaps instead of rendering some text as bold you want to render it red, or a different size, or underlined, or whatever. It makes more sense to change the presentational properties of strong than it does bold. This is because of bold is a physical state, there is no separation of presentation and content, making bold do anything other than bold text would be confusing and illogical.</p>
<h3>See also</h3>
<ul> <li><a href="/en/HTML/Element/b" title="en/HTML/Element/b">HTML bold element</a></li>
</ul>
<p>{{ HTML:Element_Navigation() }}</p>
<p>{{ languages( { "de": "de/HTML/Element/strong", "pl": "pl/HTML/Element/strong" } ) }}</p>
Revert to this revision