Related
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.
I've been learning about semantic HTML, and I keep reading how tags like <i> and <b> should be avoided. But if I don't want to emphasize something, but just bold it visually, why would <b> be any worse than <span class="bold">? What are some advantages to using the more verbose <span class="bold"> syntax?
The issue with b and i elements is that they are not semantic, that is, they are about how things should look, not what they mean.
<span class="bold"> is actually no better, as it is also all about how something should look and is embedded in the page (a class name "bold" is not semantic either). It is better to use meaningful class names.
There are semantic tags, such as strong that are better.
As for class names - using a descriptive name is preferred - so <span class="sub-header"> is better than <span class="bold">, as it has meaning.
It's about the nature of markup. Take away presentation, and what you're left with should still convey your message.
The <b> and <i> tags are deprecated, which is why you shouldn't use them, but if you want to add emphasis to otherwise normal text you should use <strong> and <em> over a CSS solution. Having this in your HTML means that users who are disabled and using alternative browsing technologies like screen readers will still know that you intended emphasis. Adding CSS rules for bold and italic looks pretty but is not accessible.
Also bear in mind that you can then use CSS to apply style to your <strong> and <em> tags.
Why?
From http://www.w3.org/International/questions/qa-b-and-i-tags :
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.
<b> means "put some text in bold" -- which is a presentation-related information, and should be in a CSS, instead of the HTML code.
<span class="bold"> just has no meaning at all by itself ; I think this solution should be avoided : with this, your HTML itself doesn't mean anything, and need the CSS so your text is seen as important...
This will work for graphical browsers... but what about other ways of consulting your page ?
Like speach-synthesis or braille-tablets ?
Finally, <strong>, on the other hand, means "this text is important" -- which is probably what you meant in the first place ;-)
span class bold is bad, I've seen too many CSS Rules in the style of
.blue-40 {
// 2011-06-08 Change for Bug 12343
color: #800000;
width: 45%;
}
Semantic HTML is something like
.article-head {
}
.article-body {
}
I personally see no issue with <b> and <i>, although people made arguments to use <strong> and <em> instead because they are more meaningful. At that point, pragmatism kicks in: The only reason I ever would create a class solely for bold text is if I don't control the HTML that gets written to a container that I control.
One argument is always accessibility: If you are reading a document with a screen reader or text-to-speech engine, the concept of bold doesn't exist, but the concept of strong/emphasis does. In practice however, b/string and i/em and synonyms and unlikely to ever change, as much as the purists would like it to.
I personally think the Mozilla Developer Network has a great write up on the <b> tag (as well as the <strong> & <em> tags) and how to use it/them.
The important thing to remember is that the markup up is just as much about styling information as it is language. Keep in mind differences such as styling versus semantic differences (i.e. using bold instead of emphasis [<em>]).
I am working on some legacy PHP code that holds a ton of in-line styling, one of our objectives is to leverage CSS so the code will be cleaner. One thing that got me thinking is the use of native html elements VS the use of CSS, such as bold and italics.
For example,
<b>this is foo</b>
Or in css
.bold { font-weight: bold;}
<span class="bold">this is foo</span>
While these two do the same thing, which one do you guys prefer and why?
Always use HTML tags when they can add meaning, structure, or semantics to your content. If you want to write the sentence I <strong>love</strong> cheese (where the word "love" should carry particular emphasis), the <strong> tag is the correct choice. CSS is absolutely not an acceptable solution.
Always use CSS when you are changing the visual appearance of your page. The title heading on your page is a <h1>...</h1> (end of story), but you can make it bold or not, big or not, purple or not using CSS.
A good acid test is to imagine how a screen reader will interpret your page. If you view the page without any stylesheets attached, it should ideally show your content in a linear, minimal fashion, that is in fact quite ugly, but that conveys all the content you wanted to include on the page.
I think you're looking at a false dichotomy, <b> or .bold. Given the choice between these two, I'd probably choose stylised spans over use of the <b> tag, but that's purely to divorce presentation from mark-up.
There is, though, the strong tag, which is more semantic than the use of span.bold, and less purely-presentational than b, although it does, obviously, imply a presentational choice. This is my preferred choice over-all.
Instead of using bold (or span class=bold for that matter), you probably should consider the semantics of what you want. Is the text important? Use strong or em (emphasis). This helps on things like search engine visibility as well.
You should choose the tag based on semantics - afterall, CSS can be used to style them to look like anything.
W3C recommends keeping your HTML as semantic as possible. So you should use <strong>, <em> and other HTML tags instead of various <span>s with classes on them.
As a matter of fact you could have all your HTML code with just <div>s, but that doesn't mean you should do it.
As for <b>, <i> and other tags with no meaning, you should discontinue them.
IMHO, CSS is the way to go.
Reasons :
1 - You should not mix your styling code with your content.
2 - Easier to customize/change your final representation in required, or can represent them differently using different css.
3 - Separation of responsibilities in terms of who maintains what
I prefer using the span because it is infinitely stylable. The bold tag is always bold unless you override it, and then it's useless anyway.
Semantically, you should use html to describe the emphasis used here. The <b> is obsoleted and <strong> should be implemented to describe the text. In addition, the css should reflect the styling for the selector:
strong { font-size: whatever; }
<strong>this is foo</strong>
There are stuff like bold letters that I prefer to still leverage to html, SEO mainly. But if you combine more than one stile i.e. Bold and Italic it would be good to have an style called accent maybe. But trying to keep style out of html would make you happy (Less stuff to maintain) and your users happy (less code to transfer, they would access slim pages).
What is the correct way to make text italic? I have seen the following four approaches:
<i>Italic Text</i>
<em>Italic Text</em>
<span class="italic">Italic Text</span>
<span class="footnote">Italic Text</span>
<i>
This is the "old way". <i> has no semantic meaning and only conveys the presentational effect of making the text italic. As far as I can see, this is clearly wrong because this is non-semantic.
<em>
This uses semantic mark up for purely presentational purposes. It just happens that <em> by default renders text in italic and so it is often used by those who are aware that <i> should be avoided but who are unaware of its semantic meaning. Not all italic text is italic because it is emphasised. Sometimes, it can be the exact opposite, like a side note or a whisper.
<span class="italic">
This uses a CSS class to place presentation. This is often touted as the correct way but again, this seems wrong to me. This doesn't appear to convey any more semantic meaning that <i>. But, its proponents cry, it is much easier to change all your italic text later if you, say, wanted it bold. Yet this is not the case because I would then be left with a class called "italic" that rendered text bold. Furthermore, it is not clear why I would ever want to change all italic text on my website or at least we can think of cases in which this would not be desirable or necessary.
<span class="footnote">
This uses a CSS class for semantics. So far this appears to be the best way but it actually has two problems.
Not all text has sufficient meaning to warrant semantic markup. For example, is italicised text at the bottom of the page really a footnote? Or is it an aside? Or something else entirely. Perhaps it has no special meaning and only needs to be rendered in italics to separate it presentationally from the text preceding it.
Semantic meaning can change when it is not present in sufficient strength. Lets say I went along with "footnote" based upon nothing more than the text being at the bottom of the page. What happens when a few months later I want to add more text at the bottom? It is no longer a footnote. How can we choose a semantic class that is less generic than <em> but avoids these problems?
Summary
It appears that the requirement of semantics seems to be overly burdensome in many instances where the desire to make something italic is not meant to carry semantic meaning.
Furthermore, the desire to separate style from structure has led CSS to be touted as a replacement to <i> when there are occasions when this would actually be less useful. So this leaves me back with the humble <i> tag and wondering whether this train of thought is the reason why it is left in the HTML5 spec?
Are there any good blog posts or articles on this subject as well? Perhaps by those involved in the decision to retain/create the <i> tag?
You should use different methods for different use cases:
If you want to emphasise a phrase, use <em>.
The <i> tag has a new meaning in HTML5, representing "a span of text in an alternate voice or mood". So you should use this tag for things like thoughts/asides or idiomatic phrases. The spec also suggests ship names (but no longer suggests book/song/movie names; use <cite> for that instead).
If the italicised text is part of a larger context, say an introductory paragraph, you should attach the CSS style to the larger element, i.e. p.intro { font-style: italic; }
<i> is not wrong because it is non-semantic. It's wrong (usually) because it's presentational. Separation of concern means that presentional information should be conveyed with CSS.
Naming in general can be tricky to get right, and class names are no exception, but nevertheless it's what you have to do. If you're using italics to make a block stand out from the body text, then maybe a class name of "flow-distinctive" would be in order. Think about reuse: class names are for categorization - where else would you want to do the same thing? That should help you identify a suitable name.
<i> is included in HTML5, but it is given specific semantics. If the reason why you are marking something up as italic meets one of the semantics identified in the spec, it would be appropriate to use <i>. Otherwise not.
I'm no expert but I'd say that if you really want to be semantic, you should use vocabularies (RDFa).
This should result in something like that:
<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>
em is used for the presentation (humans will see it in italic) and the property and href attributes are linking to a definition of what italic is (for machines).
You should check if there's a vocabulary for that kind of thing, maybe properties already exist.
More info about RDFa here: http://www.alistapart.com/articles/introduction-to-rdfa/
TLDR
The correct way to make text italic is to ignore the problem until you get to the CSS, then style according to presentational semantics. The first two options you provided could be right depending on the circumstances. The last two are wrong.
Longer Explanation
Don't worry about presentation when writing the markup. Don't think in terms of italics. Think in terms of semantics. If it requires stress emphasis, then it's an em. If it's tangential to the main content, then it's an aside. Maybe it'll be bold, maybe it'll be italic, maybe it'll be fluorescent green. It doesn't matter when you're writing markup.
When you do get to the CSS, you might already have a semantic element that makes sense to put italics for all its occurrences in your site. em is a good example. But maybe you want all aside > ul > li on your site in italics. You have to separate thinking about the markup from thinking about the presentation.
As mentioned by DisgruntledGoat, i is semantic in HTML5. The semantics seem kind of narrow to me, though. Use will probably be rare.
The semantics of em have changed in HTML5 to stress emphasis. strong can be used to show importance as well. strong can be italic rather than bold if that's how you want to style it. Don't let the browser's stylesheet limit you. You can even use a reset stylesheet to help you stop thinking within the defaults. (Though there are some caveats.)
class="italic" is bad. Don't use it. It is not semantic and is not flexible at all. Presentation still has semantics, just a different kind from markup.
class="footnote" is emulating markup semantics and is incorrect as well. Your CSS for the footnote should not be completely unique to your footnote. Your site will look too messy if every part is styled differently. You should have some visual patterns scattered through your pages that you can turn into CSS classes. If your style for your footnotes and your blockquotes are very similar, then you should put the similarities into one class rather than repeat yourself over and over again. You might consider adopting the practices of OOCSS (links below).
Separation of concerns and semantics are big in HTML5. People often don't realize that the markup isn't the only place where semantics is important. There is content semantics (HTML), but there is also presentational semantics (CSS) and behavioral semantics (JavaScript) as well. They all have their own separate semantics that are important to pay attention to for maintainability and staying DRY.
OOCSS Resources
Object Oriented CSS
An Introduction To Object Oriented CSS (OOCSS)
How to Write Object Oriented CSS
Getting started with Object-Orientated CSS (OOCSS)
Object-Oriented CSS: What, How, and Why
Diving into Object Oriented CSS
Perhaps it has no special meaning and only needs to be rendered in italics to separate it presentationally from the text preceding it.
If it has no special meaning, why does it need to be separated presentationally from the text preceding it? This run of text looks a bit weird, because I’ve italicised it for no reason.
I do take your point though. It’s not uncommon for designers to produce designs that vary visually, without varying meaningfully. I’ve seen this most often with boxes: designers will give us designs including boxes with various combinations of colours, corners, gradients and drop-shadows, with no relation between the styles, and the meaning of the content.
Because these are reasonably complex styles (with associated Internet Explorer issues) re-used in different places, we create classes like box-1, box-2, so that we can re-use the styles.
The specific example of making some text italic is too trivial to worry about though. Best leave minutiae like that for the Semantic Nutters to argue about.
HTML italic text displays the text in italic format.
<i>HTML italic text example</i>
The emphasis and strong elements can both be used to increase the importance of certain words or sentences.
<p>This is <em>emphasized </em> text format <em>example</em></p>
The emphasis tag should be used when you want to emphasize a point in your text and not necessarily when you want to italicize that text.
See this guide for more: HTML Text Formatting
The i element is non-semantic, so for the screen readers, Googlebot, etc., it should be some kind of transparent (just like span or div elements). But it's not a good choice for the developer, because it joins the presentation layer with the structure layer - and that's a bad practice.
em element (strong as well) should be always used in a semantic context, not a presentation one. It has to be used whenever some word or sentence is important. Just for an example in the previous sentence, I should use em to put more emphasis on the 'should be always used' part. Browsers provides some default CSS properties for these elements, but you can and you're supposed to override the default values if your design requires this to keep the correct semantic meaning of these elements.
<span class="italic">Italic Text</span> is the most wrong way. First of all, it's inconvenient in use. Secondly, it suggest that the text should be italic. And the structure layer (HTML, XML, etc.) shouldn't ever do it. Presentation should be always kept separated from the structure.
<span class="footnote">Italic Text</span> seems to be the best way for a footnote. It doesn't suggest any presentation and just describes the markup. You can't predict what will happen in the feature. If a footnote will grow up in the feature, you might be forced to change its class name (to keep some logic in your code).
So whenever you've some important text, use em or strong to emphasis it. But remember that these elements are inline elements and shouldn't be used to emphasis large blocks of text.
Use CSS if you care only about how something looks like and always try to avoid any extra markup.
I think the answer is to use <em> when you intend emphasis.
If when reading the text to yourself, you find that you use a slightly different voice to emphasise a point, then it should use <em> because you would want a screen reader to do the same thing.
If it is purely a style thing, such as your designer has decided that all your <h2> headings would look better in italic Garamond, then there is no semantic reason to include it in the HTML and you should just alter the CSS for the appropriate elements.
I can't see any reason to use <i>, unless you specifically need to support some legacy browser with no CSS.
I'd say use <em> to emphasize inline elements. Use a class for block elements like blocks of text. CSS or not, the text still has to be tagged. Whether its for semantics or for visual aid, I'm assuming you'd be using it for something meaningful...
If you're emphasizing text for ANY reason, you could use <em>, or a class that italicizes your text.
It's OK to break the rules sometimes!
OK, the first thing to note is that <i> has been deprecated, and shouldn't be used <i> has not been deprecated, but I still do not recommend using it—see the comments for details. This is because it goes entirely against keeping presentation in the presentation layer, which you've pointed out. Similarly, <span class="italic"> seems to break the mold too.
So now we have two real ways of doing things: <em> and <span class="footnote">. Remember that em stands for emphasis. When you wish to apply emphasis to a word, phrase or sentence, stick it in <em> tags regardless of whether you want italics or not. If you want to change the styling in some other way, use CSS: em { font-weight: bold; font-style: normal; }. Of course, you can also apply a class to the <em> tag: if you decide you want certain emphasised phrases to show up in red, give them a class and add it to the CSS:
Fancy some <em class="special">shiny</em> text?
em { font-weight: bold; font-style: normal; }
em.special { color: red; }
If you're applying italics for some other reason, go with the other method and give the section a class. That way, you can change its styling whenever you want without adjusting the HTML. In your example, footnotes should not be emphasised—in fact, they should be de-emphasised, as the point of a footnote is to show unimportant but interesting or useful information. In this case, you're much better off applying a class to the footnote and making it look like one in the presentation layer—the CSS.
Use <em> if you need some words/characters in italic in content without other styles. It also helps make content semantic.
text-style is better suited for multiple styles and no semantic need.
DO
Give the class attribute a value indicating the nature of the data (i.e. class="footnote" is good)
Create a CSS style sheet for the page
Define a CSS style that is attached to the class that you assign to the element
.footnote {
font-style:italic;
}
DO NOT
Don't use <i> or <em> elements - they're unsupported and ties the data and presentation too close.
Don't give the class a value that indicates the presentation rules (i.e. don't use class="italic").
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.