29. Акцентирование (выделение) текста в HTML
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
КраткоАкцентирование текста в HTML
- Акцентирование текста помогает выделить важную информацию.
- В HTML предусмотрены стандартные теги для акцентирования: жирный, курсивный, подчеркнутый, зачеркнутый, крупнее и мельче обычного текста.
Жирный текст
- Теги
<b>
и<strong>
определяют жирность и важность текста, соответственно.- В современных браузерах они стали равнозначными.
- Рекомендуется использовать тег
<strong>
для выделения важного текста.Курсивный текст
- Теги
<i>
и<em>
отвечают за курсивное начертание.- В современных браузерах они визуально эквивалентны.
Подчеркнутый текст
- Тег
<u>
используется для подчеркнутого текста.- Рекомендуется использовать стили CSS вместо тега
<u>
.Зачеркнутый текст
- Теги
<s>
и<strike>
используются для зачеркнутого текста.- Эти теги осуждаются и рекомендуется использовать стили CSS.
- Тег
<strike>
запрещен в HTML5.Крупнее и мельче обычного текста
- Тег
<big>
увеличивает размер текста.- Тег
<small>
уменьшает размер текста.- Удобнее использовать стили CSS для изменения размера текста.
Замена жирного текста стилями CSS
- Свойство
font-weight
в CSS принимает значения от0
до900
.- Для самого жирного текста используется значение
900
.Замена курсивного текста стилями CSS
- Свойство
font-style
в CSS может заменить тег<i>
.Замена подчеркнутого текста стилями CSS
- Свойство
text-decoration
в CSS может заменить тег<u>
.- Значение
underline
добавляет подчеркивание.Итоги урока
- Научились акцентировать текст с помощью тегов HTML.
- Познакомились с некоторыми свойствами CSS для замены тегов.
- В следующем уроке поговорим о цитатах в HTML.
Продолжаем изучать язык HTML. Уроки по нумерованным и маркированным спискам позади. Пора разобраться как выделить жирным и курсивным начертаниями текст на HTML-странице. В этом уроке изучим акцентирование текста.
Акцентировать текст в большом количестве информации – хорошая идея. Ведь пользователь может не заметить нужной, важной или еще какой-то информации, которую вы хотели донести.
Например, я тоже акцентирую текст: теги, стили, атрибуты, ключевые слова, ссылки и прочее выделяю своим цветом, но делаю это при помощи стилей.
В HTML предусмотрены стандартные «выделители» текста: жирное начертание, косое (курсивное) начертание, подчеркнутое начертание, зачеркнутое начертание, больше размера и меньше размера текста. Пробежимся по всем элементам акцентирования.
Жирный текст
Начнем со всеми известным жирным начертанием шрифта, который можно увидеть повсюду. Для этого было разработано два тега <b>
и <strong>
. Тег <b>
, более распространенный. Эти теги не одинаковы, хоть и результат схож.
Различие заключается в том, что тег <b>
определяет физическую жирность текста, а тег <strong>
определяет важность этого текста и выделяет его жирным начертанием. Но, большое «но», в современных браузерах их права «уравняли», они стали равнозначными (эквивалентными).
Такая же ситуация и у тегов <i>
и <em>
. Следовательно, выгоднее использовать тег, который короче. Далее пример:
<b>Жирный текст</b>
Примечание (10.2024)Под «выгоднее» я имею ввиду удобство для вас. Если нужно выделить фрагмент текста и показать его важность (для браузера и поисковика), то используйте тег
<strong>
.
Далее поговорим о курсивном начертании текста.
Курсивный текст
За акцентирование курсивным шрифтом отвечают теги <i>
и <em>
. Как сказано выше, они различны по своей направленности, но в современных браузерах визуально эквивалентны. Далее пример курсивного начертания текста с помощью тегов HTML:
<i>Курсивный текст</i>
Подчеркнутый текст
Акцентировать текст подчеркнутым шрифтом можно при помощи тега <u>
. Этот тег осуждают спецификацией HTML и рекомендуют использовать стили CSS. Я обязательно напишу эквиваленты тегов акцентирования в CSS. Далее пример:
<u>Подчеркнутый текст</u>
Зачеркнутый текст
Для того чтобы зачеркнуть текст с помощью HTML, используют два эквивалентных тега: <s>
и <strike>
. Эти два тега осуждают и рекомендуют взамен им использовать стили CSS. А тег <strike>
категорически запрещен в HTML5. Далее пример:
<strike>Зачеркнутый текст</strike>
Крупнее и мельче обычного текста
Акцентировать текст, можно и увеличив размер это текста. Для этого есть тег <big>
. Чтобы текст был мельче обычного, применяют тег <small>
. Но все же удобнее использовать стили CSS, о которых мы будем говорить позднее. Далее пример использования тега <big>
:
<big>Крупнее текст</big>
Далее мы забежим вперёд и познакомимся с некоторыми стилями CSS.
Замена жирного текста стилями CSS
Есть такое свойство в CSS – font-weight
. Оно принимает много значений:
font-weight:bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Чтобы сделать текст самым жирным, нужно использовать значение font-weight: 900
. О нем мы еще поговорим в следующих уроках.
Замена курсивного текста стилями CSS
В CSS есть аналог тегу <i>
(курсивный текст). Это свойство font-style
. Далее пример:
<span class = "i">Курсивный текст</span>
.i {
font-style: italic;
}
Замена подчеркнутого текста стилями CSS
Тег <u>
осуждается спецификацией HTML, поэтому рекомендуется использовать стили CSS. Аналогом может служить свойство text-decoration
. Я обычно его использую, чтобы убрать подчеркивание у ссылок (значение none
), но в этом случае нам нужно добавить подчеркивание (значение underline
). Далее пример:
<span class = "u">Подчеркнутый текст</span>
.u {
text-decoration: underline;
}
В этом уроке научились акцентировать текст и познакомились с некоторыми свойствами CSS, которые могут визуально заменить перечисленные теги. Далее поговорим о цитатах в HTML.
Похожие уроки Codebra
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
- Напишите тег
<big>
. Далее вложите в тег<big>
тег<b>
и напишите внутри любой текст - Ниже напишите текст и установите курсивное начертание шрифта для него при помощи тега
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.
Это займет не больше минуты.