Как в html документе выделить текст курсивом

Курсив CSS

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

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

Курсивный текст: тег

Тег i (italic), по аналогии с тегом b для жирного текста, служит для физического выделения курсивного текста (это означает, что изменяется только начертание текста). Применение тега i:

Конструктор сайтов "Нубекс"

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

Курсивный текст: тег

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

Конструктор сайтов "Нубекс"

Конструктор сайтов «Нубекс»

Но не стоит забывать, что текст, заключенный в теги i и em, хоть и отображаются практически одинаково (во всех современных браузерах), по своей сути являеются не совсем идентичными, как уже отмечалось выше. Поэтому использовать теги нужно по мере необходимости: тегом em HTML обрамлять важные участки текста, а визуальное курсивное оформление применять с помощью тега i или CSS-стилей. Рассмотрим теперь использование CSS-стилей для курсивного выделения текста.

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

Для установления стилей отображения шрифтов в CSS применяется свойство font-style, которое может принимать значения: oblique (наклонный текст), italic (курсив) и normal (обычный шрифт).

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

Применение атрибута font-style на практике:

     .nubex1 < font-style: italic; >.nubex2  
Наши сайты - это, действительно, огромный шаг в веб-разработке.





 
Мы делаем по-настоящему качественные сайты.
   

Но необходимо помнить, что некоторые браузеры текст со свойством font-style: oblique; могут интерпретировать не как наклонный текст, а как курсивный.

Начертание

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

Жирное начертание шрифта Сильное выделение текста

Курсивное начертание

Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Курсив для текста определяют два тега: и .

Курсивное начертание шрифта Выделение текста

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

В примере 7.5 показано использование тегов и для оформления текстов.

Пример 7.5. Теги и

      
А где же печенье и самогоноваренье?! — воскликнул Мальчиш-плохиш.





  

Результат данного примера показан на рис. 7.5.

Рис. 7.5. Жирное и курсивное начертание текста

Тег HTML курсив

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

HTML тег относится к тегам физического форматирования. Изменение начертания шрифта с помощью тега носит стилистический характер.

Спецификация HTML5 рекомендует отдавать приоритет тегам логического форматирования: важные фрагменты текста — тег , акцентирование внимания — тег , подзаголовки — теги — , подсветка текста — тег . Выделять текст курсивом с помощью тега следует только если характер выделения не соответствует ни одному тегу логического форматирования.

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

Синтаксис

текст выделенный курсивом

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

Простой текст, который может быть расположен на любом сайте. А вот текст выделенный курсивом.

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

 
 
 
 
Простой текст, который может быть расположен на любом сайте. А вот текст выделенный курсивом.





 

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

Тег
	Да	Да	Да	Да	Да

by Lebedev

Оцените, насколько полезна эта страница
Эти материалы могут быть вам полезны
Теги форматирования текста в HTMLТеги заголовков — HTML подзаголовкиТег HTML курсив, наклонный текстТег HTML жирный шрифт, логическое выделение текстаТег HTML выделение текста, подсветка фона

Как сделать текст курсивным. Тег

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

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

Чем заменить тег

В большинстве случаев тег можно заменить тегом . А чтобы специально указать, что текст должен быть выделен курсивом, используйте CSS. Например:

Это очень важно.
 

�� Другие теги для изменения текста

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.