HTML <em> Tag
The HTML <em> tag marks stress emphasis, changing a sentence's meaning and how screen readers speak it. Syntax, accessibility, and examples.
The HTML <em> tag marks stress emphasis — the part of a sentence you would say with extra vocal stress, the way emphasis can shift a sentence's meaning. It is a semantic element: the italic rendering you see in browsers is just the default style, not the point of the tag.
Read these two sentences out loud and notice how the emphasis changes the meaning:
<p><em>Cats</em> are great pets.</p> <!-- Cats specifically, not other animals -->
<p>Cats are <em>great</em> pets.</p> <!-- how great they are -->Because <em> carries meaning rather than just appearance, it belongs to HTML's phrasing content — inline elements that mark up the structure and intent of running text.
<em> is not interchangeable with a CSS italic. Use <em> when the emphasis is part of what the text means; reach for font-style: italic only when you want slanted type with no change in meaning.
Why use <em> instead of CSS italics (accessibility)
The reason to choose <em> over visual styling is accessibility and semantics. <em> carries a defined meaning — stress emphasis — that the HTML specification says assistive technology should convey, and that meaning stays in the markup where tools, search engines, and future user agents can act on it. Plain italic text styled with CSS conveys nothing semantic: it is a purely visual effect. (In practice, today's mainstream screen readers do not yet change vocal stress for <em> by default, but the semantic distinction still matters and costs nothing.)
This is the key contrast with the <i> tag: <i> also renders italic by default, but it explicitly carries no stress emphasis. It is for text in an alternate voice or mood (technical terms, foreign phrases, taxonomic names, a thought), not for emphasizing meaning.
If you need to mark something as important rather than emphasized, use <strong> instead — <strong> signals strong importance, seriousness, or urgency, while <em> signals stress emphasis. The two are independent and can be combined.
Nesting <em> for stronger emphasis
Per the HTML specification, each level of nested <em> increases the degree of emphasis. This is useful when one emphasized word inside an already-emphasized phrase needs to stand out further:
<p><em>Please, <em>do</em> remember to call.</em></p>Here the whole phrase is emphasized, and the word "do" is emphasized one level more. Browsers still render every level in italic by default, but the nesting communicates the increasing emphasis level to assistive technology and to other tools that read the document structure.
Syntax
The <em> tag comes in pairs. The content is written between the opening (<em>) and closing (</em>) tags.
Example of the HTML <em> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>It is a normal paragraph</p>
<p>The important part of the text is <em>shown in italic</em>.</p>
</body>
</html>Result
Attributes
The <em> tag supports the Global Attributes and the Event Attributes.
Styling the <em> tag
Because the meaning lives in the tag, the appearance is entirely yours to control with CSS. The default italic is only a convention — you can restyle <em> for a given design while keeping the semantics and accessibility intact.
For example, in a context where italics clash with the rest of the page, you might present emphasis as bold red text instead:
<style>
.notice em {
font-style: normal; /* drop the default slant */
font-weight: bold;
color: #c0392b; /* draw the eye with color */
}
</style>
<p class="notice">You <em>must</em> save before closing the editor.</p>The word "must" still has stress emphasis for screen readers — only its visual rendering changed. This decoupling of meaning (<em>) from presentation (CSS) is exactly why the semantic tag is worth using.