What's the difference between and , and ?

Asked 7/11, 2008 at 10:56 Answered 6/6, 2023 at 19:25

935

What's the difference between  and ,  and  in HTML/XHTML? When should you use each?

Potvaliant answered 7/11, 2008 at 10:56 Comment(4)

See also: programmers.stackexchange.com/a/255588/12693 – Hypsometry 1/4, 2015 at 8:57

At least for now, everything I saw in StackOverflow was "bolded" using element – Quintero 17/6, 2015 at 20:37

MDN has clear description (with examples) on how these tags should be used: , , ,  – Anny 14/6, 2017 at 13:31

A screen reader will pronounce the words in with an emphasis, using verbal stress. – Ingeborgingelbert 21/6, 2022 at 23:59

1197

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.

 is a style - we know what "bold" is supposed to look like.

 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."  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").

Promptitude answered 7/11, 2008 at 11:7 Comment(15)

Note that and have not been deprecated in HTML5. Their new use is to semantically represent styles (or intended presentation), whereas and represent structure. You must read stellify.net/… – Conatus 3/8, 2011 at 13:56

Great answer but I would say that "you can't bold a bold" is wrong because you're assuming it's a boolean concept, when font-weight: takes a more variable approach. Now that high fidelity screens exists, there are levels of boldness. – Chilung 16/8, 2013 at 16:54

@Chilung I believe he was speaking to the specific technical restrictions of the Palm Pilot. – Laryngeal 25/8, 2013 at 5:2

I don't believe bunch of letters have any intrinsic meaning, can have exactly the same semantic meaning as if we decide so. What did makers of readers decided, do they treat them differently or exactly in the same way? – Oxycephaly 31/10, 2013 at 16:24

@deathApril But they do! They do have meaning! HTML is not defined by what you believe or what you decide. – Pines 3/12, 2013 at 10:12

Your discussion list post link is dead. Have another resource? – Courage 5/12, 2013 at 1:15

Informative answer, but if I got it right, the only practical difference is when it comes to text-to-speech software? In spite of that, it seems futile to me to have more than one tag for something like bolding. When someone visits a web site, (s)he won't see which tag is used, hence, there is no difference. – Howrah 11/5, 2014 at 14:56

@Chilung font-weight is CSS. – Howrah 11/5, 2014 at 14:56

@poepje: If presentation were all that mattered and semantics were not a concern, then yes, there wouldn't be much of a difference. – Piedadpiedmont 20/5, 2014 at 2:25

@poepje ....but semantics should ALWAYS be a concern. You never know when you'll want to re-purpose or adapt something like a webpage for a more general purpose. Since certain style-sheet/markup technologies do treat the  and  tags differently, you have no guarantee that there will never be a difference, even if you don't initially plan for the markup to be seen by different technologies. (Especially in the case of the web, where you have absolutely no way of knowing how people will use your content.) – Gimcrack 5/9, 2014 at 19:56

This Software Engineering answer now nicely summarises the situation too. – Mimesis 10/9, 2014 at 1:12

I like the example: a lower tone for a speaking program like Jaws (for blind people). – Woolridge 6/2, 2015 at 7:29

Under HTML5 (and 7 years later), I disagree with ' is a style - we know what "bold" is supposed to look like' - see https://mcmap.net/q/54584/-will-the-lt-b-gt-and-lt-i-gt-tags-ever-become-deprecated. The HTML 5 LD also explicitly calls out "Style sheets can be used to format b elements, just like any other element can be restyled. Thus, it is not the case that content in b elements will necessarily be boldened." – Condyloma 13/3, 2015 at 17:12

@splattne: " 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). And strong on a Palm Pilot may be an underline (since you can't bold a bold)." Is this the same for ? Is  typically rendered as italic yet with the same semantic potential for other renderings in certain restricted contexts? – Hollander 1/9, 2016 at 23:27

Please do not use idiom when giving answer. I don't understand this. – Raffle 15/5, 2021 at 3:34

286

 and  are explicit - they specify bold and italic respectively.

 and  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.

Wagonlit answered 7/11, 2008 at 10:59 Comment(5)

Good explanation. On the other hand, with HTML 5, and are semantic rather than explicit as well. Sigh. – Afterbody 7/11, 2008 at 11:28

Yes, the best explanation I've read is stellify.net/… – Conatus 3/8, 2011 at 13:58

