HTML тег <header>

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

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

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

Синтаксис

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

Пример

<!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> поддерживает глобальные атрибуты и атрибуты событий.

Browser support

6+ 9+ 4+ 5+ 11.1+



Related articles