<em>

Definition

The HTML <em> tag is used to indicate emphasized text, which is typically displayed in italic font. The <em> tag is a semantic tag that represents text with increased importance or emphasis, and it can be used to highlight a word or phrase within a sentence or paragraph. The <em> tag can also be used in combination with other text-level semantic tags, such as strong, to further indicate the degree of emphasis or importance.

It is important to note that the <em> tag should not be used simply to apply italic styling to text for visual purposes. It should only be used to indicate semantic emphasis or importance.

Examples

The following code would display the word "important" in italic font:

<p>This is <em>important</em> information.</p>

Attributes

This element makes use of the global attributes.

Best Practices

• Use <em> to indicate semantic emphasis or importance of the text, rather than just for visual styling purposes.
• Use <em> sparingly and only when necessary, so as not to overuse or dilute its meaning.
• Use <em> in combination with other semantic tags, such as strong, to indicate greater degrees of emphasis or importance.
• Avoid using <em> for entire sentences or paragraphs, as this can be visually overwhelming and diminish the effectiveness of the tag.
• Make sure to properly close the <em> tag by using the closing </em> tag after the emphasized text.
• Use CSS styles to control the visual styling of the <em> tag, rather than relying on the default styling, in order to ensure consistency across different devices and browsers.
• Test the appearance and functionality of the <em> tag on various devices and browsers to ensure proper display and accessibility.
• Use the <title> attribute to provide additional information about the emphasized text, especially when the text itself may not fully convey its intended meaning.

Accessibility Considerations

• Semantics: Use the <em> tag only for text that needs to be emphasized or highlighted. Do not use it for text that needs to be italicized for visual design reasons.
• Contrast: Ensure that the emphasized text is sufficiently different in contrast from the surrounding text. This is important for users with low vision or color vision deficiencies.
• Screen Readers: Screen reader users should be able to identify the emphasized text. Therefore, ensure that the screen reader can announce the emphasized text using its default settings.
• Alternative text: Use the <alt> attribute to provide alternative text for images that have emphasized text in them.
• ARIA: Use ARIA attributes to provide additional information to assistive technologies. For example, <aria-label> can be used to provide a more descriptive label for the emphasized text.
• Testing: Test the website using a screen reader and other assistive technologies to ensure that the emphasized text is properly identified and announced.

Browser Compatibility