Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

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

@codebra_official
Подписывайся на наш 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>. Следовательно, выгоднее использовать тег, который короче. Далее пример:

Пример (html)
<b>Жирный текст</b> 

Примечание (10.2024)

Под «выгоднее» я имею ввиду удобство для вас. Если нужно выделить фрагмент текста и показать его важность (для браузера и поисковика), то используйте тег <strong>.

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

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

За акцентирование курсивным шрифтом отвечают теги <i> и <em>. Как сказано выше, они различны по своей направленности, но в современных браузерах визуально эквивалентны. Далее пример курсивного начертания текста с помощью тегов HTML:

Пример (html)
<i>Курсивный текст</i> 

Подчеркнутый текст

Акцентировать текст подчеркнутым шрифтом можно при помощи тега <u>. Этот тег осуждают спецификацией HTML и рекомендуют использовать стили CSS. Я обязательно напишу эквиваленты тегов акцентирования в CSS. Далее пример:

Пример (html)
<u>Подчеркнутый текст</u> 

Зачеркнутый текст

Для того чтобы зачеркнуть текст с помощью HTML, используют два эквивалентных тега: <s> и <strike>. Эти два тега осуждают и рекомендуют взамен им использовать стили CSS. А тег <strike> категорически запрещен в HTML5. Далее пример:

Пример (html)
<strike>Зачеркнутый текст</strike> 

Крупнее и мельче обычного текста

Акцентировать текст, можно и увеличив размер это текста. Для этого есть тег <big>. Чтобы текст был мельче обычного, применяют тег <small>. Но все же удобнее использовать стили CSS, о которых мы будем говорить позднее. Далее пример использования тега <big>:

Пример (html)
<big>Крупнее текст</big> 

Далее мы забежим вперёд и познакомимся с некоторыми стилями CSS.

Замена жирного текста стилями CSS

Есть такое свойство в CSS – font-weight. Оно принимает много значений: 

Пример (css)
font-weight:bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900 

Чтобы сделать текст самым жирным, нужно использовать значение font-weight: 900. О нем мы еще поговорим в следующих уроках.

Замена курсивного текста стилями CSS

В CSS есть аналог тегу <i> (курсивный текст). Это свойство font-style. Далее пример:

Пример (html)
<span class = "i">Курсивный текст</span> 

Пример (css)
.i {
     font-style: italic;
 } 

Замена подчеркнутого текста стилями CSS

Тег <u> осуждается спецификацией HTML, поэтому рекомендуется использовать стили CSS. Аналогом может служить свойство text-decoration. Я обычно его использую, чтобы убрать подчеркивание у ссылок (значение none), но в этом случае нам нужно добавить подчеркивание (значение underline). Далее пример:

Пример (html)
<span class = "u">Подчеркнутый текст</span> 

Пример (css)
.u {
     text-decoration: underline;
 } 

В этом уроке научились акцентировать текст и познакомились с некоторыми свойствами CSS, которые могут визуально заменить перечисленные теги. Далее поговорим о цитатах в HTML.

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Курс по Python от CodebraЗнакомство с Python
Альтернативный текст и группировка элементов тегом figure в HTMLИзображения в HTML
Первое знакомство с PythonЗнакомство с Python
Селекторы атрибутов: простой выборСелекторы в CSS
Вводный урок по курсу HTML и CSSЗнакомство с HTML
Структура документа: сестринские элементы в CSSСелекторы в CSS
Структура документа: дочерние элементы в CSSСелекторы в CSS
Структура документа: родитель-потомок в CSSСелекторы в CSS
Селекторы атрибутов: по частичному значениюСелекторы в CSS
Раздел «Разметка текста в HTML»
22. УРОК: 1. Заголовки и подзаголовки в HTML
23. ПРАКТИКА: 2. Заголовки и подзаголовки в HTML (практика 1)
24. УРОК: 4. Что такое абзац в HTML (тег P)
25. УРОК: 6. Перенос строки (br) и разделительная линия (hr) в HTML
26. ПРАКТИКА: 7. Практикуемся в переносе строки с помощью HTML
27. УРОК: 9. Нумерованный список в HTML
28. УРОК: 11. Что такое маркированный список в HTML
УРОК 29. 13. Акцентирование (выделение) текста в HTML
Вы здесь
30. ПРАКТИКА: 14. Жирно-курсиво-перечеркнутый
31. УРОК: 16. Цитаты в HTML
32. УРОК: 18. Верхний и нижний индексы в HTML
33. УРОК: 20. Универсальные атрибуты в HTML
34. ТЕСТ: 21. Тест по разделу «Разметка текста в HTML»
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 3. Ссылки в HTML
Раздел 4. Изображения в HTML
Раздел 5. Таблицы в HTML
Раздел 6. Формы в HTML
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно