<em>

  • Revision slug: HTML/Element/em
  • Revision title: em
  • Revision id: 79182
  • Created:
  • Creator: Ptak82
  • Is current revision? No
  • Comment /* link pl */

Revision Content

HTML Emphasis Element

<em>...</em> - The HTML Em element gives text emphasis, typically this is displayed in italics.

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 Italics Element

{{wiki.template('HTML:Element_Navigation')}}

{{ wiki.languages( { "pl": "pl/HTML/Elementy/em" } ) }}

Revision Source

<h2 name="HTML_Emphasis_Element"> HTML <i>Emphasis</i> Element </h2>
<p><b>&lt;em&gt;...&lt;/em&gt;</b> - The HTML Em element gives text emphasis, typically this is displayed in italics.
</p>
<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><p>See also: <a href="en/HTML/Element/i">HTML Italics Element</a>
</p><p>{{wiki.template('HTML:Element_Navigation')}}
</p>{{ wiki.languages( { "pl": "pl/HTML/Elementy/em" } ) }}
Revert to this revision