Разное

Header html: Тег | htmlbook.ru

31.01.2023

Что такое 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 — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
  5. Атрибуты
  6. Подсказки
  7. На практике
    1. Алёна Батицкая советует

Кратко

Скопировано

<header> предназначен для создания «шапок» — всего сайта или какой-то части контента, например, статьи.

Пример

Скопировано

Вот как будет выглядеть <header> на странице портфолио:

<!-- Шапка --><header>  <img src="logo.svg" alt="Лого">  <nav>    <a href="#">Мои работы</a>    <a href="#">Мои навыки</a>    <a href="#">Контакты</a>  </nav></header><!-- / Шапка --><main>  <h2>Портфолио Ольги Сасквоч</h2>  <p>Добро пожаловать!</p>  <p>Рада приветствовать вас на своём сайте...</p></main><footer>  <p>Ольга Сасквоч</p>  <p>2021</p></footer>
          
 
<!-- Шапка -->
<header>
  <img src="logo.svg" alt="Лого">
  <nav>
    <a href="#">Мои работы</a>
    <a href="#">Мои навыки</a>
    <a href="#">Контакты</a>
  </nav>
</header>
<!-- / Шапка -->
<main>
  <h2>Портфолио Ольги Сасквоч</h2>
  <p>Добро пожаловать!</p>
  <p>Рада приветствовать вас на своём сайте. ..</p>
</main>
<footer>
  <p>Ольга Сасквоч</p>
  <p>2021</p>
</footer>
Открыть демо в новой вкладке

Как понять

Скопировано

Контейнер <header> чаще всего используется для создания шапки сайта. Шапка сайта — это блок с вводной информацией, там обычно находятся логотип, строка поиска, меню, кнопки соцсетей или другие ключевые элементы.

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

<header> можно закрепить в окне браузера, чтобы он всегда был доступен пользователю во время прокрутки страницы. Это делается при помощи CSS.

Как пишется

Скопировано

Тег <header>...</header> — парный, он всегда закрывается.

На странице может быть несколько тегов <header>. Но их нельзя помещать в контейнеры <footer>, <address> или другой <header>.

Атрибуты

Скопировано

Можно применить любые глобальные атрибуты.

Подсказки

Скопировано

💡 У <header> блочные стили по умолчанию 🤓

На практике

Скопировано

Алёна Батицкая советует

Скопировано

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

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<span>

alt + ←

→

<footer>

alt + →

заголовков HTML

❮ Предыдущая Далее ❯

HTML-заголовки — это заголовки или субтитры, которые вы хотите отобразить на веб-странице.

Пример

Заголовок 2

Заголовок 3

Рубрика 4
Товарная позиция 5
Заголовок 6

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

Заголовки HTML

Заголовки HTML определяются тегами от

от

до
.

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

Пример

Заголовок 1


Заголовок 2


Заголовок 3


Заголовок 4

Заголовок 5

Заголовок 6

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

Примечание: Браузеры автоматически добавляют пробел (поле) до и после заголовка.

Заголовки важны

Поисковые системы используют заголовки для индексации структуры и содержания ваших веб-страниц.

Пользователи часто просматривают страницу по заголовкам. Важно использовать заголовки, чтобы показать структуру документа.

заголовков следует использовать для основных заголовков, за которыми следуют

заголовков, затем менее важные

и так далее.

Примечание: Используйте заголовки HTML только для заголовков. Не используйте заголовки для создания текста БОЛЬШОЙ или полужирный .

Заголовки большего размера

Каждый заголовок HTML имеет размер по умолчанию. Однако вы можете указать размер для любого заголовка. с атрибутом стиля , используя свойство CSS font-size :

Пример

Заголовок 1


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

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте правильный тег HTML, чтобы добавить заголовок с текстом «Лондон».

Лондон — столица Англии. Это самый густонаселенный город Соединенного Королевства, с агломерацией с населением более 13 миллионов человек.

Начать упражнение

Справочник по тегам HTML

Справочник по тегам W3Schools содержит дополнительную информацию об этих тегах и их атрибутах.

Бирка Описание
Определяет корень документа HTML
<тело> Определяет тело документа
От

до

Определяет заголовки HTML

Полный список всех доступных тегов HTML см. в нашем справочнике по тегам 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

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

4 FORUM 90 | О

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

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Тег HTML5 — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Уровень сложности: Easy
  • Последнее обновление: 22 июл, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Тег

    в HTML используется для определения заголовка документа или раздела, поскольку он содержит информацию, связанную с заголовком и заголовком соответствующего содержимого. Элемент
    обычно содержит заголовок раздела (элемент h2-h6 или элемент
    ), но это не обязательно. Его также можно использовать для обертывания оглавления раздела, формы поиска или любых соответствующих логотипов. Тег
    — это новый тег в HTML5, и это тег-контейнер, т. е. он содержит начальный тег, контент и конечный тег. В одном документе может быть несколько элементов
    . Этот тег нельзя размещать внутри