Тег header html5: Тег | htmlbook.ru

30.09.2023 alexxlab

Содержание

HTML тег header — Как создать сайт

HTML справочник

Значение и применение

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

<header>
		<img src = "logo.png" alt = "logo"> <!-- изображение с логотипом -->
		<h2>Заголовок первого уровня</h2> <!-- заголовок первого уровня -->
</header>

Пример размещения тега <header> на странице.

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

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<header>	Да	Да	Да	Да	Да	Да

Пример использования

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

<!DOCTYPE html>
<html>
	<head>
		<title>Разметка страницы</title>
	</head>
	<body>
		<header style = "background-color:khaki; height:100px">
			<p>Верхний колонтитул (тег <header>)</p>
		</header>
		<nav style = "background-color:coral; height:75px">
			<a href = "#">Ссылка 1</a> |
			<a href = "#">Ссылка 2</a> |
			<a href = "#">Ссылка 3</a> |
		<p>Панель навигации (тег <nav>)</p>
		</nav>
		<aside style  = "float:right; width:200px; height:250px; 
background-color:tan">
			<p>Справа мы разместили тег <aside></p>
		</aside>
		<main style = "height:250px">
			<h2>Главный заголовок сайта</h2>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 2 (тег <section>)</p>
			</section>
		</main>
		<footer style = "background-color:khaki; height:80px">
			<p>Нижний колонтитул (подвал) тег <footer></p> 
		</footer>
	</body>
</html>

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.

И так по порядку, что мы сделали в этом документе:

Для элемента <header> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами.

Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h2>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h3>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона ( khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Разметка страницы на HTML 5.

Значение CSS по умолчанию

header {
display: block;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

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

Элемент поддерживает «атрибуты событий».

HTML справочник

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Твитнуть

Семантические теги

Основная цель любой HTML-вёрстки — передача смысла блоков.

Для решения вопросов доступности Web для пользователей с ограниченными возможностями, а также для лучшего считывания контента сайта ботами которые его индексируют в HTML5 были добавлены семантические теги.

* * *

Шапка сайта header

Это шапка сайта, она обычно содержит лого, основное меню и контактную информацию, но контент может разниться в зависимости от дизайна сайта. Создается с помощью парного тега header. Работе тег header как просто div и является блочным элементом.

<header> </header>

* * *

Навигация nav

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

<nav> </nav>

Уникальный контент main

Самое главное на странице, это ее контент, в странице без уникального контента смысла мало, вернее его вовсе нет. Для разметки такого контента мы используем тег main. Важно понимать что тег main должен оборачивать только уникальный контент, боковые меню, header, footer и все что повторяется на остальных страницах в него входить не должно. Тег main можно использовать только 1 раз на странице.

<main></main>

* * *

Секции section, article, aside

Зависимые секции

section — является зависимой от контекста контента секцией сайта, на секции удобно разделять контент и манипулировать им (перемещать местами и тд.). section — это самостоятельная логическая единица текущего контента.

<section></section>

Независимые секции

article — является независимой секцией, контент внутри секции article должен быть логично законченный, это их с section главное отличие. Из-за того что article оборачивает логически законченный контент, ее можно переносить и вставлять на любой странице сайта не боясь за его семантику.

<article></article>

Дополняющие секции

aside — такие секции в основном встречаются в качестве боковых панелей на сайте, обычно там содержаться дополнительные меню, баннера и подобного рода вещи.

<aside></aside>

* * *

footer

footer — определяет подвал секционного элемента, тег footer может присутствовать как в секционном элементе (например: article), так и внутри тега body определяя тем самым подвал всей страницы. Обычно в теге footer размещается контактная информация, адрес, меню и подобный контент.

<footer></footer>

* * *

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

P.S. Больше уроков у меня на канале

Тег в HTML — Темы масштабирования

Обзор

В HTML предусмотрено множество компонентов или тегов для написания основного раздела, раздела нижнего колонтитула и так далее семантически. Точно так же, чтобы включить раздел заголовка в любую часть раздела HTML, HTML5 включает тег заголовка, чтобы указать, что компоненты, включенные в этот тег, составляют раздел заголовка. Если теги используются правильно, веб-браузер может определить разницу между HTML и обычным текстом.

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

Тег заголовка — это элемент уровня блока, представляющий вводный контент или навигационный контент на веб-страницах. Он полезен для хранения содержимого, такого как заголовок веб-сайта, заголовок раздела, логотип веб-сайта и т. д.

Основной синтаксис тега

показан ниже:

Примечание: Элемент заголовка представляет собой заголовок содержимого. Однако его нельзя использовать внутри элемента