Text Formatting with <strong> and <em>

In this section of our HTML tutorial, we will focus on the <strong> and <em> elements, which are used to format and emphasize text in HTML documents. These elements allow you to make text bold and italicized, respectively, and are crucial for conveying meaning and visual styling.

Understanding Text Formatting

The <strong> Element

The <strong> element indicates text that should be strongly emphasized or made bold. It’s often employed to give the text a stronger visual emphasis or to denote important content.

The <em> Element

The <em> element is used to emphasize text by rendering it in italics. It’s commonly used to provide slight emphasis to text or to indicate that the text has an alternative voice or mood.

Basic Syntax

Here is the basic syntax for using the <strong> and <em> elements in HTML:

In this example, the <strong> element is used to make text bold and strongly emphasized, while the <em> element is used to italicize and emphasize the text.

Code Examples

Here are examples of using the <strong> and <em> elements in HTML:

Strongly Emphasized Text:

Emphasized Text:

Combining <strong> and <em>:

You can also combine the two elements for added emphasis:

Differences Between <strong>, <em>, <b>, and <i>

Although the <b> and <i> elements do exist in HTML5, they are primarily considered presentational or stylistic elements, and their use is discouraged in favor of more semantically meaningful elements and the use of CSS for styling.

  • <strong> and <em> are semantic elements that indicate the level of emphasis and importance.
  • <b> and <i> are primarily for styling purposes and don’t carry the same semantic meaning as <strong> and <em.

In general, use <strong> and <em> when you want to convey semantic meaning and importance in your text. Reserve <b> and <i> for cases where you need specific styling without implying strong or emphasized meaning.

Best Practices

  1. Semantic Meaning: When possible, choose <strong> and <em> to convey semantic meaning and importance in your text. These elements provide a clearer structure to your content and are beneficial for accessibility.
  2. Styling: Use <b> and <i> primarily for styling purposes. They are useful when you need to change the visual appearance of text without implying specific meaning or importance.
  3. Avoid <b> and <i> as CSS Properties: While <b> and <i> can be used to make text bold or italic, it’s generally recommended to use CSS properties like font-weight and font-style for styling. CSS provides more control and separation of concerns in your web development projects. For example, you can achieve bold text with CSS like this:

And italic text with CSS like this:

Separating content (HTML) from presentation (CSS) is a fundamental best practice in web development.

  1. Combine Carefully: If you need to both emphasize and style text, you can combine elements, but be mindful of overusing formatting. Clarity and readability should always be your top priorities.

Using HTML for semantic meaning and CSS for styling allows for cleaner and more maintainable code. It also ensures that your content is accessible and can adapt to different presentation styles.


The <strong> and <em> elements are essential tools for text formatting and emphasis in HTML. They allow you to make text bold and italicized, respectively, to convey meaning and enhance the visual presentation of your content. Whether you’re emphasizing important information or styling text for a specific context, these elements are valuable in web development. As you continue to create web pages, you’ll discover how <strong> and <em>, when combined with other HTML and CSS techniques, contribute to your content’s overall readability and impact.