29. Акцентирование (выделение) текста в HTML

Кратко

Акцентирование текста в 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

1. Напишите тег <big>. Далее вложите в тег <big> тег <b> и напишите внутри любой текст
2. Ниже напишите текст и установите курсивное начертание шрифта для него при помощи тега

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.