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

Продолжаем изучать язык HTML. Уроки по нумерованным и маркированным спискам позади. Пора разобраться как выделить жирным и курсивным начертаниями текст на HTML-странице. В этом уроке изучим акцентирование текста.

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

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

В HTML предусмотрены стандартные «выделители» текста: жирное начертание, косое (курсивное) начертание, подчеркнутое начертание, зачеркнутое начертание, больше размера и меньше размера текста. Пробежимся по всем элементам акцентирования.

Жирный текст

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

Различие заключается в том, что тег <b> определяет физическую жирность текста, а тег <strong> определяет важность этого текста и выделяет его жирным начертанием. Но, большое «но», в современных браузерах их права «уравняли», они стали равнозначными (эквивалентными).

Такая же ситуация и у тегов <i> и <em>. Следовательно, выгоднее использовать тег, который короче. Далее пример:

<b>Жирный текст</b>

Далее поговорим о курсивном начертании текста.

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

За акцентирование курсивным шрифтом отвечают теги <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.

Урок 22. Цитаты в HTML