Теги html для оформления текста, зачеркнутый текст, курсив, подчеркнутый текст
Создаем свой сайт
Всем привет! В предыдущих статьях мы узнали много нового о ссылках и картинках. Теперь пора переходить к тексту. В этой статье я расскажу про наиболее популярные теги html, которые используются для того, чтобы предать тексту определенный вид.
Итак, для начала создаем в блокноте пустой текстовый документ. После этого меняем его расширение с txt на html. Открываем его с одновременно с помощью браузера и текстового редактора, например, того же блокнота. Я советую использовать для этих целей программу Macromedia Dreamweaver или Notepad++.
С помощью редактора мы будем наш документ редактировать, с помощью браузера просматривать, что у нас получилось.
Для того, чтобы изменения вступили в силу необходимо сначала сохранить изменения в редакторе, нажав на дискетку или комбинацию клавиш Ctr+S, а затем обновить этот же документ в браузере.
Заголовки текста разного уровня
Заголовки это не только важная часть оформления текста, но и один из инструментов внутренней оптимизации. В html тексте заголовки задают теги <h>. Для того, чтобы посмотреть, как они будут выглядеть прописываем в документе следующий код:
<h3>Поместите здесь текст, который вы хотите сделать заголовком</h3>
Цифра 2 рядом с буквой h означает уровень заголовка. Всего уровней 6. Первый уровень – название статьи. Все остальные – заголовки разделов и подразделов.
Жирный, подчеркнутый текст, курсив
Теги <b>, <i>, <u> легко решают эту проблему
<b>Так в html можно задать жирный текст</b>
<i>Вот так задается курсив</i>
<u>Вот это будет подчеркнутый текст</u>
Если нам нужно применить к тексту одновременно несколько свойств, просто вкладываем теги один в другой.
<i><b>Жирный курсив</i></b>
Изменяем размер шрифта
Размер шрифта текста задается в html с помощью тега <font>, у которого есть атрибут «size».
<font size=”5”>Размер шрифта 5</font>
Как поменять цвет текста
Цвет текста задается тем же самым тегом с помощью атрибута «color»
<font color=”red”>Текст красного цвета</font>
В данном случае, цвет задается с помощью слова. Также его можно задавать в цифровой кодировке. Более подробно об этом можно прочитать в статье палитра цвета в html.
Текст в таком виде как он был набран
У html есть довольно неприятная особенность. Если вы набрали текст, в котором есть несколько пробелов, идущих подряд , друг за другом, то браузер покажет только один пробел. В некоторых случаях необходимо отобразить текст именно в таком виде, как он был набран. Для этого используется тег <pre>
<pre>Этот текст будет выглядеть так как он набран</pre>
Ну вот, пожалуй, и все. Естественно, возможности для видоизменения текста с помощью тегов html довольно ограничены. В большинстве случаев этого не хватает. В этом случае, рекомендуется использовать css.
CSS это аббревиатура, которая в переводе на русский означает каскадные таблицы стилей. Подробнее об этом мы поговорим в одном из следующих уроков.
Зачеркнутый текст
Вообще говоря в html можно задать зачеркнутый текст с помощью сразу трех разных тегов. Теги <s> и <strike> вполне корректно отображаются во всех браузерах, тем не менее, они не рекомендуются к использованию. Они даже не включены в спецификации XHTML и HTML5. Поэтому для создания зачеркнутого текста я рекомендую использовать тег <del>.
<del>Зачеркнутый текст</del>
Визуально результат использования этого тега ничем не будет отличаться от первых двух. Тем не менее, он несет в себе несколько иной смысл. Предполагается, что этот тег используется для вычеркивания устаревшей или неправильной информации. У данного тега есть 2 атрибута:
cite — предназначен для того, чтобы содержать ссылку на документ, в котором содержится причина удаления данной информации
datetime — предназначен для того, чтобы хранить время последнего редактирования информации.
Похожие записи
Создаем свой сайт
Как сделать чтобы каждая ссылка открывалась в новом окне в WordPress и с помощью HTML
Авторadmin
Мы научились средствами htm и CSS изменять цвет ссылки и убирать подчеркивание. Казалось бы, с ссылками уже все ясно, но это не так. Есть еще один небольшой нюанс, о котором необходимо упомянуть, а именно, как сделать так, чтобы она открывалась в новом окне. Зачем это нужно Почему так важно, чтобы все внешние ссылки открывались в…
Читать далее Как сделать чтобы каждая ссылка открывалась в новом окне в WordPress и с помощью HTMLПродолжить
Создаем свой сайт
Как сделать иконку для сайта
Авторadmin
Всем привет. Сайтов в сети много, поэтому надо пользоваться любой возможностью сделать свой сайт уникальным, выделить его из серой массы других сайтов.
Читать далее Как сделать иконку для сайтаПродолжить
Основы
Что такое CSS
Авторadmin
Ранее я рассказывал о том, как сделать html сайт в блокноте. В той статье я упомянул о каскадные таблицы стилей. Пришло время рассказать о них подробнее. В статье, о которой я упомянул выше, мы создавали html страницу, используя для этого html теги. С помощью тегов мы разметили основную структуру документа. В итоге мы получили готовую…
Читать далее Что такое CSSПродолжить
Создаем свой сайт
Какую тему для сайта выбрать
Авторadmin
Ключевым моментов при создании сайта является выбор его тематики.
Практически каждый веб-мастер сталкивается с данной проблемой. При создании сайта многие рекомендуют выбирать ту тему, в которой больше всего разбираешься и которая тебе самому очень близка и интересна. С одной стороны может быть они и правы, потому что сайт будет создан с любовью, наполнен хорошим и…
Читать далее Какую тему для сайта выбратьПродолжить
Как в html сделать курсив
Главная » Разное » Как в html сделать курсив
Как сделать в css или html курсивный шрифт у текста?
Html предоставляет нам кое-какие возможности в плане оформления текста. Сегодня я вам расскажу, как сделать в html курсивный шрифт, причем как у стандартного шрифта, так и у нестандартного. Во втором случае нужно будет кое-что учесть, чтобы все работало.
Как писать в html курсивом?
Начну с того, что в самом html есть два тега, которые дают тексту курсивное начертание. Это em и i. Кстати, второй встроен в html-редактор движка wordpress, в котором я сейчас и пишу данную статью.
Чем отличаются эти теги? На самом деле сегодня не хотелось бы громко заявлять, что они чем-то отличаются.
В целом, em по идее используется для выделения слов, которые нужно произнести с особой интонацией, а i просто визуально выделяет текст. Но не будем над этим заморачиваться, потому что неизвестно, на самом ли деле это так.
Какие есть css-свойства для курсивного текста?
Это свойство font-style и его значение italic. Еще есть значение oblique и оно превращает текст в наклонный. Есть ли какая-то разница между этими значениями? Практически никакой. Кстати, подробно об этом и других свойствах css для текста читайте в соответствующей статье, где все разложено по полочкам.
Как вывести курсивом нестандартный шрифт?
Дело в том, что если вы подключаете нестандартный шрифт через Google Fonts, то в таком случае вы должны отметить галочкой при подключении хотя бы 1 курсивный стиль шрифта. Если этого не сделать, то при попытке сделать такой шрифт курсивным, будет выводиться курсив одного из стандартных шрифтов.
Кстати, о подключении нестандартных шрифтов вы можете прочитать в этой статье.
На этом скриншоте вы можете видеть фрагмент подключение шрифта через сервис Google Fonts. Как видно, стоит галочка возле хотя бы одного курсивного начертания. Теперь, при использовании необходимых тегов или стилевого свойства, действительно этот шрифт будет становится курсивным, а не какой-то другой.
Таким образом, мы с вами разобрали все моменты, которые есть в работе с курсивным начертанием. Больше не смею вас задерживать.
Курсив в HTML: теги em и i
Всем привет! Давайте научимся выделять текст курсивом на HTML-страничке. Для этого используются теги и . Несмотря на внешнюю неразличимость имеются различия в семантике.
Тег используется для обозначения текста, акцентирование внимания на котором меняет смысл фразы.
Например, если надо сказать, что Вася предпочитает просыпаться рано, а не вставать рано, то текст должен будет оформлен так:
Вася предпочитает просыпаться рано.
Результат выглядит так:
Что же касается второго тега из этого урока, а именно – , то он используется в том случае, если выделяемый им текст отличается от присутствующего рядом, но по важности его не превосходит. Использование этого тега уместно, когда идет речь про названия, специальные термины, слова из другого языка.
Если говорить о результате работы тегов с визуальной точки зрения, то разница отсутствует. На странице браузера и в первом, и во втором случаях слова, обозначенные данными тегами, выделяются курсивом.
Назад Следующий урок
Курсив на CSS: изменение начертания шрифта
Курсивное начертание — один из самых популярных способов выделить фрагмент текста и придать ему определенную значимость. Он идеально подходит для цитат, сносок, названий и имен собственных. В HTML существует два специальных тега для отображения курсивного начертания. В CSS курсивом управляет свойство font-style.
Курсив или наклонный шрифт?
Отображение одного и того же шрифта в курсивном начертании может различаться.
На картинке — три блока текста, набранных одним и тем же шрифтом Playfair Display. Первый имеет обычное прямое начертание, а второй и третий — курсивное. Они открыты в одном и том же браузере Google Chrome, но выглядят совершенно по-разному.
Дело в том, что некоторые шрифты имеют собственные курсивные наборы символов. Если браузер не имеет доступа к этому набору, но встречает текст, который должен быть отображен как курсивный, он попытается наклонить его своими силами.
Во втором блоке — как раз такой, обработанный браузером, вариант, а в третьем — оригинальный курсивный вариант шрифта Playfair Display, обладающий уникальным начертанием, больше похожий на рукописный. Браузер же просто наклоняет каждый символ текста на определенный угол, имитируя курсив.
Разбираясь, как сделать курсив в CSS или HTML, важно помнить, что в случае специфических шрифтов необходимо обеспечить браузеру доступ к их курсивным наборам. В ряде случаев результат работы браузерных алгоритмов наклона может быть неудовлетворительным.
HTML-курсив
Для курсивного отображения текста в HTML существует два специальных тега: i (от слова italic) и em. Начертание текстового фрагмента, заключенного в любой из этих дескрипторов, будет одинаковым.
Разница заключается в логическом выделении. Тег em указывает на особую значимость фрагмента. Это важно для поисковых роботов и скринридеров, которые будут выделять указанный текст с помощью интонации.
Свойство font-style
В CSS курсивом управляет инструкция font-style. Она может принимать одно из трех базовых значений:
- normal — шрифт обычного начертания;
- italic — курсивное начертание;
- oblique — наклонное начертание.
На настоящий момент большинство современных браузеров обрабатывают значения oblique и italic одинаково, однако изначально предполагалось, что первое — это результат работы специальных браузеров алгоритмов, наклоняющих каждый символ вправо.
Если искомый шрифт браузером не обнаружен, то italic будет выглядеть точно так же, как и oblique.
В отличие от тега em, css-свойство font-style не придает выделенному фрагменту особой важности, оно скорее соответствует дескриптору i.
Примеры
Курсивным начертанием часто выделяются цитаты. Попробуем придать изречению Оскара Уайльда красивый вид.
.quote { font-style: italic; border-left: 5px solid purple; padding-left: 20px; }
Кроме декоративной рамки справа и отступов, для блока quote определено правило font-style со значением italic.
С его помощью устанавливается курсив в CSS.
Свойство font-style
Трепачёв Д.П. © 2012-2018 г.
Ученикам: я ухожу на каникулы с 21-го декабря по 8 января. Буду не онлайн, хотя иногда возможно буду появляться.
Свойство font-style устанавливает курсив либо наклонное написание текста.
Синтаксис
селектор { font-style: italic | oblique | normal | inherit; }
Значения
| italic | Делает курсив.![]() |
| oblique | Наклонный текст. В отличие от курсива, который имитирует рукописный текст, наклонный представляет собой обычный текст, буквы которого наклонены в сторону. |
| normal | Отменяет курсив или наклон. Обычно необходимо в случае, если вам нужно отменить курсивное начертание для определенного участка текста (к примеру, все абзацы сделаны курсивом, а данный — нет). |
| inherit | Наследует значение родителя. |
Значение по умолчанию: normal.
Примеры
Пример . Значение italic
Сейчас текст станет курсивным:
p { font-style: italic; }
Результат выполнения кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Пример . Значение oblique
Сейчас текст станет наклонным (в зависимости от браузера может быть неотличим от курсивного):
p { font-style: oblique; }
Результат выполнения кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Теги физического форматирования HTML текста.
КурсивПодсвеченный участок текста;
— жирный шрифт;
— курсив, наклонный шрифт;
— зачеркнутый текст;
— текст меньшего размера;
— верхний индекс;
— нижний индекс;
— предварительно отформатированный текст;
— термин;
— заголовки;
— короткая внутристрочная цитата;
— цитата;
— сноска на название материала;
— программный код;
— результат вывода компьютерной программы;
— клавиатурный ввод;
— переменная компьютерной программы.
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.
Теги выделения фрагментов текста
Тег используется для выделения важных участков текста. Браузеры обычно отображают текст внутри тега жирным шрифтом. — тег логического выделения. Используя его, вы указываете на важность текста в выделенной области.
Важный фрагмент текста
Тег используется для акцентирования внимания, «подчеркивания» фрагмента текста.
Браузеры обычно отображают текст внутри тега курсивом. — тег логического выделения.
Акцентированный фрагмент
Тег используется для подсветки фрагмента текста.
Подсвеченный фрагмент
Тег используется для написания текста жирным шрифтом. Тег физического форматирования, не придает выделенным участком логический вес. Используйте тег только если характер выделения не подходит под другой тег форматирования текста по смыслу.
Текст жирным шрифтом
Тег используется для написания текста курсивом. Используйте тег только если характер выделения не подходит под другой тег форматирования текста по смыслу.
Текст курсивом
Тег используется для указания некорректности, неактуальности выделенного фрагмента. Текст внутри тега выводится перечеркнутым.
Перечеркнутый текст
Тег используется для написания текста шрифтом меньшего размера.
Текст меньшего размера
Тег используется для создания текста нижнего индекса.
Текст нижнего индекса
Тег используется для создания текста верхнего индекса.
Текст верхнего индекса
Тег указывает, что текст внутри должен быть выведен в том формате, в котором он был написан в редакторе: с учетом количества пробелов между словами и сохранением позиции строк.
Предварительно отформатированный текст
Теги устанавливающие суть содержимого
Теги указывают, что содержимое является заголовком (подзаголовком).
Тег указывает, что содержимое является термином. Браузеры обычно выводят содержимое тега курсивом.
Термин
Тег используется для указания на короткий процитированный участок внутри строки текста. Браузеры обычно выводят содержимое тега в кавычках.
Короткая цитата
Тег моноширинным шрифтом.
Результат вывода компьютерной программы
Тег указывает, что содержимое является клавиатурным вводом. Браузеры обычно отображают текст внутри тега моноширинным шрифтом.
Клавиатурный ввод
Тег указывает, что содержимое является переменной компьютерной программы. Браузеры обычно отображают текст внутри тега курсивом.
Переменная компьютерной программы
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подписаться
Html-теги для текста – это теги, которые меняют оформление заключенного в них контента.
Эта идея пришла из печатных издательств. Редакторы на полях помечали, что является заголовком, как оформить список.
Так же и теги. Они указывают, какой стиль должен быть у элемента.
Теги и элементы
Каждый тег имеет вид:
Элемент – это совокупность тега и его содержимого. Многие из них требуют закрывающего тега:
Название тега>
Особенно это касается текстовых тегов. Закрывающий показывает, когда следует прекратить оформление или закончить блок, таблицу, заголовок и т.д.
Примеры элементов:
Блок
- курсив
Некоторые элементы не требуют закрытия
В таких случаях отсутствует содержимое и браузер просто размещает на экране заданный объект.
В первом случае это рисунок, во втором линия. Закрывающий используется, когда в элементе есть содержимое: текст и/или другие теги.
Знает, для чего предназначен каждый тег и как поведет себя «обернутое» в элемент содержимое.
Парадигма оформления современных сайтов
Первоначально разметка позволяла и оформлять страницы, и указывать логическое назначение блоков. Новая версия HTML 5.0 нацелена на логическую разметку. Таким образом определяются тематические разделы на странице. При этом подходе и поисковым машинам, и людям легче ориентироваться в коде.
Все оформление выполняется в стилистических таблицах в виде правил. Назначая каждому элементу класс или идентификатор, верстальщик указывает свойства стиля и устанавливает его значение. Хранение стилей в отдельном файле позволяет выполнить единое оформление для всех страниц сайта.
Но самый большой плюс заключается в легкости изменения дизайна всего ресурса. Изменяя одно значение для фона, верстальщик получает новый бэкграунд на всех страницах, где это правило использовалось.
Валидация страницы
При продвижении сайта важную роль играет его валидность: «правильность» кода и соответствие его стандартам. Так как в настоящее время распространены два стандарта HTML – 4 и 5, то используются различные виды объявления типа документа:
- Strict. Не включает теги font, и пр. Это «строгий» набор правил для верстки на HTML 4.
- Transitional. Используется для сайтов, которые были написаны до появления новых стандартов. Разрешены устаревшие теги.
- HTML. Поддержка последнего стандарта.
Каждый документ должен ссылаться на правила и соблюдать их. Используются только те элементы, которые разрешены стандартом. В связи с этим в новом стандарте указываются теги, которые считаются устаревшими. Их использование не рекомендуется. К ним относится большая часть тегов, предназначенных исключительно для форматирования контента.
Проверить валидность сайта можно на официальном сайте W3C – организации, где создаются стандарты.
Теги форматирования текста html
Их можно разделить на оформительские и логические.
Последние меняют стиль, но при этом показывают и назначение блока контента. Например, цитаты или машинный код.
Рассмотрим все элементы, которые позволяют оформить текстовую часть сайта.
- — Жирное выделение.
- — Установка цвета и шрифта по умолчанию для страницы. Не рекомендуется к использованию.
- — Увеличивает размер шрифта на одну условную единицу. Всего их семь. Стандартный не оформленный символ имеет размер 3. Вложение тегов будет увеличить на дополнительную единицу на каждом уровне. В CSS аналогом является свойство font-size.
- — Логическая метка текста как цитаты или сноски. Символы оформляются курсивом, но это можно изменить в таблице стилей.
- Вывод символов, которые помечаются как программный код. Оформляется моноширинным текстом уменьшенного размера (все символы имеют одинаковую ширину).
- — Необходимо заключать в этот тег первое упоминание термина в статье.
Отображается курсивом во всех браузерах.
- — Используется для привлечения внимания к фрагменту контента. Выделяется курсивом. Аналог CSS font-style.
- — Самый запрещенный тег для текста в современной разметке. Браузеры его еще поддерживают, так как многие встроенные редакторы используют его для указания размера и шрифта. Но при ручной верстке не рекомендуем применять такой способ форматирования. Лучше пользоваться свойствами CSS font-size и color – аналоги написания.
- — Курсив. Не осуждается последним стандартом, но рекомендуется использовать font-style.
- - Обозначает моноширинным шрифтом имитацию напечатанного на клавиатуре текста.
- — Логическое выделение контента. Дополнительно Chrome и FireFox подсвечивают его желтым фоном.
Абзац. Контент, помеченный этим тегом начинается с новой строки. Между ними ставится отступ. Не требует закрывающего тега, новый абзац начинается при появлении любого блочного элемента.

