HTML <em> Tag
The <em> tag in HTML is used to emphasize text. It indicates that the enclosed text has semantic importance and should be pronounced with added stress by screen readers. This often, but not always, renders the text in italics in a browser.
Syntax
<em>emphasized text</em>
Attributes
The <em> tag supports only the Global Attributes in HTML.
| Attribute | Value | Description |
|---|---|---|
| class | classname | Specifies one or more class names for an element (refers to a class in a style sheet) |
| id | idname | Specifies a unique id for an element |
| style | style_definition | Specifies an inline CSS style for an element |
| title | text | Specifies extra information about an element |
| hidden | hidden | Specifies that an element should be hidden |
| data-* | any | Used to store custom data private to the page or application |
| accesskey | character | Specifies a keyboard shortcut to access an element |
| contenteditable | true/false | Specifies if the content of an element is editable |
| dir | ltr/rtl/auto | Specifies the text direction for the content in an element |
| draggable | true/false/auto | Specifies if an element is draggable |
| dropzone | copy/move/link | Specifies what happens when a dragged item is dropped on an element |
| lang | language_code | Specifies the language of the element's content |
| spellcheck | true/false | Specifies if the element's content should have spellcheck enabled |
| tabindex | number | Specifies the tab order of an element |
| translate | yes/no | Specifies if the text in an element should be translated |
Example
<p>This is a <em>very important</em> point to remember.</p>
More Examples
Example 1: Emphasizing Specific Words
<p>It's <em>crucial</em> that you back up your data <em>regularly</em>.</p>
In this example, the words "crucial" and "regularly" are emphasized to draw the reader's attention to these key points.
Example 2: Using <em> within Headings
<h1>Important Notice: <em>Meeting Rescheduled</em></h1>
<p>Please note the date has changed.</p>
Using <em> within a heading can emphasize parts of the title that need special attention.
Example 3: Emphasizing Actions
<p>To activate, you need to <em>click</em> the button.</p>
Here, the verb 'click' is emphasized to guide the user on what action is required.
Example 4: Nested emphasis
<p>He whispered, "<em>I think it's <em>very</em> important</em>".</p>
Here the text "I think it's very important" is emphasized and the word very is even more stressed.
Browser Support
The <em> tag is supported by all modern browsers.
| Browser | Supported |
|---|---|
| Chrome | Yes |
| Edge | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
Notes and Tips
- While
<em>often renders in italics visually, its primary purpose is to provide semantic emphasis, not just visual styling. - Avoid using
<em>purely for italics; if you need only italics for styling, use CSS'sfont-style: italic. - Screen readers will generally pronounce emphasized text differently, which helps users who rely on them understand the importance of specific text.
- Overusing the
<em>tag can diminish its effectiveness, so use it judiciously for true emphasis. - The
<em>tag is an inline element, meaning it does not start a new line and only takes up the width it needs. - Always test your use of
<em>with screen readers to ensure the experience is as intended for all users.
