Emphasize Text and Change Meaning with the <em> Element

Semantic HTML Basics

Alex Zito
Semantic HTML

--

The <em> element marks text that is emphasized relative to its surrounding text. In english especially, there is a lot of semantic meaning contained in what you decide to emphasize.

<p>    <em>Plants</em> use photosynthesis, while animals have to eat to  generate energy.</p>

The default styling for em elements is italic text, like below, but this default behavior can be modified with CSS to fit your needs.

credit: https://unsplash.com/@electerious

Where to Use the <Em> Element

The <em> element is considered to be “phrasing” content, defined as “the text of the document” and can be used anywhere in the document body where phrasing content is expected. It is most commonly, but not always found as a child of a paragraph (<p> tag).

Why the <em> Element is Important

This tag is important because especially in English, emphasis can change meaning. Take this sentence:

“She isn’t flying to hawaii tomorrow”

If you emphasize the word “She”, then the sentence implies that she isn’t flying, but other people likely are flying to hawaii tomorrow.

--

--

Alex Zito
Semantic HTML

Software Developer + Product Manager. Interested in Travel, Culture, Economics and the Internet. Join Medium: https://tinycode.medium.com/membership