Тег em в html – Теги em и i, акцентирование внимания — Разметка текста — HTML Academy

Leave a Comment / Html / By /

Как использовать основные теги HTML для SEO — STRONG, B, EM, I

До недавнего времени язык HTML предлагал использовать теги и для написания текста жирным или курсивом. С появлением новой версии языка разметки HTML5, появились дополнительные теги, которые образовали близкие по своему предназначению пары: <STRONG> и <B>, <EM> и <I>.

Их появление обусловлено развитием поисковых систем, которые сегодня стремятся понимать смысл того, что размещено на странице. Создатели предложили различать HTML-теги для текста, имеющие семантическое и визуальное форматирование. Теперь с помощью тегов визуального форматирования (<B>, <I>) мы выделяем часть текста визуально, а теги семантического форматирования (<STRONG>, <EM>) передают эмоции.

Визуально вы никогда не сможете различить, какой тег использован на странице. Жирный шрифт в HTML можно сделать и с помощью <STRONG>, и с помощью <B>, а курсив — и через <EM>, и через <I>. Тогда зачем же так усложнять?

Разгадка есть. Если включить голосовое озвучивание текста, то слова и фразы, выделенные тегами <STRONG> и <EM>, компьютер прочтет с особо эмоциональной интонацией и громкостью. Вся суть заключается в этом, так как семантическое форматирование помогает поисковым системам понять контекст написанного (смысл).

  • <STRONG> — тег семантического форматирования. Он передает высокую важность выделенного текста. Визуально выглядит жирнее, чем основной текст.
  • <B> — тег визуального форматирования. Просто выделяет текст жирным и не придает ему особой важности.
  • <EM> — тег семантического форматирования. Предназначен для передачи большей экспрессивности слова или фразы относительно остального текста. Визуально слово/фраза отображаются курсивом.
  • <I> — тег визуального форматирования. Используется для выделения курсивом, но не акцентирует внимание на слове или фразе.
В спецификации W3C все теги HTML размещены в двух разделах. и находятся в разделе «Структурированный текст». Это значит, что они определяют внешний вид, а также учитываются специальными программами, которые предназначены для изменения интонации и громкости.

Внешний вид необязательно будет жирным или курсивом. Он может регулироваться стилями CSS, но по-прежнему передавать браузеру значение большей важности выделенного тегами текста, относительно другого. <B> и <I> вынесены в раздел «Форматирование» и указывают браузеру, как отобразить фрагмент текста.

Теги HTML — Тег

Описание

Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

Синтаксис

<em>Текст</em>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

font-style

Пример. Использование тега <em>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег EM</title>
 </head>
 <body>
  <p><em>Lorem ipsum dolor sit amet</em></p>
  <p><b><em>Lorem</em></b> ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
  aliguam erat volutpat. <em>Ut</em> wisis enim ad minim veniam, quis
  nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
  consequat.</p>
 </body>
</html>

Примечание

Следует отметить, что теги <i> и <em>, также как <b> и <strong>, несмотря на сходство результата, являются не совсем эквивалентными и заменяемыми. Первый тег <i> — является тегом физической разметки и устанавливает курсивный текст, а тег <em> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <i> и <em>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

Спецификация ?

✖

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры: Настольные Мобильные     ?

Internet ExplorerChromeOperaSafariFirefox
31211
AndroidFirefox MobileOpera MobileSafari Mobile
1161
✖

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Строчные элементы. | Текст.

seodon.ru | Теги HTML — Тег EM

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Тег <EM> используется для выделения текста курсивом. Причем, выделять можно как обычный текст, так и, допустим, внутри ссылок.

В HTML выделять текст курсивом можно не только с помощью тега <EM>, но и тега <I>. Обычные визуальные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) могут акцентировать текст внутри <EM>, например определенными интонациям.

Атрибуты

Личные атрибуты: нет.

Общие атрибуты:

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша
    Tab    ).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: текст (строки).

Модель тега: inline (встроенный, уровня строки).

Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Открывающий тег: необходим. Закрывающий тег: необходим.

Синтаксис

<em>текст</em>

