HTML тег <header>

Тег <header> определяет верхний колонтитул, “шапку” страницы или раздела. В этой части обычно содержится логотип, навигационное меню, форма поиска по сайту и т.д.

Тег <header> новый элемент в HTML 5. В HTML документе допускается использование нескольких элементов <header>, которые могут располагаться в любой его части.

Запрещается вкладывать тег <header> внутрь элементов <footer> и <address>, а также внутрь другого тега <header>.

Синтаксис

Содержимое тега пишется между открывающим (<header>) и закрывающим (</header>) тегами.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      li {
        display: inline-block; 
        margin-right: 10px;
        color: #778899;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul style="padding:0;">
                   <li>Главная</li>
                   <li>О нас</li>
               </ul>
          </nav>
          <h1>Добро пожаловать на наш сайт</h1>
          <hr>
      </header>
      <article>
         <header>
              <h2>Заголовок раздела</h2>
              <p>Абзац текста.</p>
         </header>
      </article>
   </body>
</html>

Результат

Атрибуты

Тег <header> поддерживает глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <header> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <header>:

Цвет текста внутри тега <header>:

Стили форматирования текста для тега <header>:

Другие свойства для тега <header>:


Поддержка браузера

6+ 4+ 5+ 11.1+


Считаете ли это полезным?

Похожие статьи