HTML5 has new semantic meanings for b and i. They are tags you should use when you need to draw attention to a part of prose, or to offset normal prose, without conveying emphasis (em), importance (for strong), or relevance (for mark). b is for key words, product names, actionable words, etc., while i is for technical terms, thoughts, phrases, etc. Honestly IMO, there needs to be a greater distinction between the two. – Bride 21/1, 2012 at 4:51

Too bad the stellify.net text (and title) is completely unreadable on most cheap office monitors and setups ^^ (the lack of contrast is simply stunning) – Sundin 7/8, 2012 at 9:20

So  once really used to set the style? – Offertory 7/12, 2021 at 3:11

 and  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.

 and  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.

Trella answered 7/11, 2008 at 11:0 Comment(6)

if you say, and should no longer be used, then what about old browser which doesn't support and ? – Burberry 8/7, 2014 at 4:27

@Burberry If someone uses an old browser to navigate the web, he or she has many problems already, from a visual and security point of view. Because of that, I believe that programmers and designers should not support old browsers anymore. – Rephrase 25/11, 2014 at 16:26

Note: if we say old browsers, we mean Netscape 3 and IE2 here (IE3 and NS4 already supported and ). If you really need to keep supporting those 20th century browsers, you are in really big troubles. – Pines 28/3, 2017 at 7:0

 and on the other hand only apply font styling and should no longer be used. Official HTML5 docs say otherwise. Citation needed? – Kittrell 30/7, 2019 at 21:19

This answer was posted ~6 years before HTML5 was released! – Trella 31/7, 2019 at 7:3

@Trella that doesn't mean you can't either a) update it with new information, b) edit it to highlight which standard/version does it relate to, with a note that it's outdated. – Kittrell 9/9, 2019 at 19:28

I'm going to hazard a historical and practical hot take here:

Yes, according to specifications,  had a semantic meaning in HTML4 and  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  instead of  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  and  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  and mean "strongly emphasized" and for people who are pasting in  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.

Pomerleau answered 14/7, 2020 at 21:35 Comment(1)

This is the ONLY correct answer. Just because few hipsters want to go back in time and change the meaning of the bold tag doesn't suddenly mean it changes. The people who wish to change history also forget that bold is actually an adjective! It literally means bold as in fearless or strongly. It is both semantic and implies a style. The movement of webdevs to make things harder for job security is no reason to force everyone to start typing more. If anything strong is redundant an unnecessarily verbose. It also doesn't align with our long history of print. Don't kill history for job security. – Inoculum 25/2 at 22:0

Here's a summary of definitions together with suggested usage:

 ...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.

 ...now represents importance rather than strong emphasis.

 ...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.

 ...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)

Mme answered 14/11, 2013 at 20:57 Comment(0)

 and  consume more bandwidth than  and .

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" (cough, 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.

Harriettharrietta answered 4/9, 2014 at 17:46 Comment(1)

Lol, this should be the accepted answer (HHOS). Yours is the most down-to-earth and correct answer on this whole page, even if it's a bit of a joke. This whole thing about "semantics" is a silly game to begin with. We all know that anyone who looks up this question is here working with the major browser vendors in mind, Chrome, Firefox, IE, etc. We just want to know what the real, actual differences might be, not what a committee debates about in its abundance of spare time. – Intrusion 23/12, 2019 at 22:24

 and  are both related to style, whereas  and  are semantic. In HTML 4, the first are classified as font style elements, and the latter as phrase elements.

As you indicated correctly,  and  are often considered similar, because browsers often render both in italics. But according to the specifications,  indicates emphasis and  indicates stronger emphasis, which is quite clear, but often misinterpreted. On the other hand, the distinction between when to use  or  is really a matter of style.

Tiu answered 7/11, 2008 at 11:11 Comment(8)

strong does not indicate "stronger emphasis" but rather "importance." For stronger emphasis, nest an em element inside another em element. – Bride 21/1, 2012 at 5:20

@TestSubject528491 if you follow the link for phrase elements I have used above, you will see that I have just quoted the spec. I don't think that this conflicts with the semantics of importance, nor that a nesting of two ems emphasize within an emphasis, which I understand you were suggesting. – Tiu 22/1, 2012 at 16:25

