---
title: '<em>: Элемент акцентирования'
slug: Web/HTML/Element/em
translation_of: Web/HTML/Element/em
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;em&gt;</code> элемент</strong> отмечает акцентируемый текст. Элемент <code>&lt;em&gt;</code> может быть вложенным, причем каждый уровень вложенности указывает на большую степень акцента.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td>
  </tr>
  <tr>
   <th scope="row">Разрешенный контент</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td>
  </tr>
  <tr>
   <th scope="row">Пропуск тегов</th>
   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
  </tr>
  <tr>
   <th scope="row">Разрешенные родители</th>
   <td>Любой элемент, который принимает <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
  </tr>
  <tr>
   <th scope="row">Разрешенные роли ARIA</th>
   <td>Любые</td>
  </tr>
  <tr>
   <th scope="row">Интерфейс DOM</th>
   <td>{{domxref ("HTMLElement")}} до Gecko 1.9.2 (Firefox 4) включительно Firefox реализует интерфейс {{domxref ("HTMLSpanElement")}} для этого элемента.</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибуты">Атрибуты</h2>

<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>

<h2 id="Примечания_по_использованию">Примечания по использованию</h2>

<p>Элемент <code>&lt;em&gt;</code> предназначен для слов, которые имеют подчеркнутый акцент по сравнению с окружающим текстом, который часто ограничивается словом или словами предложения и влияет на смысл самого предложения.</p>

<p>Обычно этот элемент отображается курсивом. Однако его не следует использовать просто для применения курсивного стиля; для этой цели используйте свойство CSS {{cssxref("font-style")}}. Используйте элемент {{HTMLElement("cite")}}, чтобы пометить название произведения (книги, пьесы, песни и т. д.). Используйте элемент {{HTMLElement("i")}}, чтобы пометить текст в альтернативном тоне или настроении, который охватывает многие распространенные ситуации курсива, такие как научные имена или слова на других языках. Используйте элемент {{HTMLElement("strong")}}, чтобы пометить текст, который имеет большее значение, чем окружающий текст.</p>

<h3 id="&lt;_i>_против_&lt;em>">&lt; i&gt; против &lt;em&gt;</h3>

<p>Новые разработчики часто путаются, видя несколько элементов, которые дают аналогичные результаты. <code>&lt;em&gt;</code> и <code>&lt;i&gt;</code> являются общим примером, поскольку они оба выделяют текст курсивом. Какая разница? Что вы должны использовать?</p>

<p>По умолчанию визуальный результат тот же. Однако смысловое значение здесь другое. Элемент <code>&lt;em&gt;</code> представляет ударение на его содержании, в то время как элемент <code>&lt;i&gt;</code> представляет текст, который отличается от обычной прозы, например, иностранное слово, изречения вымышленного персонажа или когда текст ссылается на определение слова вместо представления его семантического значения. (Для названия произведения, например названия книги или фильма, следует использовать <code> &lt;cite&gt;</code>.)</p>

<p>Это означает, что правильное использование зависит от ситуации. Ни для чисто декоративных целей, это то, для чего предназначен CSS-стиль.</p>

<p>Примером для <code>&lt;em&gt;</code> может быть: -«Просто <em>сделай</em> это!», или: «Мы <em>должны</em> были что-то с этим сделать». Человек или программа, читающие текст, будут произносить слова, выделенные курсивом, с ударением, используя словесное ударение.</p>

<p>Примером для <code>&lt;i&gt;</code> может быть: <em>«Королева Мэри</em> отплыла прошлой ночью». Здесь нет никакого дополнительного акцента или важности на слове "Королева Мэри". Просто указывается, что речь идет не о королеве по имени Мария, а о корабле по имени <em>Королева Мария</em>. Другим примером для <code>&lt;i&gt;</code> может быть: «Слово <em>‘the’ </em> это артикль».</p>

<h2 id="Пример">Пример</h2>

<p>Элемент <code>&lt;em&gt;</code> часто используется для указания неявного или явного контраста.</p>

<pre class="brush: html">&lt;p&gt;
  В HTML 5, что ранее называлось
  контентом &lt;em&gt;уровня блока&lt;/em&gt; теперь называется
  контентом &lt;em&gt;потока&lt;/em&gt;.
&lt;/p&gt;</pre>

<h3 id="Результат">Результат</h3>

<p>{{ EmbedLiveSample('Пример', '', '', '', 'Web/HTML/Element/em') }}</p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</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="Браузерная_совместимость">Браузерная совместимость</h2>

<div class="hidden">Таблица совместимости на этой странице создана из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull-запрос.</div>

<p>{{Compat("html.elements.em")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{HTMLElement("i")}}</li>
</ul>