Пример HTML: применение тега EM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Применение тега EM</title>
 </head>
 <body>
  <p><em>Курсив — это типографский шрифт близкий к рукописному,
         с наклоном вправо. Курсив используют для выделения
         каких-либо слов или предложений в тексте.</em></p>
 </body>
</html>

Результат примера

Результат. Применение тега EM.

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

Поддержка браузерами

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

Тег EM

Тег EM предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

Синтаксис
<em>Текст</em>

Закрывающий тег
Обязателен.

Параметры


Нет.

Аналог CSS
font-style: italic

Пример. Использование тега EM

<html>
<body>
<em>Lorem ipsum dolor sit amet</em><br>
<b><em>Lorem</em></b> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <em>Ut</em> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Результат примера

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Примечание
Следует отметить, что теги i и em, также как b и strong, несмотря на сходство результат, являются не совсем эквивалентными и заменяемыми. Первый тег i — является тегом физической разметки и устанавливает курсивный текст, а тег EM — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов I и EM, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

Материал взят с сайта htmlbook.ru

em — Xiper.net

Автор: Евгений Рыжков Дата публикации: 10.01.2009

Тег <em> (англ. emphasis — акцент) — тег-контейнер, используется для акцентирования внимания.
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<em>...</em>

Атрибуты

Основные Вспомогательные События

class определяет имя используемого класса
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
id уникальный идентификатор
lang определяет язык отображаемого документа
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style задает встроенную таблицу стилей
title всплывающая подсказка

Пример

Очень важно придерживаться стандартов, разработанных <em>консорциумом W3C</em>

Рекомендации по использованию

  • закрывающий тег обязателен (</em>)
  • может содержать CDATA и строчные элементы
  • обязательных атрибутов нет
  • многие браузеры по умолчанию отображают содержимое тега <em> курсивом
  • является тегом логической разметки, подчеркивает важность помеченного текста, имеет значение для поисковых систем
  • голосовые браузеры могут менять параметры синтеза голоса, такие как уровень громкости, высота и диапазон
  • аналог CSS — font-style: italic (CSS свойство не передает важности выделенного фрагмента для поисковых машин)

Твой код:
<html> <head> <title></title> </head> <body> <p>Очень важно придерживаться стандартов, разработанных <em>консорциумом W3C</em></p> </body> </html> Сделай код и жми тут

Результат:
большой полигон

По теме

Тег HTML термин | Справочник тегов HTML GuruWeba

Тег <dfn> в HTML указывает, что текст внутри является термином.

При использовании HTML тега <dfn>, в родительском теге должно находится определение или объяснение термина, указанного в <dfn>.

Иногда содержимое тега <dfn> или его часть является аббревиатурой, в этом случае можно использовать тег <abbr> внутри тега термина <dfn> (см. примеры ниже).

Выделять тегом <dfn> все вхождения термина в тексте некорректно. Достаточно выделить термин один раз при определении.

Браузеры обычно выделяют термин внутри тега <dfn> курсивом, однако не следует использовать <dfn> с целью написания текста наклонным шрифтом. Для это цели используйте тег <em> — для акцентирования внимания, «подчеркивания» фрагмента текста, либо тег <i> — для изменения стиля без логического выделения.

Все виды выделения текста описаны в статье: Теги форматирования текста в HTML.

Синтаксис

<dfn>термин</dfn>

Примеры использования тега <dfn>

Допускается использование любого из рассмотренных ниже вариантов. Использование глобального атрибута title и тега <abbr> не является обязательным.

Отображение в браузере

Тег — элемент разметки языка HTML.

HTML — это язык разметки веб-страниц.

CERN — крупнейшая в мире лаборатория физики высоких энергий.

Использование в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Тег термина dfn</title>
</head>
<body>
<p><dfn>Тег</dfn> - элемент разметки языка HTML.</p>
<p><dfn title="Hypertext Markup Language">HTML</dfn> - это язык разметки веб-страниц.</p>
<p><dfn><abbr title="Conseil Européen pour la Recherche Nucléaire">CERN</abbr></dfn> - крупнейшая в мире лаборатория физики высоких энергий.</p>
</body>
</html>

Поддержка браузерами

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *