How to make text bold in HTML
Wrap the text in <strong> or <b>. Both make it bold:
They look identical. The difference is what they say about the text.
strong vs b
| Tag | Meaning | Example |
|---|---|---|
<strong> | Important, serious or urgent content | <strong>Do not</strong> share your password. |
<b> | Stands out, but no extra importance | Keywords in a summary, a product name, the lead words of an article |
Pick <strong> when you would raise your voice or want the reader not to miss it. Pick <b> when bold is a visual convention for this kind of text. If neither fits and you just want a style, use a <span> with a class and CSS.
Italics: em and i
The italic pair follows the same idea:
| Tag | Meaning | Example |
|---|---|---|
<em> | Stress emphasis: moving it changes the meaning of the sentence | I <em>never</em> said that. |
<i> | Alternate voice: foreign words, technical terms, names of ships, thoughts | <i lang="la">et cetera</i> |
The first two sentences above use the same words and mean different things because of where <em> sits. When <i> marks a phrase in another language, add a lang attribute so screen readers pronounce it correctly.
A few other tags are italic by default: <cite> (the title of a work), <dfn> (a term being defined), <address> and <var>. Use them when they fit and let their default style do the rest.
Bold and italic together
Nest one tag inside the other, and close them in reverse order:
<strong><em>text</strong></em> (closing in the wrong order) still displays, but the browser has to repair the tree and may split your elements; see tags for what that repair looks like.
Bold and italic with CSS
When the style is purely visual (a card title, a price, a label), use CSS on the element itself instead of adding a tag. font-weight controls bold and font-style controls italics:
The last line shows that meaning and look are separate: the <strong> keeps its meaning while CSS styles it differently. The full range of weights (100 to 900) is covered on the CSS font-weight page.
Accessibility
Most screen readers do not change their voice for <strong> or <em> with default settings, so bold and italics are mainly visual cues. Anything a user must not miss (an error, a required field, a deadline) should be clear from the words themselves, not only from the style. Also avoid long passages in italics or bold: they are harder to read, especially for readers with dyslexia.
Common mistakes
- Using bold as a heading. A line of
<b>text above a section is not a heading to screen readers. Use<h2>or<h3>and style it. - Using
<strong>for styling. If nothing about the text is important, use<b>or CSS. - Making a whole paragraph bold. Emphasis works when it is rare. Bold one phrase, not the paragraph.
- Closing tags in the wrong order.
<b><i>x</i></b>, never<b><i>x</b></i>. - Old tags. The
<font>tag from old tutorials is obsolete. Use the tags above orfont-weight.
Frequently Asked Questions
How do I make text bold in HTML?
Wrap it in <strong> when the words are important (<strong>Warning:</strong>), or in <b> when you only want them to stand out without extra importance, such as a product name. Both display bold by default.
What is the difference between <strong> and <b>?
<strong> means the text is important, serious or urgent. <b> draws attention to text without implying importance, such as keywords in a summary. They look the same; the difference is meaning, which matters to screen readers, search engines and other developers.
How do I make text italic in HTML?
Use <em> for stress that changes the meaning of a sentence ("I did say that" with stress on "did"), and <i> for text in an alternate voice: foreign words, technical terms, ship names, thoughts. Both display in italics.
How do I make text bold and italic at the same time?
Nest the tags: <strong><em>text</em></strong>. Close them in the reverse order you opened them. With CSS, set both font-weight: bold and font-style: italic on one element.
Can I make text bold with CSS instead?
Yes: font-weight: bold (or 700) on any element. Use CSS when the bold is purely visual, like a button label or a table header style, and the HTML tags when the words themselves are important or emphasized.
