---
title: <em>
slug: Web/HTML/Element/em
translation_of: Web/HTML/Element/em
---
<h2 id="Übersicht">Übersicht</h2>

<p>Das HTML Element<em> Emphasis</em> <strong>&lt;em&gt;</strong> stellt das eingeschlossene Wort <em>kursiv</em> dar. Wenn das <strong><code>&lt;em&gt;</code></strong> ein Nachfahr von <em>&lt;strong&gt;</em> ist, wird dessen Text sowohl <em>kursiv</em> als auch <strong>fett</strong> dargestellt.</p>

<div class="note"><strong>Anmerkung:</strong> Normalerweise wird dieses Element in kursiv Schrift angezeigt. Sie können mit CSS jeden Text fett oder kursiv ausgeben und auch die Standartformatierung eines Browsers für die Elemente wie &lt;strong&gt; und &lt;em&gt; überschreiben. Verwenden Sie &lt;cite&gt; Elemente für Zitate oder Quellenverweise. Man nimmt es z.B. für Titel oder Bücher, Namen eines Lieds oder ein Konzert, Theaterstück usw. ; &lt;cite&gt; ist nur für die Quelle gedacht, nicht für das, was Sie daraus zitieren. Verwenden Sie &lt;strong&gt; Element um einen wichtigen Text zu kennzeichnen,  während &lt;em&gt; die Betonung vermittelt. Sie verwenden sie je nach inhaltlicher Anforderung einzeln oder zusammen.</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Inhaltsverzeichnis</th>
   <td>fließender Inhalt, gestaltender Inhalt, eindeutiger Inhalt</td>
  </tr>
  <tr>
   <th scope="row">Nicht erlaubter Inhalt</th>
   <td>Ausdrucksinhalt</td>
  </tr>
  <tr>
   <th scope="row">Tag wegfall</th>
   <td>keiner ; kleine Anmerkung= Tag in diesem Sinne heisst "Schlagwort", im Zusammenhang mit HTML belasse ich das Wort TAG im Orginalen, zum besseren Verständnis.</td>
  </tr>
  <tr>
   <th scope="row">Erlaubtes Elternelement</th>
   <td>
    <p>Alle Elemente die Inhaltsformulierung akzeptieren</p>
   </td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implementiert die {{domxref("HTMLSpanElement")}} Schnittstelle für dieses Element.</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p>Dieses Element beinhaltet nur die  <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Eigenschaften</a>.</p>

<h2 id="Example">Example</h2>

<p><span id="result_box" lang="de"><span>Das Element &lt;em&gt; wird oft verwendet, um einen impliziten oder expliziten Kontrast anzugeben.</span></span></p>

<pre class="brush: html">&lt;p&gt;
  In HTML 5, what was previously called &lt;em&gt;blockorientiert&lt;/em&gt; content is now called &lt;em&gt;dynamisch&lt;/em&gt; content.
&lt;/p&gt;</pre>

<h3 id="Result" name="Result">Result</h3>

<p><span id="result_box" lang="de"><span>In HTML 5 wird der Inhalt, der zuvor als <em>blockorientiert</em>er-Inhalt bezeichnet wurde, wird jetzt als <em>dynamisch</em>er-Inhalt bezeichnet.</span></span></p>

<h2 id="&lt;i>_vs._&lt;em>">&lt;i&gt; vs. &lt;em&gt;</h2>

<p><span id="result_box" lang="de"><span>Es ist für neue Entwickler oft verwirrend, warum es so viele Elemente gibt, um die Betonung auf etwas Text auszudrücken.</span> <span>&lt;i&gt; und &lt;em&gt; sind vielleicht eine der häufigsten.</span> <span>Warum sollten Sie &lt;em&gt; &lt;/ em&gt; vs &lt;i&gt; &lt;/ i&gt; verwenden?</span> <span>Sie produzieren genau das gleiche Ergebnis, nicht wahr?</span></span></p>

<p><span id="result_box" lang="de"><span>Nicht genau.</span> <span>Das visuelle Ergebnis ist standardmäßig das gleiche - beide Tags(<em>Schlagwörter</em>) rendern den Inhalt kursiv.</span> <span>Aber die semantische Bedeutung ist anders.</span> <span>Das &lt;em&gt; -Tag stellt die Betonung des Inhalts dar, während das &lt;i&gt; -Tag Text darstellt, der von der normalen Prosa abgesetzt wird, wie z. B. der Name eines Films oder Buchs, ein Fremdwort oder wenn sich der Text auf die</span> <span>Definition eines Wortes statt seiner semantischen Bedeutung.</span></span></p>

<p><span id="result_box" lang="de"><span>Ein Beispiel für &lt;em&gt; könnte lauten: "Just <em>do</em> it already!", oder: "</span></span>We <em>had</em> to do something about it<span lang="de"><span>".</span> <span>Eine Person oder Software, die den Text liest, würde die Wörter in Kursivschrift mit Betonung aussprechen.</span></span></p>

<p><span id="result_box" lang="de"><span>Ein Beispiel für &lt;i&gt; könnte sein: "</span></span>The <em>Queen Mary</em> sailed last night<span lang="de"><span>".</span> <span>Hier gibt es keine zusätzliche Betonung oder Bedeutung für das Wort "Queen Mary".</span> <span>Es wird lediglich angedeutet, dass es sich nicht um eine Königin namens Mary handelt, sondern um ein Schiff namens Queen Mary.</span> <span>Ein weiteres Beispiel für &lt;i&gt; könnte sein: "</span></span>The word <em>the</em> is an article<span lang="de"><span>"</span></span></p>

<p> </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> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;em&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<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 Referenz</div>