Related
Giving that both <strong> and <small> tags are inline, which usage should be considered as correct semantically?
Case 1:
<strong><small>Some text</small></strong>
Case 2:
<small><strong>Some text</strong></small>
Does it matter at all?
Anyone who has ever done search engine optimisation would know h1 tag makes whole hell of a lot of difference between ranked on page 1 to page 30. So yes these tags do have their importance but how?
I am copy pasting official explanation and my subsequent question is underneath.
<b> vs. <strong>
It is often confusing to new developers why there are so many ways to
express the same thing on a rendered website. and are
perhaps one of the most common sources of confusion, causing
developers to ask "Should I use or ? Don't they both do
the same thing?"
Not exactly. The element is for content that is of greater
importance, while the element is used to draw attention to text
without indicating that it's more important.
It may help to realize that both are valid and semantic elements in
HTML5 and that it's a coincidence that they both have the same default
styling (boldface) in most browsers (although some older browsers
actually underline ). Each element is meant to be used in
certain types of scenarios, and if you want to bold text for
decoration, you should instead actually use the CSS font-weight
property.
The intended meaning or purpose of the enclosed text should be what
determines which element you use. Communicating meaning is what
semantics are all about.
<em> vs. <strong>
Adding to the confusion is the fact that while HTML
4 defined as indicating a stronger emphasis, HTML 5 defines
as representing "strong importance for its contents." This is
an important distinction to make.
While is used to change the meaning of a sentence as spoken
emphasis does ("I love carrots" vs. "I love carrots"), is
used to give portions of a sentence added importance (e.g., "Warning!
This is very dangerous.") Both and can be nested to
increase the relative degree of importance or stress emphasis,
respectively.
The HTML <small> element represents side-comments and small print,
like copyright and legal text, independent of its styled presentation.
By default, it renders text within it one font-size smaller, such as
from small to x-small.
The question is if all of them have predefined behaviour and don't do anything other than visual appeal. Since Bold means important and strong means important visually speaking. then who is this behaviour targeted to. We don't usually go looking in source code do we?
Answer is BOTS and most importantly indexing, scraping BOTS. If you are doing SEO and some kind of content analytics or parsing this from that then these tags come handy. Other than that its no different than
<i><b>hello</b></i>
or
<b><i>hello</i></b>
or
<small><strong>hello</strong></small>
or
<strong><small>hello</small></strong>
Yes they do matter depending on your case to case basis. Other than visual human reads if I am expecting lot of computer readability such text to speech, or bots, or assisted display etc then these matter.
bold: tag my dad telling me to do something
strong: tag my dad telling me to do something in firm instructive voice
italic: its part of content but not flow of content doesn't matter if you missed it
small: its part of content but not flow of content but if you missed it we might come back to say you should have read it.
Within content marketing perspective above distinctions play a major role with in source code which computers are going to parse.
It does not matter.
<strong> produces font-weight: bold; and <small> produces font-size: smaller;, neither of which overrides eachother.
From a syntactic standpoint, either can be used. Since both are phrasing content elements that can contain other phrasing content, they're both equally valid HTML.
From a semantic standpoint, be sure you're using each tag appropriately:
<small> should not be used to style text smaller. It should only be used to provide semantic meaning to—
...side-comments and small print, like copyright and legal text, independent of its styled presentation.
Likewise, <strong> should not be used to make text bold. It should only be used to indicate—
...that its contents have strong importance, seriousness, or urgency.
These tags should also not encompass more than they need to. For instance, you might have might have legal text like this, where only a portion of the text has strong importance:
<p><small>Copyright Foobar Industries, 2021. <strong>Do not reprint without permission.</strong></small></p>
If the entirety of your side-comments or small print is of strong importance, you can use either approach. They are semantically equivalent and syntactically valid.
Some text
Some text
Both of them will do the same thing. It will bold the text and lower its font size.
What's the difference between <b> and <strong>, <i> and <em> in HTML/XHTML? When should you use each?
They have the same effect on normal web browser rendering engines, but there is a fundamental difference between them.
As the author writes in a discussion list post:
Think of three different situations:
web browsers
blind people
mobile phones
"Bold" is a style - when you say "bold a word", people basically know that
it means to add more, let's say "ink", around the letters until they stand out
more amongst the rest of the letters.
That, unfortunately, means nothing to a blind person. On mobile phones
and other PDAs, text is already bold because screen resolution is very small. You can't bold a bold without screwing something up.
<b> is a style - we know what "bold" is supposed to look like.
<strong> however is an indication of how something should be understood. "Strong" could (and often does) mean "bold" in a browser, but it could also mean a lower tone for a speaking program like Jaws (for blind people) or be represented by an underline (since you can't bold a bold) on a Palm Pilot.
HTML was never meant to be about styles. Do some searches for "Tim Berners-Lee" and "the semantic web." <strong> is semantic—it describes the text it surrounds (e.g., "this text should be stronger than the rest of the text you've displayed") as opposed to describing how the text it surrounds should be displayed (e.g., "this text should be bold").
<b> and <i> are explicit - they specify bold and italic respectively.
<strong> and <em> are semantic - they specify that the enclosed text should be "strong" or "emphasised" in some way, usually bold and italic, but allow for the actual styling to be controlled via CSS. Hence these are preferred in modern web pages.
<strong> and <em> add extra semantic meaning to your document. It just so happens that they also give a bold and italic style to your text.
You could of course override their styling with CSS.
<b> and <i> on the other hand only apply font styling and should no longer be used. (Because you're supposed to format with CSS, and if the text was actually important then you would probably make it "strong" or "emphasised" anyway!)
Hope that makes sense.
I'm going to hazard a historical and practical hot take here:
Yes, according to specifications, <strong> had a semantic meaning in HTML4 and <b> had a strictly presentational meaning.
Yes, when HTML5 came along, new semantic meaning that was slightly different was introduced for b and i.
Yes, the W3C recommends — basically — TL,DR; don't use b and i.
You should always bear in mind that the content of a b element may not always be bold, and that of an i element may not always be italic. The actual style is dependent on the CSS style definitions. You should also bear in mind that bold and italic may not be the preferred style for content in certain languages. You should not use b and i tags if there is a more descriptive and relevant tag available.
BUT:
The real world internet has massive loads of existing HTML that is never going to get updated. The real world internet has to account for content generated and copy and pasted between a vast network of software and CMS systems that all have different developer teams and were built in different eras.
So if you're writing HTML or building a system that writes HTML for other people — sure — definitely use <strong> instead of <b> to mean "strongly emphasized" because it's more semantically correct.
But really, the on-the-ground reality is that the semantic and stylistic meaning of <strong> and <b> have merged over time out of necessity.
If I'm building a CMS that allows any pasting of styled text, I need to plan both for people who are pasting in <b> and mean "strongly emphasized" and for people who are pasting in <strong> and mean "make this text bold". It might not be "right", but it's how the real world works at this moment in time.
And so, if I'm writing a stylesheet for that site, I'm probably going to end up writing some styles that look like this:
b,
strong {
font-weight: 700;
/* ... more styles here */
}
i,
em {
font-style: italic;
/* ... more styles here */
}
Or, I'm going to rely on the browser defaults, which do the same thing as the code above in every modern browser I know of.
Or, I might be one of probably millions of sites that use normalize.css, which takes care to ensure that b and strong are treated the same.
There's such a massive ocean of HTML out there in the world already that works off of this expectation, I just can't imagine that b will EVER be depreciated in favor of strong or that browsers will ever start displaying them differently by default.
So that's it. That's my hot take on semantics, history and the real world. Are b/i and strong/em the same? No. Will they probably both exist and be treated as identical in almost every situation until the collapse of modern civilization? I think, yes.
Here's a summary of definitions together with suggested usage:
<b> ...a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.
<strong> ...now represents importance rather than strong emphasis.
<i> ...a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.
<em> ...indicates emphasis.
(These are all direct quotes from W3C sources, with my emphasis added. See: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements and http://www.w3.org/TR/html401/struct/text.html#h-9.2.1 for the originals)
<b> and <i> are both related to style, whereas <em> and <strong> are semantic. In HTML 4, the first are classified as font style elements, and the latter as phrase elements.
As you indicated correctly, <i> and <em> are often considered similar, because browsers often render both in italics. But according to the specifications, <em> indicates emphasis and <strong> indicates stronger emphasis, which is quite clear, but often misinterpreted. On the other hand, the distinction between when to use <i> or <b> is really a matter of style.
While <strong> and <em> are of course more semantically correct, there seem definite legitimate reasons to use the <b> and <i> tags for customer-written content.
In such content, words or phrases may be bolded or italicized and it is generally not up to us to analyze the semantic reasoning for such bolding or italicizing.
Further, such content may refer to bolded and italicized words and phrases to convey a specific meaning.
An example would be an english exam question which instructs a student to replace the bolded word.
<em> and <strong> consume more bandwidth than <i> and <b>.
They also require more typing (if not auto-generated).
They also clutter the editor screen with more text. I seem to recall that programmers like smaller source files if they are the same. (And let's be real, they are the same. Yes, there are "technical" (<i>cough</i>, ahem, excuse me) differences, but that's mostly phony to begin with.)
With any of the above tags, you can use style sheets to customize how they appear to however you want if you need them to appear different than their defaults renderings.
b or i means you want the text to be rendered as bold or italics. strong or em means you want the text to be rendered in a way that the user understands as "important". The default is to render strong as bold and em as italics, but some other cultures might use a different mapping.
Like strings in a program, b and i would be "hard coded" while strong and em would be "localized".
<i>, <b>, <em> and <strong> tags are traditionally representational. But they have been given new semantic meaning in HTML5.
<i> and <b> was used for font style in HTML4. <i> was used for italic and <b> for bold. In HTML5 <i> tag has new semantic meaning of 'alternate voice or mood' and <b> tag has the meaning of stylistically offset.
Example uses of <i> tag are - taxonomic designation, technical term, idiomatic phrase from another language, transliteration, a thought, ship names in western texts. Such as -
<p><i>I hope this works</i>, he thought.</p>
Example uses of <b> tag are keywords in a document extract, product names in a review, actionable words in an interactive text driven software, article lead.
The following example paragraph is stylistically offset from the paragraphs that follow it.
<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>
<em> and <strong> had the meaning of emphasis and strong emphasis in HTML4. But in HTML5 <em> means stressed emphasis and <strong> means strong importance.
In the following example there should be a linguistic change while reading the word before ...
<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>
In the same example we can use the <strong> tag as follows ..
<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>
to give importance on the event date.
MDN Ref:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
As others have said <b> and <i> are explicit (i.e. "make this text bold"), whereas <strong> and <em> are semantic (i.e. "this text should be emphasised").
In the context of a modern web-browser, it's difficult to see the difference (they both appear to produce the same result, right?), but think about screen readers for the visually impaired. If a screen-reader came across an <i> tag, it wouldn't know what to do. But if it comes across a <em> tag, it knows that whatever is within should be emphasised to the listener. And therein you get the practical difference.
As the others have stated, the difference is that <b> and <i> hardcode font styles, whereas <strong> and <em> dictate semantic meaning, with the font style (or speaking browser intonation, or what-have-you) to be determined at the time the text is rendered (or spoken).
You can think of this as a difference between a “physical” font style and a “logical” style, if you will. At some later time, you may wish to change the way <strong> and <em> text are displayed, say, by altering properties in a style sheet to add color and size changes, or even to use different font faces entirely. If you've used “logical” markup instead of hardcoded “physical” markup, then you can simply change the display properties in one place each in your style sheet, and then all of the pages that reference that style sheet get changed automatically, without ever having to edit them.
Pretty slick, huh?
This is also the rationale behind defining sub-styles (referenced using the style= property in text tags) for paragraphs, table cells, header text, captions, etc., and using <div> tags. You can define physical representation for your logical styles in the style sheet, and the changes are automatically reflected in the web pages that reference that style sheet. Want a different representation for source code? Redefine the font, size, weight, spacing, etc. for your "code" style.
If you use XHTML, you can even define your own semantic tags, and your style sheet would do the conversions to physical font styles and layouts for you.
I use both <strong> and <b>, actually, for exactly the reasons mentioned in this thread of responses. There are times when bold-facing some text simply looks better, but it isn't, necessarily, semantically more important than the rest of the sentence. Here's an example from a page I'm working on right now:
"Retrieves <strong>all</strong> books about <b>lacrosse</b>."
In that sentence, the word "all" is very important, and "lacrosse" less so--I merely wanted it bold because it represents a search term, so I wanted some visual separation. If you're viewing the page with a screen reader, I really don't think it needs to go out of the way to emphasize the word "lacrosse".
I would tend to imagine that most web developers use one of the other, but both are fine--<b> is most definitely not deprecated, as some people have claimed. For me, it's just a fine line between visual appeal and meaning.
Use them only if using CSS style classes is for any reason unconvinient or impossible (like blog systems, allow only some tags to use in posts and eventually embedded styles). Another reason is support for very old browsers (some mobile devices?) or primitive search engines (that give points for <b> or <strong> tags, instead of analysing CSS styles).
If you can define CSS styles, use them.
For text bold using <b> tag
For text important using <strong> tag
For text italic style using <i> tag
For emphasized text using <em> tag
<b> and <i>, having no actual semantic meaning (like #splattne pointed out) was true, a long time ago. In modern HTML5 (<!DOCTYPE html>) they do have meaning. Check out the following links.
Semantic meaning (from MDN)
<b>: Bring Attention To element
Keywords in a summary
product names.
<p>Here at company XYZ, we use <b>HTML</b> and <b>Javascript</b>.</p>
<i>: Idiomatic Text element
Alternative voice or mood
Taxonomic designations (such as the genus and species "Homo sapiens")
Idiomatic terms from another language (such as "et cetera")
Technical terms
<p>I <i>did</i> tell him, to arrive on time for the meeting.</p>
<b> vs. <strong>
It may help to realize that both are valid and semantic elements in HTML5 and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <strong>). Each element is meant to be used in certain types of scenarios, and if you want to bold text for decoration, you should instead actually use the CSS font-weight property. source
<i> vs. <em>
The <em> element represents stress emphasis of its contents, while the <i> element represents text that is set off from the normal prose. source
My 2 cents
I personaly prefer <b> and <i> over <strong> and <em>.
They are shorter, and their semantic meaning just makes sense, from a developer point of view too.
I have no idea if todays screen readers can work with them. If not, I think they will eventually. A18n is a difficult topic, I just follow the lead of documentation. MDN says I can use them, so I do.
Q: Difference between strong, b, bold, em, i?
Ans: These are inline properties.
Strong: It is used to show text bold or highlight it semantically.
Bold or b: This bold tag is just offset text conventionally styled in bold.
em: <em> tag semantically emphasizes the important word.
i : <i> tag just offset text conventionally styled in italic.
note: you should use <strong></strong> and <em></em> tags their meaningful names which tell about the type of content. Semantic tags are also helpful for SEO.
<b> and <i> should be avoided because they describe the style of the text. Instead, use <strong> and <em> because that describes the semantics (the meaning) of the text.
As with all things in HTML, you should be thinking not about how you want it to look, but what you actually mean. Sure, it might just be bold and italics to you, but not to a screen reader.
"They have the same effect. However, XHTML, a cleaner, newer version of HTML, recommends the use of the <strong> tag. Strong is better because it is easier to read - its meaning is clearer. Additionally, <strong> conveys a meaning - showing the text strongly - while <b> (for bold) conveys a method - bolding the text. With strong, your code still makes sense if you use CSS stylesheets to change what the methods of making the text strong is.
The same goes for the difference between <i> and <em> ".
Google dixit:
http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong
HTML Formatting Elements:
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
HTML Bold and Strong Formatting:
The HTML <b> element defines bold text, without any extra importance.
<b>This text is bold</b>
The HTML <strong> element defines strong text, with added semantic
"strong" importance.
<strong>This text is strong</strong>
HTML Italic and Emphasized Formatting:
The HTML <i> element defines italic text, without any extra
importance.
<i>This text is italic</i>
The HTML <em> element defines emphasized text, with added semantic
importance.
<em>This text is emphasized</em>
You should generally try to avoid <b> and <i>. They were introduced for layouting the page (changing the way how it looks) in early HMTL versions prior to the creation of CSS, like the meanwhile removed font tag, and were mainly kept for backward compatibility and because some forums allow inline HTML and that's an easy way to change the look of text (like BBCode using [i], you can use <i> and so on).
Since the creation of CSS, layouting is actually nothing that should be done in HTML anymore, that's why CSS has been created in the first place (HTML == Structure, CSS == Layout). These tags may as well vanish in the future, after all you can just use CSS and span tags to make text bold/italic if you need a "meaningless" font variation. HTML 5 still allows them but declares that marking text that way has no meaning.
<em> and <strong> on the other hand only says that something is "emphasized" or "strongly emphasized", it leaves it completely open to the browser how to render it. Most browsers will render em as italic and strong as bold as the standard suggests by default, but they are not forced to do that (they may use different colors, font sizes, fonts, whatever). You can use CSS to change the behavior the way you desire. You can make em bold if you like and strong bold and red, for example.
<strong> and <em> are abstract (which is what people mean when they say it's semantic).
<b> and <i> are specific ways of making something "strong" or "emphasized"
Analogy:
Both <strong> is to <b> and <em> is to <i>
as
"vehicle" is to "jeep"
In HTML Lang, these two tags are used as follows:
simple text this is test text normal text
simple text this is important textwith normal text
The major diversity between these two HTML tags is that bold makes text only visually look bold, while strong also symbolism hit the respective text as essential and indicates that it is a clear word or text section.
This difference is due to the fact that HTML code differentiates between symbolism and physical visual html tags. While the earlier refer to the meaning of the relevant areas, the latter merely define the optical display in browsers.
We use the <strong> tag for text which has high priority for SEO purposes like product name, company name etc, while <b> simple makes it bold.
Similarly, we use <em> for text which has high priority for SEO, while <i> to make the text simply italic.
Note: I know <b> is presentational and <span style="font-weight:bold> is a better way, and <strong> and <em> are for emphasis but my question is not regarding this.
Should we convert every <b> to <strong> blindly? Many people do this, they think <b> is not good as per web standards so they convert every <b> to <strong> upon site redesign, content re-population, new site design and people suggest this to others also.
Dreamweaver has also given the option to convert all <b> and <i> to <strong> and <em> on code paste in design view and when we use B and I Which people use blindly.
alt text http://shup.com/Shup/280420/1101118332-My-Desktop.png
And Dreamweaver (if above option is checked) and many online WYSIWYG editor give output in <strong> and <em> while button shows B and I.
alt text http://shup.com/Shup/280425/1101118921-My-Desktop.png
In my opinion it's creating a misconception about <strong> and <b>
When we get content from a client we don't know where the client wants to give emphasize and where he just wants to use bold text for presentation purposes. What should we do in this circumstance? No one has the time to give to decide for each instance (us and the client), whether it should be <b> or <strong>, <i> or <em>
What are the pros and cons to convert every <b> and <i> into <strong> and <em> blindly if we are saying our site is accessible?
Update: remember <b> and <i> are not deprecated they are in HTML 5 specification
As others have mentioned, using <strong>, <em>, <cite> etc. adds semantics. This is important because you say something about why you want to emphasize something and increase the readability of your html, because you know why it's in bold.
Furthermore, screen readers use the strong tags to make an audible difference when reading it aloud.
Maybe you could think about the audio represenation as a guide. If you would want a difference when read aloud, for instance, mark it as <strong>. If not, use <b>.
Then there is the issue of rendering: I don't actually know if all browsers will render a <strong> as bold and if it will stay that way.
So in short: <strong>No</strong>.
Is it ok to use <strong> in place of <b> blindly?
No.
To quote Anne van Kesteren (source):
Let me give some contradictory advice. Please do replace em with i and strong with b. The resulting markup is likely more accurate. Especially with WYSIWYG software it is extremely unlikely they will be used correctly, but also because the notion spread that they are interchangeable with the sole difference being that strong and em are semantic a lot of misuse happened. When in doubt, use i and b.
And he’s right, of course. strong and b are not the same. em and i are not the same. Only use strong / em if you want to add semantical emphasis to text.
<b>, <i>, <tt> are strictly typographical.
By saying typographical, I don't mean visual. I mean semantics expressed by the look.
They need additional context to have specific meaning (eg. definition, like:
text in italics were taken from ...
or relying on typographic convention, like that the text in bold are eye-catchers and the italics mean context change). In typographical conventions bolds and italics are some kind of parenthesis nesting.
(for example [this one has another context])
for example this one has another context
These tags are the port of traditional, printed typography, in which semantics is carried by the specific visual presentation.
As you pointed out, they are considered to be deprecated, but not in XHTML5. Why? I think, mostly that the web content is not only for the e-media. If you print web document, these tags may replace the syntax of some expressions used for example in TeX.
<strong> and <em> are strictly for semantics,
telling how the text should be read and emphasized.
So to recap, none of these tag means the same as other, so they not even should not be used, but may not be used interchangeably, nor substituted. In particular, blindly.
AFIR, Dreamweaver is not the model of the WYSIWYM editor. I have always considered it to be next generation of FrontPage thinking (ease of use and getting things done now, and forget about the future and scalability).
So I understand the surprise here, and your misconception feeling is right :)
We shouldn't swap b and strong blindly as they have different intended purpose.
<b> and <i> are not presentational elements as per the HTML5 spec. They have a different meaning and purpose. Quoting the HTML5 specs,
The b 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.
and for the i element,
The i element represents 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.
As others have very well clarified, i and em cannot be used interchangeably and so is the case with b and strong.
The usage of i and b for their intended purpose is very rare. (eg. in dialogue scripts, thesis, resumes)
References:
http://html5doctor.com/i-b-em-strong-element/
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-i-element
If you just want to use bold text, make it bold via css. If the "bold" font weight has no semantical meaning, you should not use <strong> or <em> for it. However, you shouldn't use <b> or <i> either because these are non-semantic (in fact they are font-style tags) and their use is thus discouraged if not even deprecated.
<b> and <strong> are not necessarily the same. <strong> as you suggested are for higher emphasis, while <b> are for styling purposes only. So you should not switch them blindly.
Some people will say that the <b> tag is being deprecated, but it's not. It's still alive and kicking. However; it is not very semantic, as you're saying, so it might be a better option to use a <span> and style it.
As others have said there's a semantic difference between strong/b and i/em. Especially they are used by screenreaders for visually impaired people visiting your website. For them it makes a huge difference if you just make some text bold-face, or if you want to add some kind of EMphasis to what you're saying on your website. So be sure to carefully consider making something bold using B or STRONG. The same goes for EM and I.
There are some great answers here already, but for those of you that still don't quite understand and need a further explanation and example, I found a useful explanation of this in the HTML Text, Web Platform Docs tutorial. The tutorial explains the difference in use between <strong> and <b> a little past halfway down the page and gives examples.
To understand the difference between the <b> - <strong> and <i> - <em> tags, you need to understand that the tag is used to simply highlight text, while <strong> defines the meaning of the highlighted text. Likewise with the <i> and <em> tags: an example of the difference is the OS settings used by the visually impaired. When the reading of texts with the "speech" is enabled, the words will be highlighted by the intonation of the <strong> and <em> tags.
What's the difference between <b> and <strong>, <i> and <em> in HTML/XHTML? When should you use each?
They have the same effect on normal web browser rendering engines, but there is a fundamental difference between them.
As the author writes in a discussion list post:
Think of three different situations:
web browsers
blind people
mobile phones
"Bold" is a style - when you say "bold a word", people basically know that
it means to add more, let's say "ink", around the letters until they stand out
more amongst the rest of the letters.
That, unfortunately, means nothing to a blind person. On mobile phones
and other PDAs, text is already bold because screen resolution is very small. You can't bold a bold without screwing something up.
<b> is a style - we know what "bold" is supposed to look like.
<strong> however is an indication of how something should be understood. "Strong" could (and often does) mean "bold" in a browser, but it could also mean a lower tone for a speaking program like Jaws (for blind people) or be represented by an underline (since you can't bold a bold) on a Palm Pilot.
HTML was never meant to be about styles. Do some searches for "Tim Berners-Lee" and "the semantic web." <strong> is semantic—it describes the text it surrounds (e.g., "this text should be stronger than the rest of the text you've displayed") as opposed to describing how the text it surrounds should be displayed (e.g., "this text should be bold").
<b> and <i> are explicit - they specify bold and italic respectively.
<strong> and <em> are semantic - they specify that the enclosed text should be "strong" or "emphasised" in some way, usually bold and italic, but allow for the actual styling to be controlled via CSS. Hence these are preferred in modern web pages.
<strong> and <em> add extra semantic meaning to your document. It just so happens that they also give a bold and italic style to your text.
You could of course override their styling with CSS.
<b> and <i> on the other hand only apply font styling and should no longer be used. (Because you're supposed to format with CSS, and if the text was actually important then you would probably make it "strong" or "emphasised" anyway!)
Hope that makes sense.
I'm going to hazard a historical and practical hot take here:
Yes, according to specifications, <strong> had a semantic meaning in HTML4 and <b> had a strictly presentational meaning.
Yes, when HTML5 came along, new semantic meaning that was slightly different was introduced for b and i.
Yes, the W3C recommends — basically — TL,DR; don't use b and i.
You should always bear in mind that the content of a b element may not always be bold, and that of an i element may not always be italic. The actual style is dependent on the CSS style definitions. You should also bear in mind that bold and italic may not be the preferred style for content in certain languages. You should not use b and i tags if there is a more descriptive and relevant tag available.
BUT:
The real world internet has massive loads of existing HTML that is never going to get updated. The real world internet has to account for content generated and copy and pasted between a vast network of software and CMS systems that all have different developer teams and were built in different eras.
So if you're writing HTML or building a system that writes HTML for other people — sure — definitely use <strong> instead of <b> to mean "strongly emphasized" because it's more semantically correct.
But really, the on-the-ground reality is that the semantic and stylistic meaning of <strong> and <b> have merged over time out of necessity.
If I'm building a CMS that allows any pasting of styled text, I need to plan both for people who are pasting in <b> and mean "strongly emphasized" and for people who are pasting in <strong> and mean "make this text bold". It might not be "right", but it's how the real world works at this moment in time.
And so, if I'm writing a stylesheet for that site, I'm probably going to end up writing some styles that look like this:
b,
strong {
font-weight: 700;
/* ... more styles here */
}
i,
em {
font-style: italic;
/* ... more styles here */
}
Or, I'm going to rely on the browser defaults, which do the same thing as the code above in every modern browser I know of.
Or, I might be one of probably millions of sites that use normalize.css, which takes care to ensure that b and strong are treated the same.
There's such a massive ocean of HTML out there in the world already that works off of this expectation, I just can't imagine that b will EVER be depreciated in favor of strong or that browsers will ever start displaying them differently by default.
So that's it. That's my hot take on semantics, history and the real world. Are b/i and strong/em the same? No. Will they probably both exist and be treated as identical in almost every situation until the collapse of modern civilization? I think, yes.
Here's a summary of definitions together with suggested usage:
<b> ...a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.
<strong> ...now represents importance rather than strong emphasis.
<i> ...a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.
<em> ...indicates emphasis.
(These are all direct quotes from W3C sources, with my emphasis added. See: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements and http://www.w3.org/TR/html401/struct/text.html#h-9.2.1 for the originals)
<b> and <i> are both related to style, whereas <em> and <strong> are semantic. In HTML 4, the first are classified as font style elements, and the latter as phrase elements.
As you indicated correctly, <i> and <em> are often considered similar, because browsers often render both in italics. But according to the specifications, <em> indicates emphasis and <strong> indicates stronger emphasis, which is quite clear, but often misinterpreted. On the other hand, the distinction between when to use <i> or <b> is really a matter of style.
While <strong> and <em> are of course more semantically correct, there seem definite legitimate reasons to use the <b> and <i> tags for customer-written content.
In such content, words or phrases may be bolded or italicized and it is generally not up to us to analyze the semantic reasoning for such bolding or italicizing.
Further, such content may refer to bolded and italicized words and phrases to convey a specific meaning.
An example would be an english exam question which instructs a student to replace the bolded word.
<em> and <strong> consume more bandwidth than <i> and <b>.
They also require more typing (if not auto-generated).
They also clutter the editor screen with more text. I seem to recall that programmers like smaller source files if they are the same. (And let's be real, they are the same. Yes, there are "technical" (<i>cough</i>, ahem, excuse me) differences, but that's mostly phony to begin with.)
With any of the above tags, you can use style sheets to customize how they appear to however you want if you need them to appear different than their defaults renderings.
b or i means you want the text to be rendered as bold or italics. strong or em means you want the text to be rendered in a way that the user understands as "important". The default is to render strong as bold and em as italics, but some other cultures might use a different mapping.
Like strings in a program, b and i would be "hard coded" while strong and em would be "localized".
<i>, <b>, <em> and <strong> tags are traditionally representational. But they have been given new semantic meaning in HTML5.
<i> and <b> was used for font style in HTML4. <i> was used for italic and <b> for bold. In HTML5 <i> tag has new semantic meaning of 'alternate voice or mood' and <b> tag has the meaning of stylistically offset.
Example uses of <i> tag are - taxonomic designation, technical term, idiomatic phrase from another language, transliteration, a thought, ship names in western texts. Such as -
<p><i>I hope this works</i>, he thought.</p>
Example uses of <b> tag are keywords in a document extract, product names in a review, actionable words in an interactive text driven software, article lead.
The following example paragraph is stylistically offset from the paragraphs that follow it.
<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>
<em> and <strong> had the meaning of emphasis and strong emphasis in HTML4. But in HTML5 <em> means stressed emphasis and <strong> means strong importance.
In the following example there should be a linguistic change while reading the word before ...
<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>
In the same example we can use the <strong> tag as follows ..
<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>
to give importance on the event date.
MDN Ref:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
As others have said <b> and <i> are explicit (i.e. "make this text bold"), whereas <strong> and <em> are semantic (i.e. "this text should be emphasised").
In the context of a modern web-browser, it's difficult to see the difference (they both appear to produce the same result, right?), but think about screen readers for the visually impaired. If a screen-reader came across an <i> tag, it wouldn't know what to do. But if it comes across a <em> tag, it knows that whatever is within should be emphasised to the listener. And therein you get the practical difference.
As the others have stated, the difference is that <b> and <i> hardcode font styles, whereas <strong> and <em> dictate semantic meaning, with the font style (or speaking browser intonation, or what-have-you) to be determined at the time the text is rendered (or spoken).
You can think of this as a difference between a “physical” font style and a “logical” style, if you will. At some later time, you may wish to change the way <strong> and <em> text are displayed, say, by altering properties in a style sheet to add color and size changes, or even to use different font faces entirely. If you've used “logical” markup instead of hardcoded “physical” markup, then you can simply change the display properties in one place each in your style sheet, and then all of the pages that reference that style sheet get changed automatically, without ever having to edit them.
Pretty slick, huh?
This is also the rationale behind defining sub-styles (referenced using the style= property in text tags) for paragraphs, table cells, header text, captions, etc., and using <div> tags. You can define physical representation for your logical styles in the style sheet, and the changes are automatically reflected in the web pages that reference that style sheet. Want a different representation for source code? Redefine the font, size, weight, spacing, etc. for your "code" style.
If you use XHTML, you can even define your own semantic tags, and your style sheet would do the conversions to physical font styles and layouts for you.
I use both <strong> and <b>, actually, for exactly the reasons mentioned in this thread of responses. There are times when bold-facing some text simply looks better, but it isn't, necessarily, semantically more important than the rest of the sentence. Here's an example from a page I'm working on right now:
"Retrieves <strong>all</strong> books about <b>lacrosse</b>."
In that sentence, the word "all" is very important, and "lacrosse" less so--I merely wanted it bold because it represents a search term, so I wanted some visual separation. If you're viewing the page with a screen reader, I really don't think it needs to go out of the way to emphasize the word "lacrosse".
I would tend to imagine that most web developers use one of the other, but both are fine--<b> is most definitely not deprecated, as some people have claimed. For me, it's just a fine line between visual appeal and meaning.
Use them only if using CSS style classes is for any reason unconvinient or impossible (like blog systems, allow only some tags to use in posts and eventually embedded styles). Another reason is support for very old browsers (some mobile devices?) or primitive search engines (that give points for <b> or <strong> tags, instead of analysing CSS styles).
If you can define CSS styles, use them.
For text bold using <b> tag
For text important using <strong> tag
For text italic style using <i> tag
For emphasized text using <em> tag
<b> and <i>, having no actual semantic meaning (like #splattne pointed out) was true, a long time ago. In modern HTML5 (<!DOCTYPE html>) they do have meaning. Check out the following links.
Semantic meaning (from MDN)
<b>: Bring Attention To element
Keywords in a summary
product names.
<p>Here at company XYZ, we use <b>HTML</b> and <b>Javascript</b>.</p>
<i>: Idiomatic Text element
Alternative voice or mood
Taxonomic designations (such as the genus and species "Homo sapiens")
Idiomatic terms from another language (such as "et cetera")
Technical terms
<p>I <i>did</i> tell him, to arrive on time for the meeting.</p>
<b> vs. <strong>
It may help to realize that both are valid and semantic elements in HTML5 and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <strong>). Each element is meant to be used in certain types of scenarios, and if you want to bold text for decoration, you should instead actually use the CSS font-weight property. source
<i> vs. <em>
The <em> element represents stress emphasis of its contents, while the <i> element represents text that is set off from the normal prose. source
My 2 cents
I personaly prefer <b> and <i> over <strong> and <em>.
They are shorter, and their semantic meaning just makes sense, from a developer point of view too.
I have no idea if todays screen readers can work with them. If not, I think they will eventually. A18n is a difficult topic, I just follow the lead of documentation. MDN says I can use them, so I do.
Q: Difference between strong, b, bold, em, i?
Ans: These are inline properties.
Strong: It is used to show text bold or highlight it semantically.
Bold or b: This bold tag is just offset text conventionally styled in bold.
em: <em> tag semantically emphasizes the important word.
i : <i> tag just offset text conventionally styled in italic.
note: you should use <strong></strong> and <em></em> tags their meaningful names which tell about the type of content. Semantic tags are also helpful for SEO.
<b> and <i> should be avoided because they describe the style of the text. Instead, use <strong> and <em> because that describes the semantics (the meaning) of the text.
As with all things in HTML, you should be thinking not about how you want it to look, but what you actually mean. Sure, it might just be bold and italics to you, but not to a screen reader.
"They have the same effect. However, XHTML, a cleaner, newer version of HTML, recommends the use of the <strong> tag. Strong is better because it is easier to read - its meaning is clearer. Additionally, <strong> conveys a meaning - showing the text strongly - while <b> (for bold) conveys a method - bolding the text. With strong, your code still makes sense if you use CSS stylesheets to change what the methods of making the text strong is.
The same goes for the difference between <i> and <em> ".
Google dixit:
http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong
HTML Formatting Elements:
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
HTML Bold and Strong Formatting:
The HTML <b> element defines bold text, without any extra importance.
<b>This text is bold</b>
The HTML <strong> element defines strong text, with added semantic
"strong" importance.
<strong>This text is strong</strong>
HTML Italic and Emphasized Formatting:
The HTML <i> element defines italic text, without any extra
importance.
<i>This text is italic</i>
The HTML <em> element defines emphasized text, with added semantic
importance.
<em>This text is emphasized</em>
You should generally try to avoid <b> and <i>. They were introduced for layouting the page (changing the way how it looks) in early HMTL versions prior to the creation of CSS, like the meanwhile removed font tag, and were mainly kept for backward compatibility and because some forums allow inline HTML and that's an easy way to change the look of text (like BBCode using [i], you can use <i> and so on).
Since the creation of CSS, layouting is actually nothing that should be done in HTML anymore, that's why CSS has been created in the first place (HTML == Structure, CSS == Layout). These tags may as well vanish in the future, after all you can just use CSS and span tags to make text bold/italic if you need a "meaningless" font variation. HTML 5 still allows them but declares that marking text that way has no meaning.
<em> and <strong> on the other hand only says that something is "emphasized" or "strongly emphasized", it leaves it completely open to the browser how to render it. Most browsers will render em as italic and strong as bold as the standard suggests by default, but they are not forced to do that (they may use different colors, font sizes, fonts, whatever). You can use CSS to change the behavior the way you desire. You can make em bold if you like and strong bold and red, for example.
<strong> and <em> are abstract (which is what people mean when they say it's semantic).
<b> and <i> are specific ways of making something "strong" or "emphasized"
Analogy:
Both <strong> is to <b> and <em> is to <i>
as
"vehicle" is to "jeep"
In HTML Lang, these two tags are used as follows:
simple text this is test text normal text
simple text this is important textwith normal text
The major diversity between these two HTML tags is that bold makes text only visually look bold, while strong also symbolism hit the respective text as essential and indicates that it is a clear word or text section.
This difference is due to the fact that HTML code differentiates between symbolism and physical visual html tags. While the earlier refer to the meaning of the relevant areas, the latter merely define the optical display in browsers.
We use the <strong> tag for text which has high priority for SEO purposes like product name, company name etc, while <b> simple makes it bold.
Similarly, we use <em> for text which has high priority for SEO, while <i> to make the text simply italic.
Well I know it's not evil just not as pretty in semantics as <strong> and <em> right?
However, with <b> becoming more semantic as <strong> and <i> as <em>, why isn't there a semantic twin for <u>?
In styling:
So there's a CSS style text-decoration:underline for <u>, but isn't there one font-weight:bold for <strong> already? Thus goes <em> too.
In semantics:
<strong> is semantic for what? Strongly emphasized text?
<em> is semantic for what? Emphasized text?
Anything fundamentally different from each other and mutually exclusive? No.
Why can't there be another way to emphasize text? You know, like the way <u> does and makes up a semantic twin for it too - I guess it's just <strong> and <em> are already well implemented in all major browsers before the <b> and <i> become obselete.
I know, now that it's officially become standards, you just have to go with it. Or please have your say: is there a compelling reason to make <u> out of view?
If a semantic twin was created for every previously existing styling tag, all we'd be doing is the same old thing, albeit with new names.
<strong> and <em> are used to give meaning to the marked up text. Their default styling corresponds to <b> and <i> because that's how most people display strength and emphasis in print -- But that can be changed. Whereas using CSS to change a <b> may seem counter intuitive.
So the direct answer to your question is: <strong> and <em> impart meaning to the text, whereas <u> and the others impart styling to the text, which is now done by CSS. The styling applied by the others is incidental.
It gets mistaken for a hyperlink.
font-weight:bold is not equivalent to strong. The strong tag has that attribute by default, but you're free to make it underline or turn red or anything else you like. That's the point: It does not specify styling.
<strong> is semantic for what? Strongly emphasized text? <em> is semantic for what?
‘Emphasis’ and ‘strong emphasis’ are not well-defined, so the semantic content is quite low.
You can come up with your own interpretation: for example, I personally use:
<em> is for parts of a sentence that would be stressed when spoken out loud
<strong> is for stretches of text that need to be visually picked out: for example particularly important sentences, and visual scanning keywords.
This is consistent and to some extent matches typical use, but it is not mandated by HTML.
and <i> as <em>
<em> is not a 1:1 fit with italics even disregarding the styling issue. There are other reasons for using italics, including:
<cite>ing other works, according to HTML 4.01 Specification
picking out phrases from other languages to the main text, which is <span lang="fr">'s raison d'être
why isn't there a semantic twin for <u>
Because everyone hates <u>.
Even in HTML2 days it was rarely used, because it's so ugly.
Underlining is a leftover from the age of the typewriter. At that time there was no option for neither italic nor bold, so the only way to emphasize words was to use underline. The nice thing about underline (from a typewriter designer point of view) is that you can modify existing characters, so you don't need to have an entire set of extra characters.
It is not beautiful and there is no longer any need for it, so please use italic or bold instead.
The problem is only more pronounced as underlining is the standard decoration for links in HTML.
In styling:
So there's a CSS style
text-decoration:underline for <u>, but
isn't there one font-weight:bold for
<strong> already? Thus goes <em> too.
No. There isn't a CSS style for <strong> or <em>. There are CSS tags for bold, but that is not the same thing. strong and em do not mean bold. They mean emphasize. Emphasize can be done with underlining, with italic or with bold in a textual media, and it's up to the stylesheet to decide which. But the semantic meaning is simply "this text is emphasized". And how would you implement "underline" in a screen reader? It doesn't make sense. underline is specific to textual media, and thus belongs in the specific stylesheet for textual presentation, and not in the semantic HTML which could be used to present data through speech or any other media.
In semantics:
<strong> is semantic for what?
Strongly emphasized text? <em> is
semantic for what? Emphasized text?
Anything fundamentally different from
each other and mutually exclusive? No.
Why can't there be another way to
emphasize text? You know, like the way
<u> does
Because strong and em do not specify how the text should be emphasized, just that it should be emphasized. underline specifies how it should be emphasized, thus it has to do with presentation, rather than semantics, and belongs in a CSS file.
I agree that the difference between strong and em is vague, but then again, we also have h1-h7. The point is that even without a stylesheet, a reader should be able to infer that "this is bigger headline than that", and so also "this text is more emphasized than that".
The semantic meaning of tags do not have to be fundamentally different from each others. It's perfectly meaningful to have semantic tags that simply mean "more so than this other semantic tag". Because sometimes we have a need for several layers of headlines in our text, so we have h1-h7. And sometimes we have a need for text that is emphasized, and text that is very emphasized. But even if we didn't, it still wouldn't be an excuse for adding <u> as "another semantic twin", because it isn't. It's not a semantic twin, it is nothing in semantics. underline does not necessarily mean emphasis. It could mean headline as well, or it could mean "this is a link", or it could mean anything else you want it to mean. It is a presentation detail. And it is meaningless in a non-text media. "emphasis" is not a presentation detail. It carries a semantic meaning which makes sense no matter the media. You can emphasize information in movies too, or in video games, or in text read aloud.
You seem to be under the impression that strong and em are just shorthand (or longhand) for bold or italic. That's not true. They may be used to present bold text, underlined text, or italic text, or larger text. Or they can be ignored completely. Or they may simply alter the pronunciation in a screen reader. If you've ever written documents in LaTeX, you'll note that the \emph command there is typically rendered as italic, not bold. Of course it's not required to, but that's a perfectly legal interpretation of the semantic "emphasis" command. Similarly, there are many other tags which may just end up rendered as italic (quotes, or span tags with certain CSS classes or even headlines.
<u>, on the other hand, has a very specific meaning in presentation, but carries no semantic value. What information does it convey to the reader? <strong> carries the meaning "this text is highlighed and should be paid attention to", because it is strongly emphasized. What does it mean for text to be underlined? It could mean nothing, or it could mean a dozen different things.
"italic", "bold" or "underline" are presentational attributes with no semantic meaning. They can be applied to any semantic HTML tag you like. And semantic tags like strong or em can use any presentational CSS rules you like. There is no 1:1 mapping as you seem to believe. They are different concepts. The fact that the browser by default chooses to render strong text as bold is completely irrelevant. That's just a default behavior, because they had to choose something, and it can be overridden in CSS.
It's not a question of "can this be done in CSS", or "Is this a semantic twin of that", but simply "does it have a semantic meaning? Does it have a presentational meaning"? If yes to both, it should be changed and/or removed entirely. If yes to the former, it belongs in HTML, and if yes to the latter it belongs in CSS.
The semantic twin of <u> is <a>. ^_^ This is a bit facetious, but it's true. On the web, underlined text denotes a link by default; this pattern is so old and well-established that nearly every single (sighted) person on the web has automatically interned it as part of how they interact with a page.
HTML5 defines slightly different meanings for <em> and <strong>, specifically so you don't just have two tags that both do the same thing semantically. That just invites questions like yours, where you wonder why there isn't just a third way to emphasize something with an underlined presentation (or what-have-you) by default.
In HTML5, <em> still denotes emphasis. Using an <em> changes the meaning of a sentence by putting a focus on particular words or phrases. <strong>, on the other hand, denotes importance. Marking a word or phrase as important does not change the meaning of the sentence, it merely directs your attention.
As usual, the standard caveats about <em> being rendered with italics by default and <strong> being rendered with bold text by default, but it being perfectly possible and appropriate to change the presentation of either, applies. For example, a screen reader may use different inflections for the two tags. This is the whole reason that semantics exist - so that we can allow the presenter to decide the best way to present the data; us mortal authors can't possibly get the presentation correct in every possible medium.
To a typographer, underlining and bold are two ways to make something strong. Most people believe underline is uglier than bold text, and it is therefore normally reserved for when bold isn't available - e.g. on a typewriter, or when hand-writing something, or marking something up with a pencil.
If you really want underlining, it's perfectly valid to do:
<style>
strong {
font-weight: normal;
text-decoration: underline;
}
</style>
The web just doesn't lend itself to underlined text. I agree with Greg that it could easily be confused with a link.
it is not semantic. we live in a world of increasing importance of semantics in our code, because we are sick of trying to decipher some other coders "it makes sense to me" mess.
Underlining is ugly, be it in books or on the web. So it should only be used for emphasis in handwritten text, where there is no alternative.