Posted:
Май 21, 2023
Comments:
0 Comments

Header html что это: Тег | htmlbook.ru

— HTML | MDN

HTML-элемент <header> представляет собой вводный контент, обычно группу вводных или навигационных средств. Он может содержать другие элементы-заголовки, а также логотип, форму поиска, имя автора и другие элементы.

Категории контентаОсновной поток, явный контент.
Допустимое содержимоеОсновной поток, кроме <header> и <footer>
Пропуск теговНет, открывающий и закрывающий теги обязательны.
Допустимые родителиЛюбой элемент, который разрешает контент основного потока в качестве содержимого. Обратите внимание, что элемент <header> не должен быть потомком элемента <address>, <footer> или другого элемента <header>.
Допустимые ARIA-ролиgroup (en-US), presentation (en-US)
DOM-интерфейсHTMLElement

Элемент <header> не относится к секционному контенту , а значит не создаёт новый раздел в структуре HTML-документа. При этом элемент <header> обычно должен содержать заголовок ближайшего раздела (элементы h2—h6), но это не обязательно.

Историческое употребление

Несмотря на то, что элемент <header> не попал в спецификации до HTML5, на самом деле, он существовал с самого начала HTML. Первоначально, на самом первом веб-сайте он использовался как элемент <head>. В какой-то момент было принято решение использовать другое имя. Позже, это позволило <header> занять другую роль.

К этому элементу применимы только глобальные атрибуты.

Заголовок страницы

<header>
  <h2>Заголовок главной страницы</h2>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>

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

<article>
  <header>
    <h3>Планета Земля</h3>
    <p>Опубликовано в среду, 4 октября 2017, Джейн Смит</p>
  </header>
  <p>
    Мы живём на сине-зелёной планете, на которой до сих пор так много
    неизведанного. 
  </p>
  <p>
    <a href="https://janesmith.com/the-planet-earth/">Продолжить чтение...</a>
  </p>
</article>
Specification
HTML Standard
# the-header-element

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • Связанные с этим разделом элементы: <body>, <nav>, <article>, <aside>, <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US), <hgroup>, <footer>, <section>, <address>.
  • Разделы и структура документа HTML5.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Что такое header в HTML — с правильными примерами

Тег header в HTML обычно используют для шапки (верхушки) сайта. В него как правило помещают логотип, верхнее меню, контакты. Часто, вся информация, которая находится в header (лого, меню и т.д.) одинаково отображается на всех страницах сайта.

Для чего нужен тег header

Тег header и некоторые другие нужен для поисковых систем. Пользователь же никак не видит header это или нет. А вот поисковая система видит и правильно воспринимает структуру страницы сайта.

Грамотное использование всех HTML-тегов в верстке сайта положительно сказывается на продвижении сайта в поисковых системах.

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

Такая верстка, которая оптимально сделана для поисковых систем, называется семантической. То есть смысловой.

Тег header относится к HTML5. В этой фразе ничего особенного, просто в 2014 году в HTML добавили несколько новых тегов, и назвали всё это дополнение HTML5.

Сколько тегов header может быть на странице

Очень часто header используют только для шапки сайта. Это неправильный подход. Да header нужно использовать для шапки сайта, но не только для нее.

Тегов header на странице может быть сколько угодно, в отличие от h2.

Заголовок h2 можно использовать на странице сайта только 1 раз.

Но каждый тег header должен быть на своем месте.

Тег header сам по себе можно использовать только один раз на странице для шапки сайта. Дальше этот тег должен быть частью других тегов, например, тегов article и section. Пример:

<article>
    <header>
        <h3>Заголовок</h3>
        <p>Какой-то текст</h3>
    </header>
</article>

Кстати, если бы в этом примере в теге header был бы только заголовок h3 без тега p, то тег header лучше убрать. То есть использовать тег header только для того, чтобы поместить в него заголовок, не нужно.

Тег header нельзя помещать в такие теги, как footer, address и другой header.

Примеры правильного использования тега header

Пример для шапки сайта

<header>
	<div>
		<a href="/" title="Логотип">
			<img src="путь_к_картинке_логотипа" alt="Логотип">
		</a>
		<nav>
			<a href="/">HTML</a>
			<a href="/">CSS</a>
			<a href="/">JS</a>
		</nav>
		<form>
			<input type="text" placeholder="Поиск">
			<button type="submit">Искать</button>
		</form>
	</div>
</header>

Вот как такой header может выглядеть в браузере:

Пример header для контента

<section>
    <header>
        <h3>Заголовок</h3>
        <p>Какой-то текст</h3>
    </header>
</section>

— HTML: язык гипертекстовой разметки

HTML-элемент

представляет вводное содержимое, обычно группу вводных или навигационных средств. Он может содержать некоторые элементы заголовка, а также логотип, форму поиска, имя автора и другие элементы.

Элемент

имеет то же значение, что и общесайтовая роль баннера ориентира, если только он не вложен в содержимое раздела. Затем

9Элемент 0005 не является ориентиром.

Элемент

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

В противном случае это раздел в дереве доступности, который обычно содержит заголовок окружающего раздела ( h2 – h6 ) и необязательный подзаголовок, но это , а не .

Историческое использование

Элемент

изначально существовал в самом начале HTML для заголовков. Это видно на самом первом сайте. В какой-то момент заголовки стали с

по

, что позволило

свободно выполнять другую роль.

Этот элемент включает только глобальные атрибуты.

Заголовок страницы 

 <заголовок>
  
Заголовок главной страницы

  логотип MDN
Результат 
 <статья>
  <заголовок>
    
Планета Земля

    

      Опубликовано в среду,  автором
      Джейн Смит
    

  
  

    Мы живем на сине-зеленой планете, на которой так много еще невиданного.
  

  
Продолжить чтение…
Результат

Элемент

определяет ориентир баннер , когда его контекстом является элемент . Элемент заголовка HTML не считается ориентиром баннера, если он является потомком элементов

,

 

Lorem Ipsum dolor set amet. ...

Попробуйте сами »

Дополнительные примеры "Попробуйте сами" ниже.

Определение и использование

Элемент

представляет собой контейнер для вводного контента или
набор навигационных ссылок.

Элемент

обычно содержит:

  • один или несколько элементов заголовка (

    -

    )
  • логотип или значок
  • информация об авторстве

Примечание: Вы можете иметь несколько элементов

в одном
HTML-документ. Однако

не может быть помещен в

,

или другой элемент

.

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

Цифры в таблице указывают на первую версию браузера, полностью поддерживающую элемент.

Элемент
<заголовок> 5,0 9,0 4,0 5,0 11. 1

Глобальные атрибуты

Тег

также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

Заголовок страницы:

 

Заголовок главной страницы здесь

 

Добавлено
John Doe

Попробуйте сами »

Связанные страницы

Ссылка HTML DOM: Объект заголовка

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент

со следующим значением по умолчанию
значения:

заголовок {
  отображение: блок;
}

❮ Предыдущий
Полный справочник HTML
Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

900 50 лучших примеров

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

This entry was posted in Популярное