Используется для оформления текста так, как он был указан при верстке. По умолчанию в HTML любое количество подряд идущих пробелов трансформируются в один, а обычные переносы не учитываются. Элемент pre учитывает положение символов.>
— Выделение цитат, текст отображается в кавычках.
- — Отображает символы как на результат выполнения программы на экран. Используется моноширинный шрифт.
- — Выполняет действия, обратные элементу big, уменьшая размер символов на условную единицу.
- — Зачеркивает текст. Аналог сокращенного элемента. Не рекомендуется использовать. Аналог CSS text-decoration со значением line-through.
- — Жирное начертание. Логически акцентирует текст.
- — Показывает символ в нижнем индексе. Размещается ниже стандартной базовой линии, на которой располагаются символы, и имеет уменьшенный размер.
В CSS используется vertical-align.
- — При выводе кода компьютерной программы все переменные заключаются в этот тег. Выделяет их курсивом.
- — Показывает текст так, как он записан в коде страницы. Аналогично pre.
Специальные символы
Помимо текста и медиа-контента, на страницу можно выводить небольшие изображения. Они выглядят как иконки, но вставляются в текст не картинками, а спецсимволами. Некоторые примеры приведены в таблице.
Также в HTML 5 появились деньги, карточные масти и знаки гороскопа.
Используйте в разметке Html текстовые теги, которые подчеркивают логическое значения текста. Не стоит оформлять каждый фрагмент контента отдельно. Это допустимо только в случае, если вы точно знаете, что такое форматирование больше нигде не повторяется. Для одинаковых стилей используйте классы CSS.
В дальнейшем такой подход поможет сэкономить время на изменении дизайна, а также повысить шансы на попадание в ТОП поисковых систем.
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.
| Код HTML | Описание | Пример |
|---|---|---|
| Текст | Жирное начертание текста | Текст |
| Текст | Курсивное начертание текста | Текст |
| Текст | Верхний индекс | e=mc 2 |
| Текст | Нижний индекс | H 2 O |
Текст | Текст пишется как есть, включая все пробелы | Текст |
| Текст | Курсивный текст | Текст |
| Текст | Жирное начертание текста | Текст |
Любые теги форматирования текста можно использовать совместно друг
с другом.
Чтобы сделать текст одновременно жирным и курсивным шрифтом
используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.
Пример 1. Жирный курсивный текст
ТекстОн словно вырезан из камня, стоек и неподвижен в отличие от его противников. Дух и жизненная сила в нём достигла совершенства. Но вот беда — никто не смеет принять его вызов.
Результат данного примера показан на рис. 1.
Рис. 1. Вид курсивного жирного начертания текста
Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).
Пример 2. Создание нижнего индекса
ТекстФормула изумруда: Be3 Al2(SiO3)6
Результат данного примера показан на рис. 2.
Рис. 2. Нижний индекс в тексте
Теги и выполняют те же функции, что теги и ,
но написание последних короче, привычней и удобней.
Следует отметить, что теги и , также как и являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает жирный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
Приведем описание тегов физического форматирования. Часть
из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным
выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.
0, однако
они продолжают поддерживаться браузерами.
Тег
Тег отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега использовать тег логического форматирования . Например:
Это полужирный шрифт.
Рис. 1.2. Примеры физического форматирования текста (браузером Netscape)
Тег
Тег отображает текст курсивом. Для большинства случаев вместо этого тега рекомендуется использовать теги , , или , поскольку последние лучше отражают назначение выделяемого текста. Например:
Выделение курсивом
Тег
Тег отображает текст моноширинным шрифтом. Для
большинства случаев вместо этого тега лучше использовать теги , или . Пример:
Это моноширинный шрифт.
Тег
Тег отображает текст подчеркнутым. Отмененный
тег.
Вместо него рекомендуется использовать теги или .
Например:
Пример подчеркивания текста.
Теги и
Теги и отображают текст, перечеркнутый
горизонтальной линией. Отмененный тег. Вместо него следует использовать тег . Например:
Пример зачеркнутого текста.
В настоящее время тег поддерживается не всеми
браузерами, поэтому пока рекомендуется использовать в сочетании
с тегом . А именно, внутрь тега-контейнера можно вложить
пару тегов
….
Тег
Тег выводит текст шрифтом большего (чем непомеченная часть текста) размера. Вместо данного элемента лучше использовать или теги заголовков, например,
Шрифт большего размера.
Тег
Тег выводит текст шрифтом меньшего размера.
Поскольку в HTML нет тега, противоположного по действию тегу , то
для этих целей можно применять тег .
Большинство браузеров поддерживают
вложенные теги , однако использовать такой подход не рекомендуется.
Например:
Шрифт меньшего размера.
Тег
Тег сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:
Пример шрифта для нижнего индекса.
Тег
Тег сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:
Пример шрифта для верхнего индекса.
Тег
Тег отображает мигающий текст. Этот тег не
входит в спецификацию HTML и поддерживается только браузером Netscape. Опытные
разработчики крайне редко прибегают к использованию этого тега, поскольку наличие
на странице мигающих символов раздражает многих пользователей.
Тег
Тег-контейнер является аналогом тега уровня блока
. Может использоваться в тех случаях, когда требуется отметить фрагмент текста для задания его свойств, и при этом не удается использовать никакой другой структурный тег форматирования.
Браузер Microsoft Internet Explorer дополнительно разрешает использование следующих параметров тега: DIR, DATAFLD, DATAFORMATAS, DATASRC. Описание параметров можно найти во второй части книги.
Рис. 1.3. Использование вложенных тегов форматирования текста
Теги форматирования могут быть вложенными друг в друга. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере. На рис. 1.3 показан пример использования вложения элемента курсива в элемент полужирного шрифта. Использован следующий фрагмент HTML-кода:
Это полужирный шрифт.
Это курсив.
А здесь текст полужирный и курсивныйВ>
Тег
Тег указывает параметры шрифта.
Он относится
к тегам физического форматирования уровня текста.
Назначение параметров шрифта непосредственно в тексте документа нарушает основную идею разделения содержательной части документа и описания формы представления документа. Поэтому в спецификации HTML 4.0 данный тег, а также тег отнесены к отмененным. Их дальнейшее применение не рекомендуется.
Несмотря на эти грозные предупреждения, видимо, для самых простых документов физическое форматирование можно считать допустимым. Кроме того, начинать обучение основам форматирования проще всего именно с правил непосредственного указания форматов элементов. До стилевого оформления начинающий разработчик должен еще дорасти.
Тег относится к последовательным элементам, поэтому не может включать в себя элементы уровня блока, например,
Или
| Текст внутри ячейки таблицы |
Как применить курсив в HTML — Инструкции
Как применить курсив в HTML с помощью CSS
В этом руководстве показано, как применять курсив в HTML. Чтобы применить курсив в HTML, вы должны использовать правило стиля CSS и свойство «font-style». При необходимости вы можете применить стиль CSS, используя встроенный, внутренний или внешний CSS, хотя встроенный стиль обычно не рекомендуется. Свойство «font-style» также зависит от свойства CSS «font-family», которое установлено в данный момент, так как шрифты для выделения курсивом должны иметь доступный курсив. Однако, если они этого не делают, вы также можете попытаться выделить шрифты курсивом, используя наклонное значение.
CSS-свойство font-style использует текстовые значения «курсив», «наклон» или «обычный».
Чтобы применить курсив к шрифтам, имеющим вариант курсива, используйте значение italic. Чтобы имитировать появление курсива для шрифтов, у которых нет варианта курсива, вы можете использовать наклонное значение. Наклонное значение пытается наклонить шрифты без определенной вариации курсива. Вместо этого, чтобы указать обычное начертание шрифта, используйте значение normal.
Чтобы применить курсив в HTML с помощью CSS, поместите курсор метки вставки в то место во внешнем, внутреннем или встроенном стиле CSS, куда вы хотите добавить свойство font-style. Затем введите имя свойства font-style. Затем введите символ двоеточия. Наконец, введите либо текстовое значение «italic», если семейство шрифтов для выделения курсивом имеет доступный курсив, либо введите «oblique», если семейство шрифтов для выделения курсивом не имеет доступного курсива.
В следующих примерах показано, как применить курсив в HTML, применив свойство font-style в качестве встроенного стиля CSS к тегу абзаца и тегу span.
В примере тега абзаца используется текстовое значение «курсив» в стиле шрифта. В примере span используется «наклонное» текстовое значение в стиле шрифта.
| Свойство: | стиль шрифта |
| Значение: | Либо «курсив», либо «наклонный», либо «обычный» |
| Пример 1: | Это абзац шрифта без засечек с курсивом. |
| Пример 2: | Это предложение в абзаце моноширинным шрифтом с курсивом , примененным к одному слову.< /p> |
| Результат 1: | Это абзац шрифтом без засечек с курсивом. |
| Результат 2: | Это предложение, выделенное моноширинным шрифтом в абзаце с курсивом, примененным к одному слову. |
Изображение, показывающее, как применить курсив в HTML с помощью встроенного стиля CSS.

Как применить курсив в HTML с помощью тега курсива
Кроме того, вы можете использовать старые теги курсива HTML и для обозначения курсивного текста в HTML, который большинство веб-браузеров все еще правильно интерпретируют. Технически этот тег теперь называется идиоматическим текстовым тегом. В HTML5 вы можете использовать набор тегов и для отображения смещенного текста внутри обычного текста. Например, вы можете использовать это, чтобы показать техническое имя, идиому иностранного языка или мысль в обычном предложении.
Чтобы применить курсив с помощью тега курсив в HTML, введите текст абзаца. Затем введите тег там, где вы хотите начать выделенный курсивом текст. Затем введите текст, который нужно выделить курсивом. Затем введите тег там, где вы хотите, чтобы курсив остановился. Затем продолжайте вводить обычный текст предложения. В следующем примере показан пример использования старых курсивных тегов в HTML для обозначения научного названия растения.
| Начальный тег: | <я> |
| Конечный тег: | |
| Пример: | Научное название одуванчика – Taraxacum officinale. |
| Результат: | Научное название одуванчика Taraxacum officinale . |
Как применить курсив в HTML с помощью тега выделения
Кроме того, для выделения текста курсивом в HTML лучше использовать набор тегов выделения и . Эти теги применяют визуальный курсивный стиль, но также указывают веб-браузерам, чтобы подчеркнуть важность текста. Средства чтения с экрана выделяют текст, отмеченный тегами выделения, при чтении вслух.
Чтобы применить курсив с помощью тега выделения в HTML, введите текст абзаца. Затем введите тег в том месте, где вы хотите начать выделенный текст. Затем введите текст для выделения.
Затем введите тег в том месте, где вы хотите остановить выделение. Затем продолжайте вводить обычный текст предложения. В следующем примере показано, как использовать тег выделения, чтобы показать, что человек, произносящий предложение, подчеркнул слово «делать», произнося его вслух.
| Начальный тег: | <эм> |
| Конечный тег: | |
| Пример: | Что делать вы хотите? |
| Результат: | Какие делать вы хотите? |
Инструкции по применению курсива в HTML с помощью CSS:
- Чтобы применить курсив в HTML с помощью CSS , поместите курсор метки вставки в то место во внешнем, внутреннем или встроенном стиле CSS, где вы хотите добавьте свойство стиля шрифта.
- Затем введите имя свойства стиля шрифта.
- Затем введите двоеточие.

