mozilla

Revision 79185 of <em>

  • Revision slug: HTML/Element/em
  • Revision title: em
  • Revision id: 79185
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

The HTML Emphasis Element (<em>) gives text emphasis, typically this is displayed in italics.

DOM Interface

This element implements the HTMLElement interface.

Implementation note: up to Gecko 1.9.2 inclusive, Firefox implements the HTMLSpanElement interface for this element.

Example

   <p>
   
       It is important to note that you <em>cannot</em> login 
       until you verify your account via the email sent to the address you provided.
   
   </p>

Result

It is important to note that you cannot login until you verify your account via the email sent to the address you provided.

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>? It produces the exact 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 of em than it does italics. This is because of 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.

See also

{{ HTML:Element_Navigation() }}

{{ languages( { "pl": "pl/HTML/Element/em" } ) }}

Revision Source

<p>The HTML Emphasis Element (<span style="font-family: Courier New;">&lt;em&gt;</span>) gives text emphasis, typically this is displayed in italics.</p>
<h3 class="editable">DOM Interface</h3>
<p>This element implements the <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> interface.</p>
<div class="note">
<p><strong>Implementation note: </strong>up to Gecko 1.9.2 inclusive, Firefox implements the <a href="/en/DOM/span" title="en/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface for this element.</p>
</div><h3 name="Example">Example</h3>
<pre class="eval">   &lt;p&gt;
   
       It is important to note that you &lt;em&gt;cannot&lt;/em&gt; login 
       until you verify your account via the email sent to the address you provided.
   
   &lt;/p&gt;
</pre>
<h4 name="Result">Result</h4>
<p>It is important to note that you <em>cannot</em> login until you verify your account via the email sent to the address you provided.</p>
<h3 name="Italics_vs._Emphasis">Italics vs. Emphasis</h3>
<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 &lt;em&gt;&lt;/em&gt; vs &lt;i&gt;&lt;/i&gt;? It produces the exact 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 of em than it does italics. This is because of 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>
<h3 name="See_also">See also</h3>
<ul> <li><a href="/en/HTML/Element/i" title="en/HTML/Element/i">HTML Italics Element</a></li>
</ul>
<p>{{ HTML:Element_Navigation() }}</p>
<p>{{ languages( { "pl": "pl/HTML/Element/em" } ) }}</p>
Revert to this revision