Bootstrap 4.3 | Зачем нужны классы h1 — h6? — efim360.ru

Bootstrap 4.3 | Зачем нужны классы h1 - h6?

В мобильной версии страницы стандартные HTML элементы H1-H6 могут выглядеть сильно больше, чем это нужно для размеров блоков. Может появляться горизонтальная прокрутка. Напоминаю, что в 2020 году - это очень НЕ круто.

"Первый экран" который увидит пользователь на мобилке скорее всего будет содержать HTML заголовок H1. В некоторых тематиках этот заголовок будет содержать длинные слова, которые нужно будет переносить классом "text-break". Из-за этого может получиться так, что перенесённая одна буква от слова будет занимать целую строку места на экране пользователя. Убого и растратно. Оно вам надо?

Как уменьшить размер заголовка в Bootstrap? (способ без правки основных конфигов)

Чтобы этого избежать, можно воспользоваться подменой размеров HTML заголовков и присваивать им классы с одноимёнными названиями. Это нужно делать для того, чтобы не страдало SEO. Есть куча алгоритмов ранжирования, которые в первую очередь смотрят на разметку, а уже потом на "визуальный" внешний вид.

 

Итак может получиться:

<h1 class="h3">Я волшебный верстальщик</h1>

В этом примере элемент разметки "h1" имеет класс "h3". Визуально текст заголовка уменьшится и сумеет эстетичнее встроиться в блок.