Тег header

Обучение html

Семантический элемент который входит в состав HTML пятой версии. Его задача показать браузеру и поисковым машинам шапку сайта. Поэтому в тег header заворачиваем весь контент относящийся к шапке. Как правило это логотипы, навигация сайта, форма поиска, возможно контакты. Раньше это делали с помощью дивов <div class="header"> Шапка сайта </div> Теперь это нужно делать правильно, все отображая в семантических элементах, вот пример популярного кода:

<body>
    <header> Шапка сайта </header>
    <main> Уникальный контент </main>
    <footer> Подвал сайта </footer>
</body>

Парный тег, что означает наличие закрывающей части, и еще блочный элемент. Синтаксис <header> Контент </header>. Поддерживается всеми браузерами, поэтому смело используем.

Заголовок статьи

Еще тег можно использовать в качестве заголовка статьи, это будет правильно. Давайте посмотрим на пример:

<article>
<header>
  <h2> Новость на сайте </h2>
</header>
<p> А вот тут мы пишем, тело новостной статьи</p>
</article>

Подведем итог:

Весь HTML документ может содержать несколько тегов header, в этом ничего противоречивого нет. Помните, что его используем по прямому назначению “шапка/заголовок”. Но хедер не может повторяться в одном элементе несколько раз. Одна статья не может содержать два или три заголовка подряд. Вот пример как нельзя:

<article>
<header>
  <h2> Первая шапка </h2>
</header>
<p> А вот тут мы пишем, тело новостной статьи</p>
<header>
  <h2> Вторая шапка </h2>
</header>
</article>

webm.tech