Using the HTML `<em>` Element for Semantic Emphasis: Improving Readability and Accessibility
Learn how to use the HTML `<em>` element to add semantic emphasis to text, improving both readability and accessibility. This tutorial explains the difference between `<em>` and ``, demonstrates its usage, and shows how to customize its appearance using CSS.
Using the HTML `<em>` Element for Emphasis
Understanding the `<em>` Element
The HTML `<em>` (emphasis) element is used to mark up text that you want to emphasize. This adds semantic meaning to your HTML, making your content easier for users and machines to understand. It is important to use the correct tags to convey the intended meaning. The browser typically renders emphasized text using italics, but you can customize the styling using CSS (Cascading Style Sheets). Screen readers often pronounce emphasized text with more stress, which improves accessibility for users who rely on them.
Using the `<em>` Element
To emphasize text, simply place it inside the opening and closing `<em>` tags.
Example: Basic Emphasis
<p>You <em>have</em> to hurry!</p>
Browser Support for `<em>`
The `<em>` element is supported by all major modern browsers.
Browser | Support |
---|---|
Chrome | Yes |
Edge | Yes |
Firefox | Yes |
Opera | Yes |
Safari | Yes |
Default Styling and CSS Customization
Most browsers render the `<em>` element with italic styling by default. However, you can customize this with CSS.
Example: Custom CSS for `<em>`
em {
font-style: italic;
font-weight: bold;
color: blue;
}