The <strong> & <em> elements
The <strong> tag marks text that is important, serious or urgent, and browsers show it in bold. The <em> tag marks stress emphasis, the word you would say with extra weight when reading aloud, and browsers show it in italics. Both carry meaning that screen readers and search engines can use, unlike purely visual styling.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, palpable content |
| Content model | Phrasing content (text and other inline elements) |
| Tag omission | Neither the start nor the end tag can be omitted |
| Permitted parents | Any element that accepts phrasing content |
| DOM interface | HTMLElement (both) |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| — | Both elements accept only the global attributes. |
Common examples
A warning that must not be missed
<strong> marks text that is important, serious or urgent.
Changing the meaning with emphasis
<em> marks the word you would stress when speaking — and moving it changes the meaning.
Both together
You can combine them: important text that also has a stressed word.
Changing how they look
Bold and italic are only the default look. CSS can restyle them while the meaning stays.
<strong> vs <em>
Both add meaning, but different kinds. <strong> says “this is important” — a warning, a key fact, a deadline. <em> says “stress this word” — the emphasis you would put on it when reading aloud, which can change what a sentence means.
A good test: if you are pointing out something the reader must notice, use strong. If you are changing the tone of a sentence, use em. If you only want bold or italic for looks, use CSS or the <b> and <i> tags instead.
| <strong> | <em> | |
|---|---|---|
| Meaning | Importance, urgency | Stress emphasis |
| Default style | Bold | Italic |
| Example | Warnings, key facts | A stressed word |
Common mistakes to avoid
- Using strong for headings. A bold line is not a heading; use <h2>–<h6> so the page has a real outline.
- Bolding everything. When half a paragraph is strong, nothing stands out any more.
- Using em for titles of books or films. Those are titles, not stress — use <cite>.
- Using strong to make text look bold in a design. If there’s no extra importance, use CSS
font-weight.
Accessibility & SEO tips
- Most screen readers don’t change their voice for strong or em, so never rely on emphasis alone to carry a warning — put the word “Warning:” or “Important:” in the text too.
- Search engines may give a little extra weight to text in strong, but it’s a tiny signal — keyword-bolding doesn’t improve rankings and makes text harder to read.
- Use emphasis sparingly so that it keeps working when it really matters.
- Think about how the sentence sounds when read aloud: if you would raise your voice or slow down on a word, that word may deserve em or strong; if not, leave it plain.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.
Tutorials: How to change the font, How to change text color