В этой статье рассмотрим различные варианты оформления HTML заголовков, а также познакомимся с Bootstrap классами h1..h6 и page-header.

Назначение HTML заголовков

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

Корнем такой иерархии является заголовок первого уровня h1, который размещается в верхней части страницы. Заголовок h1 на веб-странице должен быть всего один и чаще всего он используется для заключения в него название статьи, новости и т.п.

Заголовок второго уровня h2 обычно используется для создания разделов внутри статьи. Заголовки третьего уровня h3 используются для создания подразделов в заголовках второго уровня.

Заголовки 4 уровня h4 обычно используют в боковых панелях. Заголовки 5 и 6 уровня веб-мастерами используются очень редко, вместо них обычно используются теги strong или em.

Но такое использование заголовков было до появления HTML5. В этой версии появились новые элементы article, aside, nav и section. Эти элементы в отличие от заголовков предназначены для создания явных разделов.

Заголовки h1...h6 в HTML 5 уже не являются «сквозными». Т.е. если они используются внутри какого-то элемента из категории sectioning, то они уже влияют только на его структуру, и не создают неявные разделы вне его. Поэтому, например, заголовок h1 может много раз использоваться на странице. Т.е. являться отправной точкой, с которой будет начинаться создания структуры каждого явного раздела веб-страницы.

Классы h1..h6 в Bootstrap

В Bootstrap 3 и 4 имеются классы h1...h6. Данные классы предназначены для стилизации некоторого контента в виде заголовка соответствующего уровня.

Например, класс h2 при добавлении его к p изменит его дизайн так, что он будет выглядеть как заголовок 2 уровня.

<p class="h2">Некоторый контент...</p>

Например, если добавить класс h2 к элементу h1, то заголовок 1 уровня будет выглядеть как заголовок 2 уровня.

<h1 class="h2">Заголовок 1 уровня, который выглядит как заголовок 2 уровня</h1>

Класс page-header (Bootstrap 3)

В Bootstrap 3 имеется класс page-header, который добавляет к элементу светло-серую нижнюю границу и дополнительные отступы сверху и снизу. В основном данный класс используется для оформления заголовка h1.

<h1 class="page-header">Название статьи</h1>

Варианты CSS оформления заголовков

В этом разделе рассмотрим как с помощью CSS можно стилизовать (оформить) заголовки на сайте.

Вариант 1.