- Наконец, введите либо текстовое значение «italic», если семейство шрифтов для выделения курсивом имеет доступный курсив, либо введите «oblique», если семейство шрифтов для выделения курсивом не имеет доступного курсива.
Инструкции по применению курсива в HTML с помощью тега курсив:
- Кроме того, чтобы применить курсив с помощью тега курсив в HTML , введите текст абзаца.
- Затем введите тег там, где вы хотите начать выделенный курсивом текст.
- Введите текст курсивом.
- Затем введите тег в том месте, где должен заканчиваться курсив.
- Затем продолжайте вводить обычный текст предложения.
Инструкции по применению курсива в HTML с использованием тега выделения:
- Чтобы применить курсив с использованием тега выделения в HTML , введите текст абзаца.
- Затем введите тег в том месте, где вы хотите начать выделенный текст.

- Затем введите текст, который необходимо выделить.
- Затем введите тег в том месте, где вы хотите остановить выделение.
- Затем продолжайте вводить обычный текст предложения.
В следующем видеоуроке под названием «Выделение текста (жирным и курсивом)» показано, как выделить текст в HTML жирным шрифтом и выделить его курсивом с помощью CSS. Этот видеоурок является частью нашего полного курса обучения HTML5 и CSS3 под названием «Освоение HTML5 и CSS3 Made Easy v.1.0».
О Джозефе Браунелле
Как выбрать правильный тег HTML, чтобы сделать текст курсивом?
Как выбрать правильный тег HTML, чтобы сделать текст курсивом?
Как выбрать правильный тег HTML, чтобы сделать текст курсивом?
Узнайте, как выбрать правильный тег HTML, чтобы сделать текст курсивом.
Суфиян Хан Фироз Хан
Обновлено — 26 апреля 2022 г. Чтение: 3 мин. Опубликовано: 26 апреля 2022 г.
Опубликовано:
26 апр. 2022
Как выбрать правильный тег HTML, чтобы сделать текст курсивом?
В HTML у нас есть два тега для выделения текста курсивом:
- .. тег
- .. тег
Теперь возникает вопрос, какой из них использовать, когда и в чем основное различие между ними? Давайте рассмотрим их более подробно, чтобы понять основное различие.
1. Тег
..Полная форма em в теге выделена. Этот тег используется для выделения текста курсивом, когда мы хотим подчеркнуть смысл этого текста.
Пример:
Код:
Он самый умный мальчик в классе.
Выход:
Он *самый* умный мальчик в классе.![]()
2. Тег
..Этот тег также используется для выделения текста курсивом, но не для его выделения. Обычно он используется, когда мы хотим, чтобы некоторые конкретные данные или определенное слово отображались иначе, чем другие слова, чтобы передать их важность.
Пример:
Код:
Сурат — алмазный центр Индии.
Выход:
*Сурат* является алмазным центром Индии.
Так какая разница? С точки зрения внешнего вида текста оба они одинаковы, но главное отличие состоит в том, что оба они передают разное значение. Давайте посмотрим на несколько примеров для ясного понимания.
Пример 1. Выделение текста курсивом с помощью тега HTML
…Пример
Код:
<голова>
выберите правильный HTML-тег, чтобы выделить текст курсивом
голова>
<тело>
Это
лучший колледж в городе.
Текст best выделен курсивом в заголовке выше.
тело>
Вывод:
Пример 2. Выделение текста курсивом с использованием тега HTML
…Пример:
<голова>
выберите правильный HTML-тег, чтобы выделить текст курсивом
голова>
<тело>
Поздравляем с переходом на
миллион подписчиков на YouTube.
Текст один миллион выделен курсивом в заголовке выше.
тело>
Вывод:
Пример 3. Одновременное использование обоих тегов HTML
Пример:
<голова>
выберите правильный HTML-тег, чтобы выделить текст курсивом
голова>
<тело>
Алхимик — это потрясающая книга.
Тексты Алхимик и удивительно выделены курсивом в заголовке выше.
тело>
Результат:
Пример 4. Выделение текста курсивом с использованием свойства CSS font-style
Мы также можем использовать свойство CSS font-style, чтобы сделать текст курсивом.
Пример:
<голова>
выберите правильный HTML-тег, чтобы выделить текст курсивом
голова>
<тело>
Я обычный заголовок
Я выделен курсивом с помощью свойства font-style
тело>
Результат:
Подробнее
Если вы хотите узнать больше о тегах HTML , нажмите здесь.
Если вы хотите узнать больше о свойствах шрифта CSS , нажмите здесь
Поддержка браузера
Оба этих тега HTML поддерживаются почти всеми браузерами.
Заключение
- В HTML у нас есть два тега для выделения текста курсивом.

- Тег используется для выделения текста курсивом, когда мы хотим подчеркнуть значение этого текста.
- Тег обычно используется, когда мы хотим, чтобы некоторые определенные данные или определенное слово отображались иначе, чем другие слова, чтобы передать их важность.
- Технически оба этих тега имеют одинаковый эффект курсива для указанного текста.
Время испытаний!
Время проверить свои навыки и выиграть награды!
Примечание. Награды будут начислены после следующего обновления продукта.
Какой элемент HTML использовать для курсивного текста? Это может быть , , а не | от МасаКудаматсу | На пути к более красивой веб-типографике
ПРИМЕЧАНИЕ. Если вы не являетесь пользователем Medium, нажмите здесь, чтобы прочитать эту статью.
TL;DR, отрендеренный в Zapfino с ранней эстетикой экрана компьютера 🙂 Всякий раз, когда мы, как веб-разработчики, сталкиваемся с курсивным текстом, мы должны пометить его , а не , потому что является семантическим, а — нет.
..
Ну, это неправильно, я недавно узнал. В зависимости от цели выделения слов курсивом следует использовать , , или .
Удивлены? Тогда читайте дальше.
Прежде чем говорить о HTML, нам нужно поговорить о том, когда использовать курсив. Согласно Чикагскому руководству по стилю (издание 2017 г.), библии стиля письма для американского английского, выделение слов курсивом преследует как минимум шесть основных целей. (Сообщите мне, если я что-то пропустил.)
- Выделение
- Ключевые термины
- Слова на иностранных языках
- Слова, используемые как слова (например, «Термин слово относится к последовательности букв, которая имеет определенное значение».)
- Буквы, используемые как буквы (например, « s является буквы на английском языке.»)
- Названия книг, журналов, фильмов, картин и других творческих работ
Давайте посмотрим, как каждая цель диктует, какой элемент HTML использовать.
В разделе 7.50 Чикагского руководства по стилю упоминается пример
Это было Лео!
, чтобы сказать, что «выделение в этом примере зависит от курсива».
И это ударение меняет смысл предложения. Выделение курсивом слова вместо означает, что все остальные думают, что это не Лео. Например, когда вы выделяете курсивом Лео , это будет означать, что все остальные думают, например, что это был Боб. Смысл предложения меняется, пусть и незначительно.
В этом случае веб-разработчики должны использовать . По состоянию на 7 мая 2021 г. в §4.5.2 стандарта HTML Living Standard указано:
Элемент
emпредставляет ударение в его содержании. … Размещение ударения меняет смысл предложения.
MDN в элементе , последняя версия изменена 23 апреля 2021 г., то же самое указано с примером:
…
предназначен для «изменения значения предложения, как это делает ударение в речи («Я люблю морковь» против «Я люблю морковь »)
Это просто.
Но это не вся история.
Раздел 7.56 Чикагского руководства по стилю гласит:
Ключевые термины в конкретном контексте часто выделяются курсивом при первом их появлении. После этого их лучше всего набирать римским шрифтом.
Иногда полужирный шрифт может использоваться для ключевых терминов, как в учебнике, или для выделения терминов, которые также встречаются в глоссарии; такое использование должно быть отмечено в тексте.
Если вы используете жирный шрифт для другой цели, вам может понадобиться использовать курсив для обозначения слов в качестве ключевых терминов.
Такое использование курсива не меняет смысла предложения. Так что не подходит.
Вместо этого мы, вероятно, должны использовать . HTML Living Standard § 4.5.21 гласит:
Элемент
bпредставляет собой фрагмент текста, к которому привлекается внимание в утилитарных целях, без передачи какой-либо дополнительной важности и без намека на альтернативный голос или настроение, например ключевые слова в аннотации к документу, названия продуктов в обзоре, действенные слова в интерактивном текстовом программном обеспечении или предисловие к статье.![]()
МДН на 9Элемент 0381 , последняя версия которого была обновлена 27 марта 2021 г., также указывает:
. другие фрагменты текста, обычное представление которых было бы выделено жирным шрифтом (но не включая какую-либо особую важность).
MDN для элемента , последнее обновление версии от 23 апреля 2021 г., также указано:
… элемент
используется для привлечения внимания к тексту без указания того, что он важнее.
Это мое лучшее предположение. Дайте мне знать, если вы не согласны.
Раздел 7.53 Чикагского руководства по стилю гласит:
Используйте курсив для отдельных слов и фраз из другого языка, если они не встречаются в Webster’s или другом стандартном англоязычном словаре. … Если слово из другого языка становится знакомым из-за многократного использования в произведении, оно должно быть выделено курсивом только при первом употреблении.
Однако, если он появляется редко, курсив можно сохранить.
с двумя примерами:
- Ее любовь к футболу и теленовеллам отличала ее от книжных сверстников.
- Слово, которое он использовал, Kaffeetasse (кофейная чашка), было достаточно точным, чтобы получить желаемый результат.
Это не меняет смысла предложения. Не обращает на это внимание. Это просто указывает, что это не английское слово.
Для такого использования курсивного текста веб-разработчики должны выбрать с атрибутом lang , указывающим язык.
В соответствии с HTML Living Standard §4.5.20:
Элемент
iпредставляет фрагмент текста с другим голосом или качество текста, такое как таксономическое обозначение, технический термин, идиоматическая фраза из другого языка , транслитерация , мысль или название корабля в западных текстах.![]()
Термины на языках, отличных от основного текста, должны быть снабжены атрибутами
lang.(выделено автором жирным шрифтом)
MDN для элемента , версия, последний раз обновленная 27 марта 2021 г., ссылается на эти примеры использования и добавляет:
Исторически они были представлены с использованием курсивного шрифта, который является исходным источником
наименования этого элемента.
В этом случае я почти уверен, что мы должны использовать .
Раздел 7.63 Чикагского руководства по стилю гласит:
Когда слово или термин не используется функционально, но упоминается как само слово или термин, оно либо выделяется курсивом, либо заключается в кавычки.
с двумя примерами:
- Термин критическая масса чаще используется метафорически, чем буквально.

