Okay, so I know that in HTML you can use the <b> tag, but isn't there a "weight=bold" attribute that I can use in the <p> tag?
Or is that in CSS, or Javascript?
Also consider the <strong> tag. It's much better for screen readers and therefore better for accessibility. Search engines also use <strong> tags to determine important content similar to how they use header tags <h1>, <h2>, etc (although <b> will also have similar meaning to search engines). If you want to stress importance of text, use <strong>. If you don't want to stress importance, use the <b> tag or use the font-weight:bold; style on the element or in the CSS.
Although, if you are bolding the entire paragraph, it's probably better to use the CSS option. This will reduce the affect on screen readers and it probably doesn't make sense to have an entire paragraph emphasized. But on the other hand, I've seen bold used to emphasize an entire paragraph before for good reason. In which case, font-weight:bold; is what you want to use, likely in a class/style.
In the end, <strong>, <b> or font-weight:bold; will all work and accomplish something similar visually (probably exactly the same), but they have slightly different meanings. Also, make sure that if what you're bolding is a header, use the header tags: <h1>, <h2>, etc.
You're thinking of the CSS property font-weight:
p { font-weight: bold; }
If the text's meaning is semantically strong, use the strong element. If not, use a semantic named class (one that clearly shows the meaning of the element, don't mix presentation and data by calling it bold etc) and reference it in your CSS.
HTML
<span class="important-message">I'm important!</span>
CSS
.important-message {
font-weight: bold;
}
Some people still use the b element as a presentational hook, but it hasn't been deprecated, though most people favour the strong element nowadays. Just make sure they are used correctly.
The <b> tag is alive and well. <b> is not deprecated, but its use has been clarified and limited. <b> has no semantic meaning, nor does it convey vocal emphasis such as might be spoken by a screen reader. <b> does, however, convey printed empasis, as does the <i> tag. Both have a specific place in typograpghy, but not in spoken communication, mes frères.
To quote from http://www.whatwg.org/
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.
You can make text or words Bold with using <b>Text</b> tag.
You can also use <strong>Text</strong> tag
Head tags <h1>, <h2>, <h3>, ... are default bolded tags and make your text Bold by default unless you change their style with CSS
Above tags was available in HTML but if you like to change the style with CSS you can use
font-weight:bold
Its in CSS you have to set font-weight: bold; as style
You can code like below..
<html>
<head>
<style>
p.boldstats{
font-weight: bold
}
</style>
</head>
<body>
<p class="boldstats"> The bold finder </p>
</body>
</html>
You can use the font-weight attribute on your
For example:
<p>This is my paragraph</p>
You can either have your CSS inline as below:
<p style="font-weight:bold;">This is my paragraph</p>
Or have it in your external CSS stylesheet as below:
p{
font-weight:bold;
}
It's all historical and dates from a time where dinosaurs walked the earth and CSS didn't exist.
More seriously, forget about the <b/> tag and use font-weight:bold in a CSS rule :)
<b> is a last resort
You can use <b>, but only as a last resort. There are a variety of elements that work as good alternatives to <b>, here they are in order of most usefulness:
More useful alternatives
For important text: <strong>
For stress emphasized text: <em>
For headings, not just page headings but paragraph headings and others of all kinds: <h1> through <h6>
The practical edge case for use of <b>
The only case where I would advocate using <b> is if
you have styled <strong> in a different way that you don't want displaying for the text that you have in mind,
you don't want italic emphasis or a heading, and
you are about to use an inline span or a span with a class just for bolding text. (For example: <span class='bold'>)
Then it's reasonable to use <b> instead, because in that case it'll probably be cleaner/shorter and more semantic than an unsemantic span, and terceness/readability is a good reason for making that choice, since b has been redefined for use as an element denoting printed emphasis.
you could also do <p style="font-weight:bold;"> bold text here </p>
#bold{
font-weight: bold;
}
#custom{
font-weight: 200;
}
<body>
<p id="bold"> here is a bold text using css </p>
<p id="custom"> here is a custom bold text using css </p>
</body>
I hope it's worked
Maybe you want to use CSS classes?
p.bold { font-weight:bold; }
That way you can still use <p> as normal.
<p>This is normal text</p>
<p class="bold">This is bold text</p>
Gives you:
This is normal text.
This is Bold Text.
A very old thread, I know. - but for completeness:
I use <span class="bold">my text</span>
as I upload the four font styles: normal; bold; italic and bold italic into my web-site via css.
I feel the resulting output is better than simply modifying a font and is closer to the designers intention of how the boldened font should look.
The same applies for italic and bolditalic of course, which gives me additional flexibility.
What you use instead of the b element depends on the semantics of that element's content.
The elements b and strong have co-existed for a long time by now. In HTML 4.01, which has been superseded by HTML5, strong was meant to be used for "strong emphasis", i.e. stronger emphasis than the em element (which just indicated emphasis). In HTML 5.2, strong "represents strong importance, seriousness, or urgency for its contents"; the aspects of "seriousness" and "urgency" are new in the specification compared to HTML 4.01. So if you used b to represent content that was important, serious or urgent, it is recommended that you use strong instead. If you want, you can differentiate between these different semantics by adding meaningful class attributes, e.g. <strong class="urgent">...</strong> and <strong class="warning">...</strong> and use appropriate CSS selectors to style these types of "emphasis" different, e.g. using different colours and font sizes (e.g. in your CSS file: strong.warning { color: red; background-color: transparent; border: 2px solid red; }.).
Another alternative to b is the em element, which in HTML 5.2 "represents stress emphasis of its contents". Note that this element is usually rendered in italics (and has therefore often been recommended as a replacement for the i element).
I would resist the temptation to follow the advice from some of the other answers to write something like <strong class="bold">...</strong>. Firstly, the class attribute doesn't mean anything in non-visual contexts (listening to an ePub book, text to speech generally, screen readers, Braille); secondly, people maintaining the code will need to read the actual content to figure out why something was bolded.
If you used b for entire paragraphs or headings (as opposed to shorter spans of texts, which is the use case in the previous bullet point), I would replace it with appropriate class attributes or, if applicable, WAI-ARIA roles such as alert for a live region "with important, and usually time-sensitive, information". As mentioned above, you should use "semantic" class attribute values, so that people maintaining the code (including your future self) can figure out why something was bolded.
Not all uses of the b may represent something semantic. For example, when you are converting printed documents into HTML, text may be bolded for reasons that have nothing to do with emphasis or importance but as a visual guide. For example, the headwords in dictionaries aren't any more "serious", "urgent" than the other content, so you may keep the b element and optionallly add a meaningful class attribute, e.g. <b class="headword"> or replace the tag with <span class="headword"> based on the argument that b has no meaning in non-visual contexts.
In your CSS file (instead of using style attributes, as some of the other answers have recommended), you have several options for styling the "bold" or important text:
specifying different colours (foreground and/or background);
specifying different font faces;
specifying borders (see example above);
using different font weights using the font-weight property, which allows more values than just normal and bold, namely normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
etc.
Note that support for numeric font-weight values has not always been great.
On a sidenote the below code will also make it bold.
<strong> text here </strong>
<p style="font-weight:bold;"></p>
Nowadays people tend to use website builders (CMS like Wordpress) instead of coding their own blog from scratch. Even professional web developers do it because it's faster.
It would be nice if you could mention the advantages and things to keep in mind when coding your own blog in real life, for example:
More flexibility (customization)
Pay a domain name
Pay and choose a web hosting
Security and maintenance
Copyright and license of some website builders' templates and graphics. Your website could be locked to a particular web host if you used your host's website builder. So you cannot move to another web host, because if you do you could no longer use that template.
Experience trouble when asking for website builder's tech support when the website goes down.
Some templates are not search engine friendly and this affects your website ranking (SEO)
Anyways, you can use css/css3 or JavaScript for making interactive webpage. Even you can upload your all sort of code into a server formatting the default blog theme.
You can use following :
<p id="p1">Some Text here </p>
#p1{
font-weight: bold;
}
OR
<Strong><p>Some text here </p></strong>
OR
You can use <h1> tag which is somewhat similar to bold
The answer by #Darryl Hein is correct despite one point - <b> is not recommended at all since XHTML, because it's not semantic.
<strong> means semantically highlighted text
font-weight: bold means visually highlighted text
<strong> can be css-tuned to not be bold, though it's a conventional default. It can be made red, or italic, or underlined (though all these possibilities are not really user-friendly). Use it for phrases / words in text, not because of visual design, but related to their meaning
font-weight: bold should be used for design-related bold parts, like headers, sub-headers, table header cells etc.
Use the <strong> tag because it's more semantic. <b> has been depreciated so it's best not to use it. Also bold text is given more Search Engine Optimisation (SEO) weight so it's always best to use a real <strong> rather than making a <p> or <span> bold using CSS.
Related
Is there a difference in how the browser would display between:
<i>test</i>
<span style="font-style:italic">test</span>
Is one preferable over the other? Are there different scenarios for each?
A quick jsfiddle doesn't show any visual difference.
Pre-HTML5, there was no difference, neither in visuals nor semantics; i, like b, s and u, was a presentational element. This is in contrast to em, strong, del and ins respectively.
In HTML5, the i element has a specific meaning that happens to be represented visually as italicized text. It should not be used to represent just any text that happens to be in italics. In particular, it distinguishes itself from the em element, which represents stress emphasis (and, unlike i, doesn't necessarily have to be represented with italics). span remains a generic phrasing element that carries no meaning whatsoever.
Normally I would quote the spec here but I think MDN's summary is easier to understand:
The HTML <i> element represents a range of text that is set off from the normal text for some reason. Some examples include technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.
The spec still offers better examples though:
The examples below show uses of the i element:
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
In the following example, a dream sequence is marked up using i elements.
<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he
dreamt. <i>The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with
her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>
The paragraph is taken from https://html.com/tags/i/#ixzz5VZbm6JhB
The HTML <i> element is used to differentiate words from the surrounding text by styling the marked text in italics without implying any added emphasis to the italicized words.
an Example here, here I want the word world to be in italic, so you can have an <i> tag surrounded.
<h1>Hello <i>World</i></h1>
When using CSS font-style:italic you need to be specific where the style be done.
like in the example.
h2{
font-style:italic;
}
<h2>Hello World</h2>
So, what if you want to achieve the word world to be italic, you have to surround it in between span tag and make it italic using the CSS.
span{
font-style:italic;
}
<h2>Hello <span>World</span></h2>
So, rather than doing it in CSS, HTML had given an option of <i> tag.
The i tag can be used to indicate a technical term, a phrase from another language, a thought, or a ship name, etc.
<i> content </i> is a markup tag to show content in web browser, font-style is a property to style your content (headings, paragraphs, list etc). In font-style: italic, italic is a value of font-style property to show content/text in italic style at browser. Normally, Ui/Ux designer use this <i></i> tag to show fonty icons (icons in font/text format, not images like jpeg,png,jpeg etc). But you can use this tag for any purpose as you need.
From w3schools:
In HTML 4.01, the tag was used to render text in italics. However, this is not necessarily the case with HTML5. Style sheets can be used to format the text inside the element.
both are same in properties. Both do the same thing. The only difference is that the one is using the HTML tag to apply italic property and other is using CSS property to apply the italic style.
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 always used <b> tag to bold something, because that is the way I was taught to do it a long time ago. But now my IDE always informs me that <b> is deprecated and to use css style. Assuming by that they want me to use <div style="font-weight:bold;">Bold Text</div>. How vital is this message that my IDE is giving me? Should I go back and change all my<b> to style?
Below is an example of both situations. Could someone explain the difference's between both and why <b> is deprecated now?
<b>Bold Text</b>
Vs.
<div style="font-weight:bold;">Bold Text</div>
Would <b> be better because if someone has css turned off on the browser, it would still be show correctly?
The correct question is: "What markup best describes my content?"
Let's start with the <b> tag (which is not deprecated):
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.
...
You should not use b and i tags if there is a more descriptive and
relevant tag available. If you do use them, it is usually better to
add class attributes that describe the intended meaning of the markup,
so that you can distinguish one use from another.
...
It may help to think of b or i elements as essentially a span element
with an automatic fallback styling. Just like a span element, these
elements usually benefit from class names if they are to be useful.
http://www.w3.org/International/questions/qa-b-and-i-tags
By comparison, <strong> has a more specific purpose:
The strong element represents a span of text with strong importance.
http://www.w3.org/TR/html-markup/strong.html
For example:
<p><strong>Warning.</strong> Here be dragons.</p>
Here we emphasize the word "warning" to stress its importance.
But not:
<p><strong>Item 1:</strong> Foo, bar, and baz.</p>
"Item 1" isn't meant to be stressed, so <strong> is the wrong tag. Furthermore, it's possible that the whole structure could be better represented.
If the meaning of the text has strong importance, <strong> is appropriate (just like this line).
Perhaps you just want a thicker font for style purposes and the text has no particular meaning. In that case, neither <strong> nor <b> may be appropriate.
<span class="product-name">Hello World</span>
.product-name { font-weight: bold; }
In all cases:
Use the markup which describes the content.
Do not use inline styles (use an external stylesheet).
Do not name styles based on their visual representation (e.g. naming a style "bold" is a poor choice)
Would <b> be better because if someone has css turned off on the
browser, it would still be show correctly?
No. Use the correct markup for the job. It's fairly unusual for someone using the visual representation of your site to willingly disable the stylesheet, but non-visual consumers care primarily about the structure of your document. A "non-visual consumer" could be a search engine parsing your content or a screen reader application.
Additional Reading:
http://www.w3.org/TR/html51/text-level-semantics.html#the-strong-element
http://www.w3.org/TR/html51/text-level-semantics.html#the-b-element
It's not "vital" if the code still works. Though it would conform to current standards which will give the code a longer future.
The difference is that using CSS separates your styling from your content. <b> is a style, nothing more. And it tightly couples that markup to that style. The separation allows you to emphasize the markup in other ways instead of always using a bold font.
Would be better because if someone has css turned off on the browser, it would still be show correctly?
No, because if the user wants to disable styling then your <b> tag undermines that, because it's mixing styling with content.
You should be using <strong> in place of <b>. You could use styles (text-weight: bold in a separate sheet) if a particular group of text was always going to be bold, and you didn't (or couldn't) want to use <strong> for whatever reason. But I would only go that route if you already were applying other styles to that same element.
If you are talking about SEO
Use <strong> should be SEO friendly too... (focus on the keywords)
and it's important !
I find that using <strong></strong> is the better approach than using <b> or inline styles.
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>]).
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.