<em>

  • Revision slug: HTML/Element/em
  • Revision title: <em>
  • Revision id: 347727
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML <em> element (or HTML Emphasis Element) marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

Usage Note: Typically this element is displayed in italic type. However, it should not be used simply to apply italic styling; use the {{HTMLElement("i")}} element, or CSS styling for that purpose. Use the {{HTMLElement("cite")}} element to mark the title of a work (book, play, song, etc.); it is also typically styled with italic type, but carries different meaning. Use the {{HTMLElement("strong")}} element to mark text that has greater importance than surrounding text.

Usage context

Attributes

This element only includes the global attributes.

Example

The <em> element is often used to indicate an implicit or explicit contrast.

<p>
  In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>

Result

In HTML 5, what was previously called block-level content is now called flow content.

Italics vs. emphasis

It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. Italics and emphasis are perhaps one of the most common. Why use <em></em> vs <i></i>? They produce exactly the same result right?

Not exactly: emphasis is a logical state, and italics is a physical state. Logical states separate presentation from the content, and by doing so allows for it to be expressed in many different ways, perhaps instead of rendering some text as italics you want to render it red, or a different size, or underlined, or even bold. It makes more sense to change the presentational properties for <em> than it does for italics. This is because italics is a physical state; there is no separation of presentation and content, making italics do anything other than italicize text would be confusing and illogical.

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-em-element.html#the-em-element', '<em>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}} {{Spec2('HTML4.01')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}

See also

  • {{HTMLElement("i")}}
{{HTML:Element_Navigation}}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;em&gt;</code> element</strong> (or <em>HTML Emphasis Element</em>) marks text that has stress emphasis. The <code>&lt;em&gt;</code> element can be nested, with each level of nesting indicating a greater degree of emphasis.</p>
<div class="note">
  <strong>Usage Note:</strong> Typically this element is displayed in italic type. However, it should not be used simply to apply italic styling; use the {{HTMLElement("i")}} element, or CSS styling for that purpose. Use the {{HTMLElement("cite")}} element to mark the title of a work (book, play, song, etc.); it is also typically styled with italic type, but carries different meaning. Use the {{HTMLElement("strong")}} element to mark text that has greater importance than surrounding text.</div>
<h2 id="Usage_context">Usage context</h2>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> {{todo}}<a href="/en-US/docs/HTML/Content_categories#Flowing_content" title="HTML/Content_categories#Phrasing_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content</li>
  <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>.</li>
  <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
  <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface for this element.</li>
</ul>
<h2 id="Attributes">Attributes</h2>

<p>This element only includes the <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p>

<h2 id="Example">Example</h2>
<p>The &lt;em&gt; element is often used to indicate an implicit or explicit contrast.</p>
<pre class="brush: html">
&lt;p&gt;
  In HTML 5, what was previously called &lt;em&gt;block-level&lt;/em&gt; content is now called &lt;em&gt;flow&lt;/em&gt; content.
&lt;/p&gt;</pre>
<h3 id="Result" name="Result">Result</h3>
<p>In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.</p>
<h2 id="Italics_vs._emphasis">Italics vs. emphasis</h2>
<p>It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. Italics and emphasis are perhaps one of the most common. Why use <code>&lt;em&gt;&lt;/em&gt;</code> vs <code>&lt;i&gt;&lt;/i&gt;</code>? They produce exactly the same result right?</p>
<p>Not exactly: emphasis is a logical state, and italics is a physical state. Logical states separate presentation from the content, and by doing so allows for it to be expressed in many different ways, perhaps instead of rendering some text as italics you want to render it red, or a different size, or underlined, or even bold. It makes more sense to change the presentational properties for <code>&lt;em&gt;</code> than it does for italics. This is because italics is a physical state; there is no separation of presentation and content, making italics do anything other than italicize text would be confusing and illogical.</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'the-em-element.html#the-em-element', '&lt;em&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;em&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{HTMLElement("i")}}</li>
</ul>
<div>
  {{HTML:Element_Navigation}}</div>
Revert to this revision