- Что подразумевается под нейроботикой ?
Для такого использования курсивного текста мы должны использовать , судя по следующему примеру в MDN на элементе , последняя версия обновлена 27 марта 2021 года:
Другое пример для
может быть: «Слово является артиклем».
В точном примере, упомянутом в документации, я уверен, что в этом случае правильно использовать .
Раздел 7.64 Чикагского руководства по стилю гласит:
Отдельные буквы и комбинации букв латинского алфавита обычно выделяются курсивом.
с несколькими примерами:
- буква q
- строчные n
- прописные W
- Множественное число обычно образуется в английском языке путем добавления s или es .

- Он подписал документ цифрой X .
- Мне нужно слово с двумя e и тремя s .
Для этого курсивного текста я не могу найти ни одного примера, упомянутого в HTML Living Standard или MDN. Но элемент , скорее всего, будет уместен, учитывая, что это аналогичное использование курсива для слов как слов. Дайте мне знать, если вы не согласны.
Раздел 8.2 Чикагского руководства по стилю гласит:
Чикаго предпочитает выделять курсивом названия основных или отдельных произведений, таких как книги, журналы, фильмы и картины.
Для такого использования курсивного текста соответствующим элементом HTML является . HTML Living Standard §4.5.6 гласит:
Элемент
citeпредставляет название произведения (например, книги, статьи, эссе, стихотворения, партитуры, песни, сценария)., фильм, телепередача, игра, скульптура, картина, театральная постановка, пьеса, опера, мюзикл, выставка, судебный отчет, компьютерная программа и т. д.).
Обратите внимание, что в разделе 8.163 Чикагского руководства по стилю упоминается, что кавычки также могут быть кандидатом на название творческого произведения:
Выбор курсива или кавычек для названия произведения цитируемость в тексте или примечаниях определяется типом работы. Названия книг и периодических изданий выделены курсивом…; названия статей, глав и других более коротких работ набираются прямым шрифтом и заключаются в кавычки …
с примерами
- Многие редакторы используют Чикагское руководство по стилю .
- См. статью «Сравнение стилей MLA и APA».
Таким образом, заголовки статей, глав и т. д. также должны быть помечены тегом , но в другом стиле, возможно, с использованием псевдоэлементов ::before и ::after для добавления кавычек перед и после текстового содержания.



1.4 показано отображение примера браузером
Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana,
при его отсутствии будет использован шрифт Arial и т. д.
После закрывающего тега действие тега
восстанавливается. Значения параметров шрифтов, используемых по умолчанию, могут
неоднократно переопределяться в документе, т. е. тег может
появляться в документе любое количество раз.
Изначально он равен 3 (по умолчанию). Затем устанавливается
равным 2, далее — 4. Обратите внимание на отображение данного примера (рис.
1.7). Видно, что для таблиц назначение тега не действует. Это
характерно для многих браузеров, хотя формально нарушает идею применения тега.


И, если в редакторе Word нам в помощь панель инструментов, то при составлении текстового html документа потребуются теги форматирования.
Например: color=»blaсk» — черный цвет.
Надеюсь, что вам теперь понятен метод работы с тегами html и этот материал не окажется лишним, при создании вами своего сайта.
Однако, если он появляется редко, курсив можно сохранить.
, фильм, телепередача, игра, скульптура, картина, театральная постановка, пьеса, опера, мюзикл, выставка, судебный отчет, компьютерная программа и т. д.).