<p>Semantically speaking, is there an appropriate place in today's websites (late 2008+) where using the bold <code>&lt;b&gt;</code> and italic <code>&lt;i&gt;</code> tags are more useful than the more widely used <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code> tags?</p>

[{'answer_id': 63761, 'author': 'ceejayoz', 'author_id': 1902010, 'author_profile': 'https://Stackoverflow.com/users/1902010', 'pm_score': 3, 'selected': False, 'text': "<p>Never. They are removed in XHTML 2.0 as they are presentational tags.  CSS should be used to bold/italicise content.</p>\n\n<p><strong>edit:</strong> If you're looking for a purely presentational tag, that's what the <code>SPAN</code> tag with a class and a little CSS is for.</p>\n"}, {'answer_id': 63792, 'author': 'Adam Davis', 'author_id': 2915, 'author_profile': 'https://Stackoverflow.com/users/2915', 'pm_score': -1, 'selected': False, 'text': "<p><strong>When writing websites for mobile devices</strong>.  They don't always support the 'latest and greatest' standards, are depreciated but not deleted from all modern browsers, and simply take up less space and bandwidth (though in theory the streams are compressed by either the websites or the wireless browser, it can't be counted on).</p>\n\n<p>-Adam</p>\n"}, {'answer_id': 63793, 'author': 'Sean Cameron', 'author_id': 6692, 'author_profile': 'https://Stackoverflow.com/users/6692', 'pm_score': 0, 'selected': False, 'text': "<p>The &lt;b> and &lt;i> tags don't have semantic meaning, whereas &lt;strong> and &lt;em> do. If a reader read the block of text aloud it would react to the &lt;strong> and &lt;em> tags, whereas the &lt;i> and &lt;b> tags would be ignored, and treated and purely visual elements. I tend to regard &lt;i> and &lt;b> as deprecated.</p>\n"}, {'answer_id': 63804, 'author': 'Andrew G. Johnson', 'author_id': 428190, 'author_profile': 'https://Stackoverflow.com/users/428190', 'pm_score': 0, 'selected': False, 'text': '<p>Whenever you want to do things incorrectly ... just kidding.</p>\n\n<p>The real answer is never, these tags have been deprecated by the <a href="http://www.w3c.com/" rel="nofollow noreferrer">W3C</a></p>\n'}, {'answer_id': 63806, 'author': 'Daniel Papasian', 'author_id': 7548, 'author_profile': 'https://Stackoverflow.com/users/7548', 'pm_score': 0, 'selected': False, 'text': '<p>Neither &lt;b> nor &lt;i> are semantic tags, so purists would say they should not be used.  Where I\'ve seen their use justified are in things like putting online content in print where text was bolded or italicized as a matter of convention, but not as a manner of strengthening or emphasizing content.</p>\n\n<p>The easy example is if you\'re putting online a magazine article that references a book by its title: you may want to put the book title in italics, but the italics are not for emphasis, so the &lt;em> tag would be inappropriate.  You could use &lt;i> here, but the semantic thing to do would be to use something like &lt;span class="booktitle"> and then use CSS to make booktitles italics.  You are referencing a title, not putting emphasis, and you wouldn\'t want a screen reader to put verbal emphasis on the title.</p>\n\n<p>My personal opinion is to not use either &lt;b> or &lt;i> today, but using &lt;strong> or &lt;em> as their substitutes when you aren\'t really looking to do anything besides bold or italicize the text is equally incorrect.</p>\n'}, {'answer_id': 63810, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 1, 'selected': False, 'text': '<p>For markup generated by a WYSIWYG editor.</p>\n'}, {'answer_id': 63821, 'author': 'Chris Broadfoot', 'author_id': 3947, 'author_profile': 'https://Stackoverflow.com/users/3947', 'pm_score': 3, 'selected': False, 'text': '<p>While in general I would stay away from non-semantic tags like <code>b</code> and <code>i</code>, <code>strong</code> and <code>em</code> are not direct replacements for <code>b</code> and <code>i</code>.</p>\n\n<p>I would use <code>b</code> or <code>i</code> when it\'s only presentation you\'re going for, and what you\'re marking up has no semantic meaning. For example, a logo like stackoverflow could be marked up with <code>stack&lt;b&gt;overflow&lt;/b&gt;</code>. The "overflow" portion has no semantic meaning over "stack", yet <code>stack&lt;span class="overflow-logo"&gt;overflow&lt;/span&gt;</code> doesn\'t offer anything either.</p>\n\n<p>Hope this helps.</p>\n\n<hr>\n\n<p>Not sure how to comment (edit: need moar karma!), but this is in reply to Erik\'s comment.</p>\n\n<p>Please read <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-b" rel="noreferrer">the HTML5 working draft</a>. It gives a good explanation on when to use <code>b</code>.</p>\n\n<blockquote>\n  <p>The <code>b</code> element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.</p>\n</blockquote>\n\n<p>"overflow" does not have emphasis over "stack" in the logo, therefore wrapping "overflow" with <code>em</code> is semantically incorrect.</p>\n'}, {'answer_id': 63852, 'author': 'Sean McMains', 'author_id': 2041950, 'author_profile': 'https://Stackoverflow.com/users/2041950', 'pm_score': 0, 'selected': False, 'text': '<p>I think when you\'re trying to make your markup meaningful, these are rarely useful.</p>\n\n<p>There are, however, new tags that produce some of the same results, but which provide even more semantic value. I like to use the &lt;cite&gt; tag when I\'m referring to the name of a book, for example, as it still gets italicised, but the HTML now carries meaning about why.</p>\n\n<p>There are a variety of other semantic tags that can also affect formatting listed here:</p>\n\n<p><a href="http://www.w3.org/TR/xhtml2/mod-text.html" rel="nofollow noreferrer">http://www.w3.org/TR/xhtml2/mod-text.html</a></p>\n'}, {'answer_id': 63890, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': "<p>I've been using &lt;b&gt; for years to indicate key words on my web site.  I wrote a small utility that crawls the site looking for &lt;b&gt; tags and adds them to an index.  I use &lt;strong&gt; when I want to bold a word without adding it to the index.  I have used this convention for years -- too late to quit now.</p>\n"}, {'answer_id': 63913, 'author': 'Daniel Stockman', 'author_id': 5707, 'author_profile': 'https://Stackoverflow.com/users/5707', 'pm_score': 3, 'selected': False, 'text': '<p>According to the <a href="http://www.w3.org/html/wg/html5/" rel="noreferrer">HTML 5 spec</a>, <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> should be used <em>when appropriate</em>.</p>\n\n<p><a href="http://www.w3.org/html/wg/html5/#the-i" rel="noreferrer">On the i</a>:</p>\n\n<blockquote>\n  <p>[A] span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.</p>\n</blockquote>\n\n<p><a href="http://www.w3.org/html/wg/html5/#the-i" rel="noreferrer">On the b</a>:</p>\n\n<blockquote>\n  <p>[A] span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.</p>\n</blockquote>\n\n<p>Generally speaking, "when appropriate" is deemed to be as a last resort, when all other semantic options have been exhausted. "Presentational" though they may be, it would certainly be a disservice to their semantic cousins <code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code> to consider them always italic or bolded, respectively.</p>\n'}, {'answer_id': 63962, 'author': 'Nathan Chase', 'author_id': 8086, 'author_profile': 'https://Stackoverflow.com/users/8086', 'pm_score': 2, 'selected': False, 'text': '<p>On <a href="http://www.webmasterworld.com/forum21/7095-1-15.htm" rel="nofollow noreferrer">http://www.webmasterworld.com/forum21/7095-1-15.htm</a> there\'s a good comment:</p>\n\n<blockquote>\n  <p>"If page readers really read every\n  <code>&lt;strong&gt;</code> tag in a strong voice, or\n  really emphasize every <code>&lt;em&gt;</code> section on\n  a page, then the poor user gets a page\n  shouting at her or him on a regular\n  basis.</p>\n  \n  <p>I think this issue is really a\n  no-brainer. If I am setting a bold or\n  italic font for purposes of typography\n  only, then I use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code>. If\n  there\'s a word or phrase that I want\n  to emphasize as I would in speaking,\n  then - and only then - do I use\n  <code>&lt;strong&gt;</code> or <code>&lt;em&gt;</code>."</p>\n</blockquote>\n'}, {'answer_id': 64005, 'author': 'Charles Roper', 'author_id': 1944, 'author_profile': 'https://Stackoverflow.com/users/1944', 'pm_score': 0, 'selected': False, 'text': '<p>It could be argued that there is still a use for the <code>&lt;i&gt;</code> tag: when expressing the scientific name (aka the Latin name) of a species. The scientific name of a species is, by convention, usually presented in italics. <a href="http://en.wikipedia.org/wiki/Golden_eagle" rel="nofollow noreferrer"><em>Example</em></a>. It is semantically incorrect to use <code>&lt;em&gt;</code> in this situation because one is not trying to emphasise the name but rather merely distinguish it visually. It may be more appropriate to use something like <code>&lt;span class="sci-name"&gt;</code>, but when one considers that most scientific names are composed of words of the <a href="http://en.wikipedia.org/wiki/Italic_languages" rel="nofollow noreferrer">italic languages</a>, mainly Latin, the <code>&lt;i&gt;</code> tag becomes a rather sematically rich and convenient solution.</p>\n'}, {'answer_id': 64121, 'author': 'Robert D.', 'author_id': 8326, 'author_profile': 'https://Stackoverflow.com/users/8326', 'pm_score': 0, 'selected': False, 'text': '<p>There are technical rules, but here are my two rules of thumb:</p>\n\n<p>1) If you are writing something where, if spoken, you would emphasize a word, &lt; strong > and &lt; em > are appropriate. (E.g., "You have got to be <em>sh*tting</em> me, Pyle!")</p>\n\n<p>2) If you are emphasizing a word for a technical reason, but would not emphasize the word in spoken conversation, &lt; b > and &lt; i > are appropriate. (E.g., "He boarded the RMS <i>Titanic</i> and sailed away, never to be seen again.")</p>\n\n<p>Don\'t leave out other tags like &lt; cite >, though!</p>\n'}, {'answer_id': 64226, 'author': 'McKay', 'author_id': 8384, 'author_profile': 'https://Stackoverflow.com/users/8384', 'pm_score': 0, 'selected': False, 'text': '<p>Officially, &lt;i /&gt; and &lt;b /&gt; are "presentational" and shouldn\'t be used. While many developers think that &lt;em /&gt; and &lt;strong /&gt; are presentational, they are not. They are generally italicized and bolded resopectively, but the CSS can (and should, when appropriate) change how the emphasis and strongness could be displayed.</p>\n\n<p>Similar things could be done with css on a &lt;span /&gt; tag, and many consider that the preferred method, but it isn\'t substantiatable with the specification.</p>\n'}, {'answer_id': 27996049, 'author': 'unor', 'author_id': 1591669, 'author_profile': 'https://Stackoverflow.com/users/1591669', 'pm_score': 0, 'selected': False, 'text': '<p><em>Some years have passed …</em></p>\n\n<p>In <a href="http://www.w3.org/TR/2014/REC-html5-20141028/" rel="nofollow noreferrer"><strong>HTML5</strong> (W3C Recommendation)</a>, none of these four elements are deprecated/obsolete.</p>\n\n<p>The (non-normative!) <a href="http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#usage-summary" rel="nofollow noreferrer">usage summary</a> lists their purposes:</p>\n\n<ul>\n<li><p><a href="http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-strong-element" rel="nofollow noreferrer"><code>strong</code></a>: importance</p></li>\n<li><p><a href="http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-b-element" rel="nofollow noreferrer"><code>b</code></a>: keywords</p></li>\n<li><p><a href="http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-em-element" rel="nofollow noreferrer"><code>em</code></a>: stress emphasis </p></li>\n<li><p><a href="http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-i-element" rel="nofollow noreferrer"><code>i</code></a>: alternative voice</p></li>\n</ul>\n\n<p>Of course, if you want to use them, always refer to their normative definitions (which you can find by clicking on the element names) and verify that they are appropriate for your case.</p>\n\n<h3>Examples</h3>\n\n<p><a href="https://stackoverflow.com/a/18765356/1591669">The <code>b</code> element could be used for keywords in a text</a>, where the other three elements would not be appropriate: such keywords are not stressed (<code>em</code>), nor are they offset (<code>i</code>), and there is also no need for distinguishing them from boilerplate etc. (<code>strong</code>).</p>\n\n<p><a href="https://stackoverflow.com/a/17637757/1591669">The <code>i</code> element could be used for scientific names in Latin</a>, where <code>strong</code> and <code>em</code> are not appropriate. While <code>b</code> seems to be appropriate, too, its definition explicitly excludes the cases handled by <code>i</code>.</p>\n\n<p>There can of course be cases where you’d use several of these elements. For example, a scientific name could also be a keyword in a document (<code>&lt;b&gt;&lt;i&gt;…&lt;/i&gt;&lt;/b&gt;</code>).</p>\n'}]
['https://Stackoverflow.com/questions/63752', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/8086/']