Bootstrap - Пример оформления заголовков (вариант 1)
<style>
  .header-h1 {
    position: relative;
    margin-bottom: .5rem;
  }
  .header-h1::after {
    content: "";
    position: absolute;
    border-top: 2px solid #c62828;
    border-bottom: 2px solid #c62828;
    height: .375rem;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: -999;
  }
  .header-h1 h1 {
    font-size: 1.5rem;
    color: #c62828;
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
    padding-right: 1rem;
    text-transform: uppercase;
  }
  .header-h1-center {
    text-align: center;
  }
  .header-h1-center h1 {
    padding-left: 1rem;
  }
  .header-h1-right {
    text-align: right;
  }
  .header-h1-right h1 {
    padding-left: 1rem;
    padding-right: 0;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-center">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-right">
  <h1>Название заголовка</h1>
</div>

Вариант 2.

Bootstrap - Пример оформления заголовков (вариант 2)
<style>
  .header-h1 h1 {
    position: relative;
    padding-bottom: .5rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;
    color: #00838f;
  }
  .header-h1 h1::before {
    content: "";
    position: absolute;
    border-bottom: 2px solid #00838f;
    bottom: .25rem;
    left: 50%;
    width: 30%;
    transform: translateX(-50%);
  }
  .header-h1 h1::after {
    content: "";
    position: absolute;
    border-bottom: 2px solid #00838f;
    bottom: 0;
    left: 50%;
    width: 15%;
    transform: translateX(-50%);
  }
  .header-h1-left h1 {
    text-align: left;
  }
  .header-h1-left h1::before,
  .header-h1-left h1::after {
    left: 0;
    transform: translateX(0);
  }
  .header-h1-right h1 {
    text-align: right;
  }
  .header-h1-right h1::before,
  .header-h1-right h1::after {
    left: unset;
    right: 0;
    transform: translateX(0);
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-left">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-right">
  <h1>Название заголовка</h1>
</div>

Вариант 3.

Bootstrap - Пример оформления заголовков (вариант 3)
<style>
  .header-h1 {
    position: relative;
    margin-bottom: .5rem;
    text-align: center;
  }
  .header-h1 h1 {
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    padding: .5rem 1.5rem;
    border: .125rem solid #6a1b9a;
    color: #6a1b9a;
  }
  .header-h1 h1::after {
    content: "";
    position: absolute;
    background: #6a1b9a;
    height: .125rem;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: -999;
  }
  .header-h1-dark h1 {
    background: #6a1b9a;
    color: #fff;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-dark">
  <h1>Название заголовка</h1>
</div>

Вариант 4.

Bootstrap - Пример оформления заголовков (вариант 4)
<style>
  .header-h1 {
    position: relative;
    margin-bottom: .5rem;
    text-align: center;
  }
  .header-h1 h1 {
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    padding-left: 1rem;
    padding-right: 1rem;
    color: #f57f17;
  }
  .header-h1::after {
    content: "";
    position: absolute;
    background: #f57f17;
    height: .25rem;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: -999;
  }
  .header-h1-left {
    text-align: left;
  }
  .header-h1-left h1 {
    padding-left: 0;
  }
  .header-h1-right {
    text-align: right;
  }
  .header-h1-right h1 {
    padding-right: 0;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-left">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-right">
  <h1>Название заголовка</h1>
</div

Вариант 5.

Bootstrap - Пример оформления заголовков (вариант 5)
<style>
  .header-h1 h1 {
    padding-bottom: .125rem;
    border-top: .125rem solid #000;
    border-bottom: .125rem solid #000;
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;
  }
  .header-h1-left h1 {
    text-align: left;
  }
  .header-h1-right h1 {
    text-align: right;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-left">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-right">
  <h1>Название заголовка</h1>
</div>

Вариант 6.

Bootstrap - Пример оформления заголовков (вариант 6)
<style>
  .header-h1 {
    position: relative;
    text-align: center;
    margin-bottom: .5rem;
  }
  .header-h1 h1 {
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
    padding: 0.25rem .875rem;
    border-left: .125rem solid #e0e0e0;
    border-right: .125rem solid #e0e0e0;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #9e9e9e;
  }
  .header-h1::after {
    content: "";
    position: absolute;
    background: #e0e0e0;
    height: .125rem;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: -999;
  }
  .header-h1-left {
    text-align: left;
  }
  .header-h1-left h1 {
    padding-left: 0;
    border-left: none;
  }
  .header-h1-right {
    text-align: right;
  }
  .header-h1-right h1 {
    padding-right: 0;
    border-right: none;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-left">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-right">
  <h1>Название заголовка</h1>
</div>

Вариант 7.

Bootstrap - Пример оформления заголовков (вариант 7)
<style>
  .header-h1 {
    position: relative;
    text-align: center;
    margin-bottom: .5rem;
  }
  .header-h1 h1 {
    position: relative;
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    border-bottom: .125rem solid #a5d6a7;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #4caf50;
  }
  .header-h1 h1::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.25rem;
    transform: translateX(-1.25rem);
    border-top: 1.25rem solid #a5d6a7;
    border-left: 1.25rem solid transparent;
    border-right: 1.25rem solid transparent;
  }
  .header-h1 h1::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.125rem;
    transform: translateX(-1.25rem);
    border-top: 1.25rem solid #fff;
    border-left: 1.25rem solid transparent;
    border-right: 1.25rem solid transparent;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

Вариант 8.

Bootstrap - Пример оформления заголовков (вариант 8)
<style>
  .header-h1 {
    text-align: center;
    margin-bottom: .5rem;
  }
  .header-h1 h1 {
    background: #0097a7;
    margin-bottom: 0;
    padding: .5rem 1rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #fff;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

Вариант 9.

Bootstrap - Пример оформления заголовков (вариант 9)
<style>
  .header-h1 {
    text-align: center;
    margin-bottom: .5rem;
  }
  .header-h1 h1 {
    display: inline-block;
    position: relative;
    background: #0097a7;
    color: #fff;
    margin-bottom: 0;
    padding: .5rem 3rem;
    font-size: 1.5rem;
    text-transform: uppercase;
  }
  .header-h1 h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-left: 1.5rem solid #fff;
    border-top: 3rem solid transparent; 
    border-bottom: 3rem solid transparent;      
  }
  .header-h1 h1::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-right: 1.5rem solid #fff;
    border-top: 3rem solid transparent; 
    border-bottom: 3rem solid transparent;      
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

Вариант 10.

Bootstrap - Пример оформления заголовков (вариант 10)
<style>
  .header-h1 {
    text-align: center;
    margin-bottom: .5rem;
  }
  .header-h1 h1 {
    display: inline-block;
    background: #0097a7;
    color: #fff;
    margin-bottom: 0;
    padding: .5rem 1rem .625rem 1rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    border-radius: 30px;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

Вариант 11.

Bootstrap - Пример оформления заголовков (вариант 11)
<style>
  .header-h1 {
    position: relative;
    margin-bottom: .5rem;
  }
  .header-h1 h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
    padding-left: 3rem;
    color: #e91e63;
  }
  .header-h1 h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2.25rem;
    height: 2.25rem;
    background: #e91e63;
  }
  .header-h1 h1::after {
    content: "";
    position: absolute;
    left: 0;
    top: 2rem;
    width: 100%;
    height: .25rem;
    background-color: #e91e63;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>