Тег em в html: Тег | htmlbook.ru

Содержание

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

26718

How-to – Читать 6 минут

Прочитать позже

ЧЕК-ЛИСТ: КОНТЕНТНАЯ ЧАСТЬ → ИСПРАВЛЕНИЕ

Теги <STRONG>, <B>, <EM>, <I> следует использовать для визуального форматирования текста на странице сайта. Они необходимы для расстановки смысловых и зрительных акцентов. Неправильное использование тегов часто вводит читателя или поисковую систему в заблуждение. Почему? Разберемся в этой статье.

HTML — это язык разметки гипертекста. С его помощью мы сообщаем браузеру, какие элементы веб-страницы ему предстоит отобразить. Если ранее он отображал только визуальные элементы и текст, то сегодня язык HTML способен передавать и смысловую нагрузку наполнения страницы. Для этого разработчики используют специальные элементы для форматирования текста.

Текст форматируется по трем причинам:

Чтобы акцентировать внимание читателя на определенном слове или фразе.

Чтобы акцентировать внимание поисковых роботов и помогать им понять смысл того, что размещено на странице.

Чтобы создавать семантически правильный код, согласно требованиям W3C (World Wide Web Consortium).

Значение и отличия тегов

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

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

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

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

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

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

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

    Какой тег лучше использовать с точки зрения SEO?

    Со стороны поисковых систем нет существенных указаний, как использовать основные теги HTML для оптимизации страниц. Сотрудники Google отрицают какую-либо разницу и разрешают использовать любые из них. Тем не менее трансформация алгоритмов дает повод усомниться.

    Миссия поисковых систем — предоставить релевантный результат в ответ на запрос пользователя. Для этого они пытаются понять смысл того, что вы публикуете на своих страницах. Использование семантических тегов упрощает эту задачу. Они обращают внимание поисковых роботов на слова и фразы, которые помогают им определить, к какому запросу, вероятнее всего, принадлежит страница.

    Однако существуют рекомендации W3C:

    В HTML5 тег <STRONG> используйте для особо важных фрагментов. Это наиболее актуально:

    • в заголовке или в названии раздела;
    • в части текста, который имеет особое значение, относительно другого текста;
    • чтобы выделить важную информацию, уведомить читателя о чем-то;
    • чтобы обратить внимание читателя прежде, чем он прочтет остальную информацию на странице.

    Тег <B> используйте для выделения:

    • ключевых слов;
    • имен и названий;
    • призыва к действию.

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

    Задано предложение: «Кошки — милые животные». В зависимости от того, где поставлен тег <EM> изменится смысл.

    «<EM>Кошки</EM> — милые животные» — если кто-то утверждает, что милы другие животные.

    «Кошки — <EM>милые</EM> животные» — Если кто-то утверждает, что кошки — противные животные.

    «Кошки — милые <EM>животные</EM>» — Если кто-то утверждает, что кошки — милые овощи.

    Если делать смысловой акцент не надо, используйте тег <I>. Он уместен для выделения цитаты, фразы, обозначения и т. п.

    Заключение

    Если вы хотите выделить ключевые слова, несущие смысл — используйте тег <STRONG> или <EM>. Не используйте эти теги HTML для типовых фраз, например, «10% скидка», «распродажа складских остатков». Выделяйте их с помощью тегов <B> и <I>.

    Избегайте вложений одинаковых тегов: <em><i>фраза или слово</i></em>. Поисковые системы воспринимают такие конструкции как спам и переоптимизацию. Ориентируйтесь на официальные рекомендации W3С.

    Стоит ли менять старые теги на сайте, согласно новым рекомендациям? Скорее всего, нет. Это заберет у вас слишком много времени, и даст минимум результата в долгосрочной перспективе.

    » title = «Как и в каких случаях использовать HTML-теги STRONG, B, EM, I 16261788165787» />

    «Список задач» — готовый to-do лист, который поможет вести учет
    о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.

    Начать работу со «Списком задач»

    Serpstat — набор инструментов для поискового маркетинга!

    Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.

    Набор инструментов для экономии времени на выполнение SEO-задач.

    Получить бесплатный доступ на 7 дней

    Оцените статью по 5-бальной шкале

    4.58 из 5 на основе 11 оценок

    Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

    Кейсы, лайфхаки, исследования и полезные статьи

    Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

    Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

    Поделитесь статьей с вашими друзьями

    Вы уверены?

    Спасибо, мы сохранили ваши новые настройки рассылок.

    Сообщить об ошибке

    Отменить

    HTML тег

    onplayСкрипт викликається коли медіа дані готові почати відтворення.
    onafterprintСкрипт виконується тільки після як документ надрукований.
    onbeforeprintСкрипт виконується перед тим, як документ надрукований.
    onbeforeunloadСкрипт виконується коли документ ось-ось буде вивантажений
    onhashchangeСкрипт виконується коли там відбулися зміни до частини якоря в URL
    onloadВикликається після того як завантаження елемента завершене.
    onmessageСкрипт виконується коли викликане повідомлення.
    onofflineСпрацьовує коли браузер починає працювати в автономному режимі
    ononlineСпрацьовує коли браузер починає працювати в режимі онлай.
    onpagehideСкрипт виконується коли користувач переходить на іншу сторінку сторінку.
    onpageshowСкрипт виконується коли користувач заходить на сторінку.
    onpopstateСкрипт виконується коли змінено історію одного вікна.
    onresizeСкрипт виконується, коли розмір вікна браузера змінюється.
    onstorageСкрипт виконується, коли вміст Web Storage оновлюється.
    onunloadВикликається, коли сторінка розвантажена, або вікно браузера було зачинено.
    onblur Скрипт виконується, коли елемент втрачає фокус.
    onchangeВикликається в той момент, коли значення елемента змінюється.
    oncontextmenuСкрипт виконується коли викликається контекстне меню.
    onfocusВикликається в той момент, коли елемент отримує фокус.
    oninputСкрипт викликається коли користувач вводить дані поле.
    oninvalidСкрипт виконується, коли елемент недійсний.
    onresetВикликається, коли натискається у формі кнопка типу Reset.
    onsearchВикликається, коли користувач щось пише в поле пошуку (для &lt;input type=&quot;search&quot;&gt;)
    onselectВикликаєтсья після того як будь-який текст був обраний в елементі.
    onsubmitВикликається при відправленні форми.
    onkeydownПодія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
    onkeypressВикликається коли корисрувач натиснув на клавішу.
    onkeyupВикликається коли користувач відпускає клавішу.
    ondblclickВиникає при подвійному клацанні ЛКМ на елементі.
    ondragПеріодично викликається при операції перетягування.
    ondragendВикликається коли користувач відпускає перелягуваний елемент.
    ondragenter Викликається, коли перетягуваний елемент входить в цільову зону.
    ondragleaveВикликається, коли перетягуваний елемент виходть з зони призначення.
    ondragoverВикликається, коли перетягуваний елемент знаходиться в зоні призначення.
    ondragstartВикликається, коли користувач починає перетягувати елемент, або виділений текст.
    ondropВикликається, коли перетягуваний елемент падає до зони призначення.
    onmousedownВикликається, коли користувач затискає ЛКМ на елементі.
    onmousemoveВикликається, коли курсор миші переміщається над елементом.
    onmouseout
    Викликається, коли курсор виходить за межі елемента.
    onmouseoverВиконується, коли курсор наводиться на елемент.
    onmouseupВикликається, коли користувач відпускає кнопку миші.
    onscrollВикликається при прокручуванні вмісту елемента (чи веб-сторінки).
    onwheelВикликається, коли користувач прокручує коліщатко миші.
    oncopyВикликається, коли користувач копіює вміст елемента.
    oncutВикликається, коли користувач вирізає вміст елемента.
    onpasteВикликається, коли користувач вставляє вміст в елемент.
    onabortВиконується при перериванні якоїсь події.
    oncanplayСкрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
    oncanplaythroughСкрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
    oncuechangeСкрипт виконується коли змінюється кий в &lt;track&gt; елемента
    ondurationchangeВикликається коли змінюється довжина медіа файлу.
    onemptiedВикликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
    onendedВикликається коли медіа елемент повністю відтворив свій зміст.
    onshowВикликається, коли елемент &lt;menu&gt; буде відображено як контекстне меню.
    onloadedmetadataСкрипт виконується коли метадані (розміри чи тривалість) завантажуються.
    onloadeddataВикликається коли медіа данні завантажено.
    onloadstartВикликається коли браузер тільки починає завантажувати медіа дані з сервера.
    onpauseВикликається коли відтворення медіа даних призупинено.
    onplayingВикликається коли розпочато відтворення медіа даних.
    onprogressПодія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
    onratechange
    Викликається коли змінюється швидкість відтворення медіа даних.
    onseekedВикликається коли атрибут seeked у тега audio або video змінює значення з true на false.
    onseekingВикликається коли атрибут seeking у тегів audio або video змінює значення з false на true
    onstalledСкрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
    onsuspendСкрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
    ontimeupdateВикликається коли змінилася позиція відтворення елемента &lt;audio&gt; або &lt;video&gt;.
    onvolumechangeВикликається коли змінюється гучність звуку.
    onwaitingВикликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
    ontoggleВикликається, коли користувач відкриває або закриває елемент &lt;details&gt;.
    onerrorВикликається якщо при завантаженні елемента сталася помилка.
    onclickПодія викликається коли користувач клацає ЛКМ по елементу.

    Разработка веб-приложений: учебное пособие

    2. Язык гипертекстовой разметки

    • История развития HTML и CSS
    • Общая структура HTML
    • Структура HTML-документа
    • Формирование текста
    • Организация ссылок
    • Списки
    • Графика
    • Таблицы
    • Мультимедиа

    2.
    4. Форматирование текста

    Для форматирования текста HTML-документов предусмотрена целая группа тегов, которую можно условно разделить на теги логического и физического форматирования.

    Теги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код (тег <code>), цитата (тег <сitе>), аббревиатура (тег <abbr>) и т. д. Структурная разметке не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка и называется логической. Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию.

    Теги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера (согласно предпочтениям автора документа).

    Для форматирования текста следует выбирать элементы, которые наиболее точно описать значение контента, т.е. логического форматирования. Если вам при этом не нравится, как выглядит контент, его следует изменить с помощью таблиц стилей. На базе логического форматирования можно гибко управлять представлением документа, а такая разметка позволяет машинам, например программным системам поиска и индексации, правильно анализировать контент и принимать решения об относительной важности элементов на странице.

    Хотя использование тегов физического форматирования не осуждается в HTML и может свободно использоваться, однако применение таблицей стилей предоставляет значительно больше возможностей по управлению начертанием текста.

    Теги логического форматирования текста.
    Обозначение аббревиатуры.
    Для обозначения текста как аббревиатуру используются теги <abbr>. Данный тег имеет атрибут title, в качестве значения которого дается полная форма записи аббревиатуры, что позволяет понимать ее тем людям, которые с ней не знакомы. Браузеры при наведении курсора на текст, размеченный тегом <abbr>, будут выдавать полное наименование в виде появляющейся подсказки.
    Обозначение цитат.
    Тег <сitе> используется для обозначения ссылки на источник, например названий книги и статьи. Браузерами такой текст обычно выводится курсивом.
    Тег <q> отмечает короткие цитаты в строке текста. Содержимое кон-тейнера, как правило, отображается в браузере в кавычках.
    Для выделения длинных цитат из основного текста существует тег <blockquote>. Он является контейнером и может содержать другие теги форматирования. Текст, размеченный тегом <blockquote>, при отображении отделяется от основного текста пустыми строчками и, как правило, выводится с небольшим отступом вправо.
    Обозначение определений.
    Для выделения текстовый фрагмент как определение используется тег <dfn>. Например, этим тегом можно отметить какой-либо термин, когда он встречается в тексте в первый раз. Отображается по умолчанию курсивом.
    Выделение важных фрагментов.
    Для выделения важных фрагментов текста используются теги <em> и <strong>. Браузеры обычно отображают текст, выделенный с помощью тега <em>, курсивом, а с помощью тега <strong> – полужирным шрифтом. Тегом <strong> обычно размечают более важные фрагменты текста, чем те, что размечены тегом <em>.
    В HTML 5 ввели тег <mark>, который выделяет информацию, особенно важную для читателя. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью таблиц стилей.
    Обозначение вставок.
    Для обозначения текста как вставка используется тег <ins>. Этот элемент полезно использовать для отметки изменений, вносимых в документ. Текст, помеченный тегом <ins>, обычно отображается подчеркнутым.
    Обозначение удаленного текста.
    Для обозначения фрагмента текста как удаленный используют тег <del>. Этот элемент полезно использовать для отметки изменений, вносимых в документ. Текст, помеченный тегом <del>, обычно отображается перечеркнутым.
    Обозначение элементов программ.
    Для обозначения текста как небольшого фрагмента программного кода используется тег <code>. Как правило, текст отображается моноширинным шрифтом.
    Тег <samp> используется для обозначения текста, выдаваемого программой (листинг). Браузеры обычно отображают текст в контейнере <samp> с помощью моноширинного шрифта.
    Обозначение в тексте переменной величины или аргумента программы осуществляется с помощью тега <var>. Обычно такой текст отображается в браузере курсивом.
    Обозначение вводимого с клавиатуры текста.
    Тег <kbd> используется для обозначения текста, вводимого пользова-телем с клавиатуры. В браузере такой текст, как правило, отображается моноширинным шрифтом.
    Листинг 1. Пример логического форматирования текста.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Логическое форматирование текста</title>
    </head>
    <body>
    <p>В книге <cite>Изучаем HTML и CSS</cite> описывается язык <abbr title="HyperText Markup Language – язык гипертекстовой разметки">HTML</abbr> <del>4. 01</del> 5</p>
    <blockquote>
    Для того чтобы создать веб-страницу, необходимо изучить основы HTML. HTML – это не язык программирования и использование его гораздо легче, чем писать программы.
    </blockquote>
    <q>Книга рассчитана на широкой круг читателей</q><br>
    <p>Веб-страницы можно создавать <em>вручную с помощью HTML</em>, при этом ввод HTML-кода выполняется в <strong>любом текстовом редакторе</strong></p> <p><dfn>Notepad</dfn> – это простейший текстовый редактор.</p>
    </body>
    </html>

    Показать результат листинга 1

    Теги физического форматирования текста.

    Теги физического форматирования включены в спецификацию HTML 5 и получили обновленные семантические определения, однако если вы хотите только изменить стиль шрифта, более подходящим решением будет применить таблицу стилей. Оставьте эти элементы для тех случаев, когда они семантически уместны.

    Тег <b>
    используется, что зрительно привлечь внимание, например, к ключевым словам, такой текст отображается полужирным шрифтом.
    Тег <i>
    альтернативное отображение текста, отображается в браузере курсивом.
    Тег <u>
    отображает текст подчеркнутым.
    Тег <s>
    неверный текст, отображается в браузере перечеркнутым горизонтальной линией.
    Тег <small>
    мелкий шрифт, выводит текст шрифтом меньшего размера, чем непомеченная часть текста.
    Тег <sub>
    нижний индекс. Сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера.
    Тег <sup>
    верхний индекс. Сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера.

    Теги <sub> и <sup> удобно использовать для математических индексов.

    Теги форматирования могут быть вложенными друг в друга. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере.

    Листинг 2. Пример физического форматирования текста.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Физическое форматирование текста</title>
    </head>
    <body>
    <b>Полужирный</b> текст <br>
    <i>Курсивный</i> текст <br>
    <u>Подчеркнутый</u> текст<br>
    <s>Зачеркнутый</s> текст<br>
    Шрифт <small>меньшего</small> размера<br>
    <sub>нижний</sub> и <sup>верхний</sup> индексы<br>
    <b><i>Полужирный и курсивный</i></b> шрифт
    </body>
    </html>

    Показать результат листинга 2

    Разделение на абзацы.

    Любой текст имеет определенную структуру. Элементами такой структуры являются заголовки, подзаголовки, таблицы, абзацы и др.

    Одним из первых правил составления практически любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. HTML-документы не являются исключением из этого правила. При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши Enter. В HTML-документах символы перевода строки не приводят к образованию нового абзаца.

    HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Поскольку символы перевода строки оригинального документа игнорируются, то текст, отлично смотревшийся в окне редактора автора документа, может превратиться в неудобочитаемый текст в окне программы просмотра.

    Избежать этой неприятности позволяет применение специального тега разделения на абзацы <p>. Перед началом каждого абзаца текста следует поместить тег <р>, хотя закрывающий тег </p> не обязателен, все равно, его лучше использовать. Браузеры обычно отделяют абзацы друг от друга пустой строкой.

    Тег <р> может задаваться с атрибутом горизонтального выравнивания align, которые может принимать следующие значения:

    • left – выравнивание текста по левой границе окна браузера;
    • center – выравнивание по центру окна браузера;
    • right – выравнивание по правой границе окна браузера;
    • justify – выравнивание по ширине (по двум сторонам).

    По умолчанию выполняется выравнивание по левому краю.

    Перевод строки.

    При отображении текстовых документов в браузере место переноса строки в пределах абзаца определяется автоматически в зависимости от размера шрифтов и размера окна просмотра. Перенос строки может осуществляться только по символам-разделителям слов (например, пробелам). Иногда в документах требуется задать принудительный перевод строки, реализующийся независимо от параметров настроек браузера. Для этого служит тег принудительного перевода строки <br>, который не имеет соответствующего закрывающего тега. Включение тега <br> в текст документа обеспечит размещение последующего текста с начала новой строки.

    В отличие от тега абзаца <p> при использовании тега <br> не будет образована пустая строка.

    Для указания возможного места переноса можно использовать, так называемый, «мягкий» перевод строки, т.е. перевода строки будет выполнено только при необходимости. Для этого существует тег <wbr>, который так же, как и тег <br>, не нуждается в закрывающем теге.

    Заголовки внутри HTML-документа.

    Наряду с названием всего документа, на веб-странице могут использоваться заголовки для отдельных частей документа. Эти заголовки могут иметь шесть различных уровней и представляют собой фрагменты текста, которые выделяются на экране при отображении страницы браузером.

    Для разметки заголовков используются теги <h2>, <h3>, <h4>, <h5>, <h5> и <h6>. Эти теги требуют соответствующего закрывающего тега. Как правило, чем выше уровень заголовка, тем больше информации для читателя содержит этот раздел. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>,…,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него осуществляется вставка пустой строки.

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

    Теги заголовков могут задаваться с атрибутом горизонтального выравнивания align, который может принимать следующие значения:

    • right – позиционирование заголовка по правой границе документа;
    • left – позиционирование заголовка по левой границе документа;
    • center – позиционирование заголовка по центру документа.

    По умолчанию заголовки выравниваются по левому краю страницы.

    Горизонтальные линии.

    Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы.

    Тег <hr> позволяет провести горизонтальную линию в окне браузера. Этот тег не является контейнером, поэтому не требует закрывающего тега. До и после линии автоматически вставляется пустая строка. Тег <hr> может иметь следующие атрибуты:

    • align – выравнивание линии, может принимать значения left, center, right;
    • color – указывает цвет линии;
    • noshade – рисует линию без трехмерных эффектов;
    • size – устанавливает толщину линии в пикселях;
    • width – устанавливает длину линии, указывается в пикселях или процентах от ширины окна браузера.

    Пример:

    <hr aling="center" size="2" color="red">
    Использование предварительно отформатированного текста.

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

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

    Текст внутри контейнера <pre> может содержать элементы форматирования уровня текста, кроме следующих: <img>, <object>, <small>, <sub> и <sup>. Недопустимо внутри преформатированного текста задавать элементы форматирования уровня блока, например, теги заголовков. Тег абзаца по логике вещей также не должен встречаться внутри преформатированного текста, однако если встречается, то будет реализовывать переход на новую строку (без образования пустой).


    HTML-теги для работы с текстом

    <h2>, <h3>, <h4>, <h5>, <H5>, <H6>.

    Всего 6 видов заголовков — от h2 до H6. Тегу h2 соответствует самый большой заголовок, тегу H6 — самый маленький. Закрывающий тег обязателен.

    Атрибуты:

    align — Выравнивает заголовок в соответствии со следующими значениями:

    center — По центру.

    left — По левому краю.

    right — По правому краю.

    title — Всплывающая подсказка.

    Пример:


    ……..


    А это уже заголовок в теге <H6>

    Тег <p> создает новый параграф.

    Атрибуты:

    align — Выравнивает параграф относительно одной из сторон документа.

    left — выравнивание по правому краю (По умолчанию ).

    right — выравнивание по правому краю.

    center — выравнивание по центру.

    justify — выравнивание по ширине.

    title — Всплывающая подсказка.

    Пример:

    Первый параграф.

    Второй параграф.

    Контейнер <b> </b> выделяет текст жирным шрифтом.

    Аналогичный тег — <strong> </strong>, он тоже выделяет текст жирным. Но его не рекомендуется использовать больше 1-2 раз на странице — при большом количестве тегов <strong> на странице поисковые системы могут воспринять это как спам.

    Атрибуты:

    title — Всплывающая подсказка.

    Пример:

    Это простой текст.

    Это текст выделенный жирным шрифтом..

    Контейнер <strong> </strong> выделяет текст жирным шрифтом.

    Рекомендуется использовать этот тег для выделения наиболее значимого ключевого слова (или словосочетания) для акцентирования на нем внимая посковых систем.

    Атрибуты:

    title — Всплывающая подсказка.

    Пример:

    Это простой текст.

    Эта страница посвящена HTML-тегам для работы с текстом. Главная мысль страницы выделена тегом <strong>.

    Тег <hr> добавляет в документ горизонтальную линию.

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

    Атрибуты:

    size — Устанавливает толщину линии.

    width — Устанавливает ширину линии в пикселах или процентах.

    noshade — Создает линию без тени.

    color — Задает линии определенный цвет.

    Пример:

    <hr noshade=»noshade» color=»#00FF33″ />.


    Тег <br /> переводит текст на новую строку.

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

    Пример:

    Очень длинный текст, который нужно разбить на две строки.

    Очень длинный текст,
    но уже разбитый на две строки вставкой тега <br /> после слова «текст,».

    Контейнер <nobr> </nobr> запрещает перевод строки.

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

    Пример:

    Очень длинный текст, который не переносится на две строки и заключен в контейнер <nobr> </nobr>.

    Контейнер <sub> </sub> делает подиндекс.

    Набираем формулу H<sub>2</sub>0. Результат в примере.

    Пример:

    H2O.

    Контейнер <sup> </sup> делает надиндекс.

    Набираем формулу X<sup>2</sup> = 4. Результат в примере.

    Пример:

    X2 = 4.

    Контейнер <big> </big> выводит более крупный, чем окружающий текст.

    Атрибуты:

    title — Всплывающая подсказка.

    Пример:

    Это простой текст.

    Это более крупный текст.

    Контейнер <small> </small> выводит более мелкий, чем окружающий текст.

    Атрибуты:

    title — Всплывающая подсказка.

    Пример:

    Это простой текст.

    Это более мелкий текст.

    Контейнер <i> </i> выделяет текст курсивом.

    Вместо него рекомендован Контейнер <em> </em>.

    Пример:

    Это простой текст.

    Это текст заключенный в контейнер <i> </i>.

    Контейнер <em> </em> выделяет текст курсивом.

    Рекомендован вместо контейнера <i> </i>.

    Пример:

    Это простой текст.

    Это текст заключенный в контейнер <em> </em>.

    Тег <s> делает текст зачеркнутым.

    Закрывающий тэг </s> обязателен. Не ркомендован для использования.

    Пример:

    Это текст заключенный в контейнер <s> </s>.

    Тег <tt> выделяет текст моноширинным шрифтом.

    Закрывающий тэг </tt> обязателен.

    Вместо него рекомендован контейнер <kbd> </kbd>.

    Пример:

    Это простой текст.

    Это текст заключенный в контейнер <tt> </tt>.

    Тег <kbd> выделяет текст моноширинным шрифтом.

    Закрывающий тэг </kbd> обязателен.

    Рекомендован вместо контейнера <tt> </tt>.

    Пример:

    Это простой текст.

    Это текст заключенный в контейнер <kbd> </kbd>.

    Контейнер <u> </u> делает текст подчеркнутым.

    Не рекомендован для использования.

    Пример:

    Это простой текст.

    Это текст заключенный в контейнер <u> </u>.

    Тег <font> определяет цвет, размер и выводимый шрифт.

    Закрывающий тег </font> обязателен.

    color — определяет цвет текста.

    face — определяет гарнитуру шрифта.

    size — определяет размер текста в пределах от 1 до 7, где 1 — самый мелкий шрифт. По умолчанию равен 3.

    Пример:

    <font color=»#0000CC» face=»Verdana» size=»5″></font>.

    <font color=»#CA0000″ face=»Times New Roman» size=»2″></font>.

    Тег <pre> предварительно отформатированный текст.

    Преформатированный текст отображается моношириным шрифтом.

    <pre>предварительно отформатированный текст, 
    с сохранением последовательно поставленных пробелов.</pre>

    .

    Тег <marquee> заставляет текст перемещаться из стороны в сторону.

    Закрывающий тег </marquee> обязателен.

    Атрибуты:

    behavior — Определяет вид движения.

    alternate — Колебательные движения налево и направо.

    scroll — Перемещение текста в направлении, указанном в direction. Достигнув края экрана, надпись появляется снова с противоположной стороны.

    slide — Схоже с scroll, но текст перемещается только один раз и останавливается.

    direction — Определяет направление движения.

    down — Движение вниз.

    left — Движение справа налево (по умолчанию).

    right — Движение слева направо.

    up — Движение вверх.

    Пример:

    <marquee behavior=»alternate» direction=»right»></marquee>

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

    Закрывающий тег </q> обязателен.

    <q>Цитата</q>.

    Цитата.

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

    Закрывающий тег </blockquote> обязателен. Тег <blockquote> создает отступы с обеих сторон и отделяется от остального текста пустыми строками.

    Какой-то текст,

    здесь цитата

    и текст продолжается.

    Контейнер <address> </address> применяют для указания сведений об авторе.

    Сюда же обычно помещаются и сведения об авторских правах, а также дата создания и последней модификации документа.
    Текст обычно отображается курсивом. .

    Пример:

    Информация об авторе!

    .

    Тег <cite> используется для цитат.

    Закрывающий тег </cite> обязателен. Обычно отображается курсивом.

    Пример:

    Какой-то текст, (здесь цитата) и текст продолжается.

    Контейнер <code> </code> применяют для выделения программного кода, отображаемого на странице.

    Oтображается моноширинным шрифтом.

    Пример:

    Таким образом отобразится текст в контейнере <code> </code>.

    Теги HTML по алфавиту | bookhtml.ru

     

     

     

    !

     

    Тег <!— —> — текстовые комментарии в HTML- коде страницы (пользователю не видны).

    Тег <!DOCTYPE> — версия языка HTML и разновидность данной версии.

     

    A

     

    Тег <a> — создание ссылок.

    Тег <abbr> — символы, набранные в тексте, являются аббревиатурой.

    Тег <acronym> — сокращение, применяемое как самостоятельное слово.

    Тег <address> — данные создателей web-страницы.

    Тег <applet> — помещение в web-страницу апплетов — программ, написанных на языке Java.

    Тег <area> — активные области изображения, являющиеся ссылками.

    Тег <article> — статья или новость с чужого источника.

    Тег <aside> — дополнительная информация, всплывающая в отдельном блоке.

    Тег <audio> — вставка аудиоролика в web-страницу.

     

    B

     


    Тег <b> — написание текста жирным шрифтом.

    Тег <base> — задание базового адреса (URL) для ссылок.

    Тег <basefont> — базовый (основной для всей страницы) размер шрифта.

    Тег <bdo> — направление текста (справа налево или слева направо).

    Тег <bgsound> — создание звуковых эффектов.

    Тег <blockquote> — вставка в текст цытаты.

    Тег <big> — увеличение размер шрифта текста.

    Тег <body> — заключает в себе гипертекст, который определяет собственно Web-страницу.

    Тег <blink> — задает мигание текста.

    Тег <br> — принудительный переход на новую строку (перевод строки).

    Тег <button> — создаёт кнопки так же, как и элемент INPUT.

     

    C

     


    Тег <canvas> — создание bitmap изображения при помощи JavaScript.

    Тег <caption> — заголовок для таблицы.

    Тег <center> — центрирование текста на странице.

    Тег <cite> — форматирование цитат и ссылок.

    Тег <code> — вывод фрагментов программ и форматирования текста программы.

    Тег <col> — задаются свойства одной или нескольким колонкам таблицы.

    Тег <colgroup> — создает группы колонок с одинаковыми свойствами.

    Тег <command> — отображает команду в виде флажка, переключателя или обычной кнопки.

    Тег <comment> — контейнер для комментариев.

     

     

    D

     


    Тег <datalist> — перечень вариантов, предложенных для выбора при наборе в текстовом поле.

    Тег <dd> — списки с определениями.

    Тег <del> — выделение текста, который был удалён.

    Тег <details> — размещение на странице информации, которую можно показать или скрыть.

    Тег <dfn> — выделение одинаковых по назначению (или смыслу) фрагментов текста.

    Тег <dir> — определение списка каталогов.

    Тег <div> — формирует блочный контейнер.

    Тег <dl> — контейнер, в котором располагаем список определений.

    Тег <dt> — термин в списке определений.

     

    E

     

    Тег <em> — выделение текста.

    Тег <embed> — контейнер для некоторых объектов (звуковых файлов, видеофайлов и т.д.).

     

    F

     

    Тег <fieldset> — создание группы, объединяющей несколько элементов управления.

    Тег <figcaption> — заголовок для элемента <figure>.

    Тег <figure> — собственное содержимое ( фотографии, иллюстрации, диаграммы и др.).

    Тег <font> — тип, размер и цвет шрифта текста.

    Тег <form> — построение форм заполняемых непосредственно пользователем.

    Тег <footer> — нижний колонтитул для web-страницы.

    Тег <frame> — свойства отдельного фрейма.

    Тег <frameset> — структура фреймов на web-странице.

     

    H

     

    Теги <h2> — <h6> — заголовок в материале web-страницы.

    Тег <head> — формирование общей структуры документа.

    Тег <header> — «шапка» сайта.

    Тег <hgroup> — группирование заголовков веб-страницы или раздела.

    Тег <hr> — горизонтальная линия.

    Тег <html> — документ, написанный на языке html.

     

    I

     


    Тег <i> — текст курсивным начертанием.

    Тег <iframe> — создание фрейма.

    Тег <img> — ссылка на графический файл.

    Тег <input> — различные части формы, такие как флажки, переключатели, поля ввода.

    Тег <ins> — выделение текста, который был добавлен в новый документ.

    Тег <isindex> — конструкции для ведения диалога с пользователем.

     

    K

     


    Тег <kbd> — выделение текста, который пользователь должен ввести с клавиатуры.

    Тег <keygen> — генерация пары ключей для форм — закрытого и открытого.

     

    L

     

    Тег <label> — контейнер для других элементов формы.

    Тег <legend> — заголовок группы элементов формы, образованной тегом<fieldset>.

    Тег <li> — отдельный пункт списка.

    Тег <link> — связь между web-страницей и внешним документом.

    Тег <listing> — вывод листинга программ или кода.

     

    M

     

    Тег <map> — создание изображения-карты.

    Тег <marquee> — бегущая строка.

    Тег <mark> — помечает текст в документе как выделенный.

    Тег <menu> — создание логически связанных списков.

    Тег <meta> — дополнительная информация о веб-странице.

    Тег <meter> — вывод на экран данных в ранжированной области.

    Тег <multicol> — размещение информации на странице в несколько колонок (столбцов).

     

    N

     


    Тег <nav> — навигационная панель.

    Тег <nobr> — текст в одной строке (без разрыва).

    Тег <noembed> — отображение на web-странице информации.

    Тег <noframes> — браузер не поддерживает фреймы.

    Тег <noindex> — закрытие от индексации фрагмента текста

    Тег <noscript> — браузер не поддерживает сценариев.

     

    O

     


    Тег <object> — размещение в HTML-документе встроенного объекта.

    Тег <ol> — нумерованный список.

    Тег <optgroup> — объединяет пункты списка в группы.

    Тег <option> — создание элемента списка.

    Тег <output> — область в которую выводится информация результата расчета.

     

    P

     

    Тег <p> — разделение текста на абзацы.

    Тег <param> — передача параметров объекту.

    Тег <plaintext> — создание текста с конструкциями HTML.

    Тег <pre> — текст, заранее отформатированный.

    Тег <progress> — вывод на экран оценки выполнения работы.

     

    Q

     

    Тег <q> — выделение цитаты внутри абзаца или строки.

     

    R

     

     

    Тег <rp> — вывод текста в браузерах, которые не поддерживают тег <ruby>.

    Тег <rt> — аннотация сверху или снизу от текста, заключенного в контейнер <ruby>.

    Тег <ruby> — аннотация сверху или снизу от заданного текста.

     

    S

     


    Тег <s> — вывод текста зачеркнутым.

    Тег <samp> — выделение диалога пользователя с компьютером.

    Тег <script> — размещение в документе сценария.

    Тег <section> — выводит на экран данные, формируя их в разделы.

    Тег <select> — создание списков в форме.

    Тег <small> — уменьшение размера шрифта на единицу.

    Тег <source> — источник медиа-данных.

    Тег <spacer> — выделить (зарезервировать) на странице пустое пространство заданного размера.

    Тег <span> — выделение фрагмента текста для его последующего форматирования.

    Тег <strike> — зачеркнутое начертание текста.

    Тег <strong> — выделение текста жирным начертанием.

    Тег <style> — определение стилей элементов веб-страницы.

    Тег <sub> — создание эффекта нижнего индекса.

    Тег <summary> — видимый заголовок для элемента <details>.

    Тег <sup> — эффект верхнего индекса.

     

    T

     


    Тег <table> — создание таблиц.

    Тег <tbody> — создание логически связанных групп строк в теле таблицы.

    Тег <td> — создание обычной ячейки таблицы.

    Тег <textarea> — создания на форме многострочных текстовых полей.

    Тег <tfoot> — логическое группирование строк в нижней части таблицы.

    Тег <th> — создание заголовка таблицы.

    Тег <thead> — логическое группирование строк в верхней части таблицы.

    Тег <time> — дата и время.

    Тег <title> — заголовок Web-страницы.

    Тег <tr> — строка таблицы.

    Тег <track> — текстовая дорожка для медийных элементов <audio> и <video>.

    Тег <tt> — текст телетайпа.

     

    U

     


    Тег <u> — подчеркивание текста.

    Тег <ul> — создание маркированного (ненумерованного) списка.

     

    V

     

    Тег <var> — выделение переменной или параметра программы.

    Тег <video> — вставка на Web-страницу видеоролика.

     

    W

     

    Тег <wbr> — разбиение строки на две.

     

    X

     

    Тег <xmp> — вывод текста на страницу «как есть».

     

     

    Изучайте язык HTML вместе с bookhtml.ru

     

     

     

     

     

    HTML – Фразовые теги для текста

    Фразовые теги для текста были выделены для определенных целей, хотя они отображаются аналогично другим базовым тегам типа <b>, <i>, <pre> и <tt>, которые Вы видели в предыдущей главе. В этом уроке мы рассмотрим все важные в HTML теги для текста, поэтому давайте начнем.

    Наклонный текст

    Все, что расположено в теге <em>…</em>, отображается как наклонный текст. С помощью тега наклонного текста в HTML выделяют текст, на котором хотят акцентрировать внимание читателя.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример наклонного текста в HTML</title>
      </head>
      <body>
        <p>В следующем слове <em>применяется</em> наклонный шрифт.</p>
      </body>
    </html>
    

    Получим следующий результат:

    Выделенный текст

    Все, что расположено в теге <mark>…</mark>, выделяется желтым фоном. С помощью этого тега можно в HTML выделить текст, который нуждается во внимании читателя.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример выделенного текста в HTML</title>
      </head>
      <body>
        <p>Следующее слово <mark>выделено</mark> желтым фоном. </p>
      </body>
    </html>
    

    Получим следующий результат:

    Жирный текст

    Все, что расположено в теге <strong>…</strong>, отображается жирным текстом. С помощью этого тега можно в HTML выделить текст жирным шрифтом, тем самым указав на важные слова в тексте.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример жирного текста в HTML</title>
      </head>
      <body>
        <p>Следующее слово <strong>выделено</strong> жирным шрифтом.</p>
      </body>
    </html>
    

    Получим следующий результат:

    Текст аббревиатура

    Вы можете создавать аббревиатуры с помощью тега <abbr>…</abbr>, помещая в его текст. Если присутствует атрибут title, то он должен содержать полное описание и ничего больше.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример аббревиатуры в HTML</title>
      </head>
      <body>
        <p>Вы изучаете <abbr title = "HyperText Markup Language">HTML</abbr>. </p>
      </body>
    </html>
    

    Получим следующий результат:

    Элемент сокращения

    Элемент <acronym> позволяет указать, что текст заключенный между тегами <acronym>…</acronym>, является сокращением (аббревиатурой).

    В настоящее время основные браузеры не меняют внешний вид содержимого элемента <acronym>.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример сокращения в HTML</title>
      </head>
      <body>
        <p>Вы изучаете <acronym>HTML</acronym>.</p>
      </body>
    </html>
    

    Получим следующий результат:

    Направление текста

    Тег <bdo> – используется для переопределения текущего направления текста и имеет двунаправленное переопределение. В предыдущем уроке мы рассматривали похожий атрибут dir, который позволяет указать браузеру направление потока текста.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример направления текста в HTML</title>
      </head>
      <body>
        <p>Текст слево направо.</p>
        <p><bdo dir = "rtl">Текст справа налево.</bdo></p>
      </body>
    </html>
    

    Получим следующий результат:

    Специальные условия

    Тег <dfn> – позволяет указать, что Вы вводите специальный термин, он еще называется в HTML элемент определения. Его использование похоже на курсивный шрифт в середине абзаца.

    Как правило, Вы должны использовать элемент <dfn> при первом вводе ключевого слова. Последние версии браузеров отображают содержимое элемента <dfn> курсивом.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример специального условия в HTML</title>
      </head>
      <body>
        <p>Следующее слово <dfn>специальное</dfn> условие. </p>
      </body>
    </html>
    

    Получим следующий результат:

    Цитата в тексте

    Если Вы хотите процитировать отрывок из другого источника, то должны поместить его между тегами <blockquote>…</blockquote>.

    Текст внутри тега цитаты <blockquote> обычно имеет отступы от левого и правого краев окружающего текста и иногда использует курсивный шрифт.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример оформления цитаты в HTML</title>
      </head>
      <body>
        <p>Ниже представлен текст цитаты:</p>
        <blockquote>Этот текст заключен в тег цитаты.</blockquote>
      </body>
    </html>
    

    Получим следующий результат:

    Короткие цитаты или двойный кавычки в HTML

    Тег цитаты <q>…</q> используется, когда Вы хотите добавить в HTML двойную кавычку в предложение.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример двойных кавычек в HTML</title>
      </head>
      <body>
        <p>Следующий текст <q>помещен в двойные кавычки</q>.</p>
      </body>
    </html>
    

    Получим следующий результат:

    Цитирование в HTML

    Если Вы цитируете текст, то можете указать источник, размещающий его между открывающим тегом <cite> и закрывающим тегом </cite>.

    Как правило, в публикации для печати содержимое тега цитирования <cite> отображается по-умолчанию курсивом.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример цитирования в HTML</title>
      </head>
      <body>
        <p>Следующий текст <cite>будет процитирован</cite>.</p>
      </body>
    </html>
    

    Получим следующий результат:

    Программный код

    Любой код программирования, который Вы хотите отобразить на веб-странице, должен быть помещен внутри тегов <code>. ..</code>. Обычно содержимое тега <code> представлено в моноширинном шрифте, как и программный код в большинстве книг по программированию.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример программного кода в HTML</title>
      </head>
      <body>
        <p>Узнайте программный код: <code>h2, h3, h4 { font-size: 20px; } </code>.</p>
      </body>
    </html>
    

    Получим следующий результат:

    Клавиатурный текст

    Когда Вы пишите о компьютерах и хотите сообщить читателю, что нужно нажать какую-либо клавишу, то можете использовать элемент <kbd>…</kbd>, чтобы указать, что следует нажать или вводить. Как правило, отображается моноширинным шрифтом.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример клавиатурного текста в HTML</title>
      </head>
      <body>
        <p>Нажмите сочетание клавиш <kbd>CTRL+F5</kbd>, чтобы обновить веб-страницу и очистить кеш. </p>
      </body>
    </html>
    

    Получим следующий результат:

    Переменные программирования

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

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример переменных в HTML</title>
      </head>
      <body>
        <p><code>document.write("<var>name</var>")</code></p>
      </body>
    </html>
    

    Получим следующий результат:

    Результат программы

    Тег <samp>…</samp> указывает, что содержимое этого элемента является результатом выполнения программы, приложения, скрипта и т.д. Опять же, он используется при оформлении программирования или кодирования.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример результата программы в HTML</title>
      </head>
      <body>
        <p>В результате программа выведит на экран сообщение <samp>Hello World!</samp></p>
      </body>
    </html>
    

    Получим следующий результат:

    Текст адреса

    Тег <address>. ..</address> используется для размещения адреса.

    Пример

    <!DOCTYPE html>
    <html>
      <head>
        <title>Пример текста адреса в HTML</title>
      </head>
      <body>
        <address>141411, г.Москва, ул.Пахучкина, д.8</address>
      </body>
    </html>
    

    Получим следующий результат:

    Источник: HTML — Formatting.

    Разница между и тегом HTML

    Улучшить статью

    Сохранить статью

    • Уровень сложности: Easy
    • Последнее обновление: 04 Дек, 2020

  • Читать
  • Обсудить
  • Улучшить статью

    Сохранить статью

    1. Тег :
    Это один из элементов HTML, который используется для форматирования текстов HTML. Он используется для определения текста в техническом термине, альтернативном настроении или голосе, мысли и т. д.

    Синтаксис:

      Содержание. ..  

    2. Тег :
    Это также один из элементов HTML, используемых при форматировании текстов. Он используется для определения выделенного текста или утверждений.

    Синтаксис:

      Содержание...  

    По умолчанию визуальный результат такой же. Основное различие между этими двумя тегами заключается в том, что тег семантически подчеркивает важное слово или часть слов, в то время как тег представляет собой просто смещенный текст, обычно выделенный курсивом, чтобы показать альтернативное настроение или голос. Ниже приведен код, показывающий эту разницу между ними:

    Example-1 :

    HTML

    < html >

         < head >

    < Название > B TAG Название >

    < Стиль > < > < > < 0058

                 body {

                            text-align:center;

    }

    H2 {

    Цвет: зеленый;

    }

    Стиль >

    head >

         < body >

             < h2 >GeeksforGeeks h2 >

             < p >< i >Железный человек i > герой. p >

             < p >Gfg is the < em >best em > educational site. p >

               

         Body >

    HTML >

    Выход: 9

    .0003

    Здесь нет дополнительного ударения или важности слова «Железный человек». Здесь просто указано, что железо не является минералом или металлом, а относится к характеру. Но в следующем предложении читатель будет использовать словесное ударение на слове «лучший».

    Пример 2:

    HTML

    < HTML LANG < HTML LANG . 0058 = "ltr" >

       

    < head >

       < meta charset = "utf-8" >

    < Название > Разница между < I > и < EM > Tag из HTML EM > Tag из HTML 0058 >

    head >

       

    < body >

       < h2 >< i > Это положение выделено курсивом. 0056 < EM > Это предложение подчеркнуто.

    html >

    Вывод:

    9000
    Поддерживаемый браузер: ниже перечислены браузеры, поддерживаемые тегами и .

    • Chrome
    • Android
    • Firefox (Gecko)
    • Firefox Mobile (Gecko)
    • Internet Explorer (IE)
    • Edge Mobile
    • Opera
    • Opera Mobile
    • Safari (WebKit)
    • Safari Mobile

    Статьи по теме

    Следующая

    Разница между сильным и полужирным тегом в HTML

    Что нового

    Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство при просмотре нашего веб-сайта. Используя наш сайт, вы подтверждаете, что вы прочитали и поняли наши Политика в отношении файлов cookie и Политика конфиденциальности

    Тег HTML

    Тег HTML представляет ударение в своем содержимом.

    Тег используется, когда вам нужно выделить определенное слово или фразу в предложении. Постановка ударения меняет смысл предложения.

    См. также теги и .

    Синтаксис

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

    Вот так:

    Выделенное содержание...

    Примеры

    Базовое использование тега

    Здесь слова «хамелеон» и второе упоминание «комик» имеют ударение, что означает, что говорящие хотят подчеркнуть эти слова.

    "Чем вы занимаетесь?" — спросила Джейн.

    «Я комик», — ответил Руперт.

    "Вы сказали, что вы хамелеон".

    "Нет", сказал Руперт, "я комик".

    Перемещение ударения

    Здесь Руперт снова отвечает той же фразой «Я комик». Однако на этот раз он перенес ударение на слово «ам». При переносе ударения значение предложения изменилось. На этот раз его род занятий находится под вопросом, поэтому он делает ударение на «ам», чтобы подчеркнуть, что он действительно тот, за кого себя выдает.

    Вложенные

    Элементы

    Вы можете вкладывать несколько элементов друг в друга. Это придает дополнительное ударение словам, заключенным во внутренние теги .

    И снова Руперт отвечает своей стандартной репликой «Я комик». Однако на этот раз он злится. Никто не ставит под сомнение род занятий Руперта , особенно когда он такой забавный парень!

    Чтобы продемонстрировать разочарование Руперта, мы заключаем все предложение в тегов. Мы также добавляем еще один элемент к слову «am», поскольку он упорно борется, чтобы убедить Джейн в том, что он комик (судя по всему, это тоже проигрышная битва!).

    "Вы должно шутить... Я вам не верю!" — ответила Джейн, закатываясь от смеха.

    Руперт не мог больше этого терпеть, он не знал, что сказать, поэтому прокричал в микрофон: "Я я комик!"

    Наконец толпа разразилась смехом.

    Вложенные стили

    Элементы

    Вероятно, ваш браузер не отобразил вложенный элемент иначе, чем внешний элемент. Таким образом, пользователь не может сказать, что слово «am» имеет даже большее ударение, чем остальная часть предложения.

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

    Вот пример:

    Пример <стиль> em > em {преобразование текста: верхний регистр;}

    "Вы должно шутить... Я вам не верю!" — ответила Джейн, закатываясь от смеха.

    Руперт не мог больше этого терпеть, он не знал, что сказать, поэтому прокричал в микрофон: "Я я комик!"

    Наконец толпа разразилась смехом.

    Атрибуты

    Атрибуты могут быть добавлены к элементу HTML, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя.

    Элемент принимает следующие атрибуты.

    Атрибут Описание
    Нет  

    Глобальные атрибуты

    Следующие атрибуты являются стандартными для всех элементов HTML. Следовательно, вы можете использовать эти атрибуты с 9Тег 0057 , а также со всеми другими HTML-тегами.

    • ключ доступа
    • автокапитализировать
    • класс
    • редактируемый контент
    • данные-*
    • директор
    • перетаскиваемый
    • скрытый
    • идентификатор
    • режим ввода
    • это
    • ид
    • itemprop
    • Артикул
    • предметная область
    • тип изделия
    • язык
    • часть
    • слот
    • проверка правописания
    • стиль
    • tabindex
    • Название
    • перевести

    Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5.

    Обработчики событий

    Атрибуты содержимого обработчика событий позволяют вам вызывать сценарий из вашего HTML. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с другим событием.

    • прерывание
    • onauxclick
    • размытие
    • при отмене
    • онканплей
    • oncanplaythrough
    • при обмене
    • по клику
    • при закрытии
    • в контекстном меню
    • онкопия
    • при обмене
    • врезной
    • ondblclick
    • ондраг
    • ондрагенд
    • Драгентер
    • ондраг выход
    • на накладке
    • ондраговер
    • ондрагстарт
    • ondurationchange
    • при опорожнении
    • одноконцевой
    • при ошибке
    • онфокус
    • данные формы
    • на входе
    • недействительный
    • нажатие клавиши
    • нажатие клавиши
    • onkeyup
    • onlanguagechange
    • под нагрузкой
    • загруженные данные
    • загруженные метаданные
    • запуск при загрузке
    • ввод с помощью мыши
    • на мышелист
    • onmousemove
    • onmouseout
    • при наведении мыши
    • на мышке вверх
    • на пасте
    • при паузе
    • в игре
    • в игре
    • в процессе
    • при изменении скорости
    • при сбросе
    • изменение размера
    • при прокрутке
    • нарушение политики безопасности
    • поиск
    • поиск
    • по выбору
    • onslotchange
    • установлен
    • при отправке
    • приостановить
    • своевременное обновление
    • нагрудник
    • при изменении объема
    • в ожидании
    • на колесе

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

    Дополнительные сведения см. в разделе Атрибуты содержимого обработчика событий HTML.

    Тег в HTML — разделы Scaler

    Обзор

    Тег em в HTML используется для выделения текста. Слово «подчеркнуть» относится к процессу выделения чего-либо или сосредоточения на нем внимания, чтобы привлечь немного больше внимания, чем обычно.

    Синтаксис

    Синтаксис тега em довольно прост. Просто напишите открывающий и закрывающий теги с некоторым содержанием между ними.

     
     Некоторый текст
     

    Примечание: Мы можем внедрить любой тег внутрь тега em, и у нас не будет проблем с отображением, но не рекомендуется использовать семантические теги для целей, для которых они не предназначены.

    Атрибуты тегов

    Как использовать тег

    в HTML?

    Семантическое значение тега em состоит в том, чтобы подчеркнуть основной контент словесным ударением. Что это значит? Давайте разберемся с некоторыми примерами,

    1. В этом примере акцент делается на что , что означает, что если мы произносим это, мы поставим восклицательную паузу, а также немного больше сосредоточимся на ключевом слове «что».
     
     Что? вы все еще дома.
     
    1. В этом примере акцент делается на вместо .
     
     Вы должны покинуть офис сейчас.
     

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

    1. В этом примере основное внимание уделяется нескольким ключевым словам. Допустим, программа чтения с экрана описывает информацию о ноутбуке, поэтому, если она встретит тег em, она подчеркнет основной контент, чтобы эти специальные термины могли привлечь повышенное внимание.
     
     Этот ноутбук оснащен процессором Intel i7 11800H с 8 ядрами и 16 потоками.
     

    Если вы хотите выделить определенную часть контента, вы можете использовать тег em . Курсив — это визуальный акцент по умолчанию для тега em.

    Примеры тегов

    Пример 1: тег

    в HTML
     
     
    
    <голова>
        <мета-кодировка="UTF-8">
        HTML-тег em
    
    <тело>
     

    Это обычный текст заголовка h2 с некоторым

    выделенным текстом

    Выходные данные:

    Пример 2: переопределение визуального стиля

    По умолчанию визуальный стиль тега em — "font-style". Мы можем переопределить его в соответствии с нашими требованиями.

     
     
    
    <голова>
        <мета-кодировка="UTF-8">
        HTML-тег em
        <стиль>
        Эм{
        красный цвет;
        украшение текста: подчеркивание;
        вес шрифта: 800
        }
        
    
    <тело>
     

    Переопределение стиля

    Всем привет, это важное объявление. В связи с чрезвычайной ситуацией вам всем необходимо покинуть этот зал прямо сейчас.

    Выход:

    Пример 3. Вложенный тег

    Мы также можем вложить тег em. Следует отметить, что по мере увеличения уровней вложенности будет увеличиваться и уровень акцента.

     
     
    
    <голова>
        <мета-кодировка="UTF-8">
        HTML-тег em
        <стиль>
        .вложенный {
        красный цвет;
        }
        
    
    <тело>
     

    Вложенный тег em

    Это фиктивный абзац. Здравствуйте, это содержимое заключено в тег em и "это какой-то контент внутри вложенного тега em" . Это конец абзаца.

    Выход:

    Разметка выделенного текста в документе

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

    С другой стороны, существует несколько обычных тегов, которые обычно не имеют никакого значения, и они не дают никаких указаний на то, что они содержат, и никто не может предсказать, что может быть внутри них. Пример --- С помощью тега div мы не можем предсказать, какой контент лежит в основе. Может быть что угодно, span используется для покрытия некоторого содержимого в блоке, но нет фиксированного правила для того, что он может содержать, и т. д.

    Когда семантический тег используется для выделения выделенного содержимого в документах HTML, цель чтобы сообщить программе, что это конкретное содержимое не является нормальным и должно быть интерпретировано как таковое, создавая некоторый ударный акцент. В документах HTML выделенный текст помечается семантическим тегом .

    Пример: Мы выделим жирным шрифтом ключевые слова этого абзаца с разметкой в ​​HTML.

    — Дэвид следует своим принципам и идеологии, — сказал Робин. Что? Дэвид следует идеологии своего руководителя», — спросил Раман; «Нет, Дэвид следует своим принципам и идеологии», — ответил Робин.

     
     <р>
        «Дэвид следует своим принципам и идеологии, — сказал Робин.
        Что? Дэвид следует идеологии своего директора», — спросил Раман;
        «Нет, Дэвид следует своим принципам и идеологии», — ответил Робин.
    

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

    Почти каждый браузер последней версии поддерживает этот тег.

    • Хром
    • Край
    • Фаерфокс
    • Internet Explorer
    • Опера
    • Сафари
    • Веб-просмотр Android
    • Хром Android
    • Firefox для Android
    • Опера Android
    • Сафари на iOS

    Заключение

    • Тег используется для выделения содержимого.
    • Это семантический тег (элементы с особым значением) HTML.
    • Семантические теги и обычные теги нельзя отличить визуально, потому что семантический тег — это всего лишь теоретическая концепция, которая налагает некоторые соглашения, чтобы можно было определить их роль на веб-странице.
    • Согласно программному обеспечению, семантические теги интерпретируются на основе их характеристик.

    Определение, использование и примеры тегов HTML

    by Holistic SEO

    HTML-тег определяет текст с акцентом на ударение. Браузеры выделяют курсивом текст в HTML-теге . HTML-тег — это логический элемент разметки, в отличие от HTML-тега , который оказывает такое же визуальное воздействие, как курсив, но не несет семантической нагрузки. Хотя HTML-тег не устарел, можно добиться лучших эффектов с помощью свойства CSS font-style. HTML-тег используется для выделения текста, который должен быть выделен больше, чем окружающий текст. HTML-тег является частью категории «Форматирование HTML» в справочнике по элементам HTML. Атрибуты HTML-тега являются глобальными атрибутами и атрибутами событий.

    Пример блока кода , чтобы узнать, как это работает, приведен ниже.

     <тело>
    

    Текст здесьнет текста в этом месте

    Второй пример использования блока кода «» приведен ниже.

     Это слишком больше для меня невыносимо! 

    Что такое HTML-тег

    ?

    HTML-тег обозначает содержимое, которое должно отображаться в браузере курсивом, поскольку это указывает на то, что в тексте много выделений. Другое частое название HTML-тега — элемент . Выделение задается HTML-тегом . Курсив обычно используется для выделения текста в объявлении. Используя вербальное ударение, программа чтения с экрана произносит слова в HTML-теге . Элемент HTML-тега можно размещать с увеличением уровня выделения.

    Как использовать HTML-тег

    ?

    Чтобы использовать HTML-тег , веб-разработчик должен написать с выделенным текстом, помещенным между начальным и конечным тегами. Хотя в теге отсутствуют локальные атрибуты, его можно использовать с любыми глобальными атрибутами или атрибутами содержимого события.

    Пример использования HTML-тега

    ?

    Ниже приведены примеры использования HTML-тега .

     

    Мы должны действовать быстро!

     

    Это не вы, это я.

    Каковы атрибуты HTML-тега

    ?

    Тег HTML имеет несколько атрибутов. Ниже перечислены следующие атрибуты.

    • Глобальные атрибуты: HTML-тег поддерживает глобальные атрибуты. Все элементы HTML, даже не указанные в стандарте, могут иметь глобальные атрибуты. Это означает, что любые нестандартные элементы должны, тем не менее, допускать определенные характеристики, даже если использование таких элементов делает контент несовместимым с HTML5.
    • Атрибуты событий: HTML-тег поддерживает атрибуты событий. Атрибуты события всегда имеют имя, начинающееся с «on», за которым следует название события, для которого оно предназначено. Они задают сценарий для запуска, когда событие определенного типа отправляется элементу с указанными атрибутами.

    Какова настройка CSS по умолчанию для HTML-тега

    ?

    Ниже приведены настройки CSS по умолчанию для HTML-тега .

     эм {
    } 

    Какие другие теги HTML связаны с

    ?

    Другие теги HTML, связанные с тегом HTML , перечислены ниже.

    • HTML-тег : HTML-тег и HTML-тег связаны, поскольку они оба форматируют HTML-теги. HTML-тег отделяет часть текста от остального, чтобы его можно было оформлены по-разному.
    • HTML-тег : HTML-тег и HTML-тег связаны, поскольку оба они форматируют HTML-тег. HTML-теги указывают, что некоторый текст не артикулирован и отформатирован иначе, чем обычный текст.
    • HTML-тег