I think the HTML5 spec is just making more of a distinction between the two. In my interpretation, "emphasis" means stress in tone of voice. E.g., "You want to by THOSE jeans?" versus "You want to BUY those jeans?" have different meanings due to emphasis placement. OTOH, "Importance" doesn't have an effect based on placement. E.g., "WARNING: beware of dog!" would the same meaning if the importance were removed. – Bride 22/1, 2012 at 16:56

 and are both related to style erm. Official HTML5 docs say otherwise. Citation needed? – Kittrell 30/7, 2019 at 21:18

@vaxquis linked above for HTML 4:  and  are font style elements, while  and  are phrase elements. Any suggestions to improve this? For completeness, and also because your comment did not include a citation, in HTML 5.2, all these elements are described in phrasing content – Tiu 31/7, 2019 at 15:13

@Tiu HTML 4.01 is, well, a bit dated? HTML 5.2 doc (and earlier version too) say: "The b element represents 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", "The i element represents 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"; neither say anything about being related to visual style - both are described semantically. They even mention that visual style is not guaranteed! – Kittrell 31/7, 2019 at 21:35

@vaxquis please link your quotes, if you want to discuss this seriously. I do not understand in which way you (1) need a citation to obvious categorization in the linked specification and (2) after pointing out that this information is there you discuss the age of a specification linked in an answer written close to 11 years ago. What do you want to discuss? Would you like to suggest an edit? Is there anything I wrote not correct as per the linked specification? – Tiu 31/7, 2019 at 22:50

@Tiu w3.org/TR/html52/textlevel-semantics.html#elementdef-b , w3.org/TR/html52/textlevel-semantics.html#elementdef-i - I just thought the links would be obvious to you. Yes, actually you could just enhance your answer to encompass HTML 5.x specs and mention the facts that the HTML spec changed significantly from 4.01, thus b and i being no longer visually stylistic. – Kittrell 1/8, 2019 at 8:59

While  and  are of course more semantically correct, there seem definite legitimate reasons to use the  and  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.

Heinrich answered 9/11, 2008 at 2:18 Comment(1)

"more semantically correct"? What do you mean by that? Have you read the HTML5 spec on b/i tags? – Kittrell 30/7, 2019 at 21:18

, ,  and  tags are traditionally representational. But they have been given new semantic meaning in HTML5.

 and  was used for font style in HTML4.  was used for italic and  for bold. In HTML5  tag has new semantic meaning of 'alternate voice or mood' and  tag has the meaning of stylistically offset.

Example uses of  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  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>

 and  had the meaning of emphasis and strong emphasis in HTML4. But in HTML5  means stressed emphasis and  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  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

Electret answered 18/4, 2017 at 16:1 Comment(0)

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".

Illampu answered 7/11, 2008 at 11:1 Comment(0)

As others have said and are explicit (i.e. "make this text bold"), whereas and 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 tag, it wouldn't know what to do. But if it comes across a tag, it knows that whatever is within should be emphasised to the listener. And therein you get the practical difference.

Leavings answered 7/11, 2008 at 11:4 Comment(2)

 and are explicit (i.e. "make this text bold"), erm. Official HTML5 docs say otherwise. Citation needed? – Kittrell 30/7, 2019 at 21:17

I posted this answer in November 2008. HTML5 was released in 2014. Are you honestly asking for me to cite in my answer a reference to something that came out eight years later?? – Leavings 24/6, 2020 at 13:3

As the others have stated, the difference is that  and  hardcode font styles, whereas  and  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  and  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.

Carmelinacarmelita answered 9/11, 2008 at 3:53 Comment(2)

You can use style sheets to completely change the way that  and  are rendered too. Pretty slick, huh? – Harriettharrietta 4/9, 2014 at 22:49

b and i don't hadcode anything. Just like any HMTL tag, they have a default CSS style and just like with any tag, you can change it to look the way you wish. – Godchild 30/7, 2019 at 22:16

I use both and , 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 all books about lacrosse."

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-- is most definitely not deprecated, as some people have claimed. For me, it's just a fine line between visual appeal and meaning.

Navarre answered 5/3, 2010 at 20:59 Comment(0)

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  or  tags, instead of analysing CSS styles).

If you can define CSS styles, use them.

Acrobat answered 15/12, 2011 at 13:48 Comment(0)

 and , 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)

: 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>

: 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>

`` vs. ``

It may help to realize that both are valid and semantic elements in HTML5 and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline ). Each element is meant to be used in certain types of scenarios, and if you want to bold text for decoration, you should instead actually use the CSS font-weight property. source

`` vs. ``

The  element represents stress emphasis of its contents, while the  element represents text that is set off from the normal prose. source

My 2 cents

I personaly prefer  and  over  and .

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.

Poussin answered 28/7, 2021 at 17:16 Comment(1)

False. The bold tag does in fact have semantic value. The idea that the b tag is not semantic is dated. Bold is an adjective that both means strong and also bold of style. That is also how it is used currently and in most of the web. Strong is redundant. – Inoculum 25/2 at 21:55

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:  tag semantically emphasizes the important word.

i :  tag just offset text conventionally styled in italic.

note: you should use  and  tags their meaningful names which tell about the type of content. Semantic tags are also helpful for SEO.

Dusa answered 13/6, 2022 at 7:45 Comment(0)

 and  should be avoided because they describe the style of the text. Instead, use  and  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.

Villiers answered 7/11, 2008 at 11:1 Comment(1)

Completely incorrect, and should not be avoided. They have semantic meanings in HTML5. – Dottie 8/1, 2015 at 0:14

"They have the same effect. However, XHTML, a cleaner, newer version of HTML, recommends the use of the  tag. Strong is better because it is easier to read - its meaning is clearer. Additionally,  conveys a meaning - showing the text strongly - while  (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  and  ".

Google dixit:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

Thoroughgoing answered 7/11, 2008 at 11:1 Comment(0)

You should generally try to avoid  and . 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  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.

 and  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.

Godchild answered 7/11, 2008 at 11:18 Comment(2)

and are NOT deprecated in HTML 4, and are still fully supported even in the upcoming HTML 5. and are not replacements for them. See also w3.org/TR/html401/index/elements.html – Mccreery 16/3, 2009 at 5:59

@Mccreery They are still in HMTL5 but with a different meaning and with a very detailed explanation of how to use them or rather, how to not use them. Note that these tags have no meaning (bold and italic are not meanings, they are design instructions and HMTL is about meaning, CSS is aobut design) - HTML is about describing what a text is and not about how to render it (that was separated after HMTL3 for a good reason),. – Godchild 21/10, 2016 at 17:10

HTML Formatting Elements:

HTML also defines special elements for defining text with a special meaning. HTML uses elements like and for formatting output, like bold or italic text.

HTML Bold and Strong Formatting:

The HTML element defines bold text, without any extra importance.

<b>This text is bold</b>

The HTML element defines strong text, with added semantic "strong" importance.

<strong>This text is strong</strong>

HTML Italic and Emphasized Formatting:

The HTML element defines italic text, without any extra importance.

<i>This text is italic</i>

The HTML element defines emphasized text, with added semantic importance.

<em>This text is emphasized</em>

Varlet answered 11/6, 2016 at 14:19 Comment(1)

The HTML element defines bold text, without any extra importance. The HTML element defines italic text, without any extra importance. erm. Official HTML5 docs say otherwise. Citation needed? – Kittrell 30/7, 2019 at 21:16

For text bold using  tag

For text important using  tag

For text italic style using  tag

For emphasized text using  tag

Whipstock answered 6/2, 2020 at 6:57 Comment(0)

First, never use any of them if you want to style the text, to represent a design decision. You should use CSS for that.

🙅‍♂️ Don't do this

<article>
  <h1>Illa videamus, quae a te de amicitia dicta sunt.</h1>
  <b>John Doe, 23 March 2023</b>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suam denique cuique naturam esse ad vivendum ducem. <mark>Venit ad extremum;</mark> <a href="http://loripsum.net/" target="_blank">Quo igitur, inquit, modo?</a> Certe, nisi voluptatem tanti aestimaretis. </p>

  <ul>
    <li>Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur.</li>
    <li>Transfer idem ad modestiam vel temperantiam, quae est moderatio cupiditatum rationi oboediens.</li>
    <li>Ergo in utroque exercebantur, eaque disciplina effecit tantam illorum utroque in genere dicendi copiam.</li>
  </ul>
</article>

B doesn't stand for Bold anymore, I doesn't stand for Italic and U doesn't stand for underline. Do not think of these as your word processor buttons. The initials are left over from early Web standards. Nowadays, their meanings are:

Funky names. They had to keep the initials somehow.

These elements do have a semantic meaning, albeit a weaker one, and are not deprecated. They are used to simply set apart some text from the surrounding text.

Getting back to the example:

👍 This is semantic HTML

cite {
  font-weight: bold;
  font-style: normal; /* we override the browser styling here, to make it look like the previous example */
}

<article>
  <h1>Illa videamus, quae a te de amicitia dicta sunt.</h1>
  <cite>John Doe, 23 March 2023</cite>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suam denique cuique naturam esse ad vivendum ducem. <mark>Venit ad extremum;</mark> <a href="http://loripsum.net/" target="_blank">Quo igitur, inquit, modo?</a> Certe, nisi voluptatem tanti aestimaretis. </p>

  <ul>
    <li>Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur.</li>
    <li>Transfer idem ad modestiam vel temperantiam, quae est moderatio cupiditatum rationi oboediens.</li>
    <li>Ergo in utroque exercebantur, eaque disciplina effecit tantam illorum utroque in genere dicendi copiam.</li>
  </ul>
</article>

They produce the same visual result, but their semantics are different. Bolding the article information is a design decision. (also, the <cite> element is another semantic tag - it indicates the source of the content)

Additionally, these tags can be styled using CSS - look at the examples from MDN to see some potential styles.

The  and  tags produce the same visual result by default in most browsers, but this is just a coincidence.

They have a different semantic meaning. While the , , and  tags simply set the text apart, the  and  tags are used to create emphasis. This represents more than just setting some text apart, instead it marks it as important. For screen readers, it usually changes the tone as well. As you might suppose, the  tag indicates a stronger level of emphasis.

Yes, I have totally seen  to be styled as underlined in many places, which is totally valid, semantic HTML.

Finally, here are some examples to help you decide:

.note {
  background-color: #ffff0080;
}

<article>
  Humans (<i>Homo sapiens</i>) are the most widespread species of primate.<br>
  <i>Around the World in Eighty Days</i> was one of Jules Verne's most notable works.
  <div class="note">
    In these examples, I used the <code>&lt;i&gt;</code> tag to indicate text that should be simply set apart - you wouldn't intonate it when reading the above sentences aloud.
  </div>
</article>
<article>
  This is <em>urgent</em>. The deadline is in <em>one week</em>.<br>
  Linux Mint is <em>widely praised</em> for its user-friendly interface and stability.
  <div class="note">
    In these examples, I used the <code>&lt;em&gt;</code> tag instead, to indicate a text of particular importance.
  </div>
</article>

Of course, these examples also apply to  or .

Ciaracibber answered 6/6, 2023 at 19:25 Comment(2)

B does in fact still stand for bold and it also carries semantic value because that is how it is used and has historically been used. To ignore the b tag as having semantic value is to invalidate 90% of the internet. The fact is that bold is also a semantic word. The knight was bold in his charge into battle. It is both descriptive of style and importance. – Inoculum 25/2 at 21:53

It stood for bold, in HTML3. – Ciaracibber 26/2 at 17:38

-2

 and  are abstract (which is what people mean when they say it's semantic).  and  are specific ways of making something "strong" or "emphasized"

Analogy:

Both  is to  and  is to 

"vehicle" is to "jeep"

Unseam answered 10/9, 2015 at 21:15 Comment(1)

I don't see why this answer was downvoted. Many other answers with similar contents have been well received. – Shoshone 25/11, 2019 at 5:7

-2

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.

Spanking answered 18/8, 2020 at 10:13 Comment(0)

-5

We use the  tag for text which has high priority for SEO purposes like product name, company name etc, while  simple makes it bold.

Similarly, we use  for text which has high priority for SEO, while  to make the text simply italic.

Karylkarylin answered 7/4, 2011 at 5:44 Comment(1)

Some HTML tags really have SEO application. Meta description, meta robot, or link canonical to name a few. For as far as we know, strong/em is not one of these, neither in theory nor in practice. – Thedathedric 2/9, 2014 at 9:56

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Semantic meaning (from MDN)

`<b>` vs. `<strong>`

`<i>` vs. `<em>`

My 2 cents

Recommended topics

Hot tags

Semantic meaning (from MDN)

<b> vs. <strong>

<i> vs. <em>

My 2 cents

Recommended topics

Hot tags

`<b>` vs. `<strong>`

`<i>` vs. `<em>`