Блог

Главная - HTML язык разметки - HTML5 <header> Tag
You are currently viewing HTML5 <header> Tag

HTML5 <header> Tag

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

Синтаксис:

<header> ...</header>

Атрибуты: Этот тег поддерживает все глобальные атрибуты в HTML.

Приведенные ниже примеры иллюстрируют элемент <заголовок> в HTML.

Пример 1: 

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

<!DOCTYPE html>
<html>
<body>
	<h1>GeeksforGeeks</h1>
	<h3>HTML Header Tag</h3>
	<hr>
	<article>
		<header>
			<h3>GeeksforGeeks Learning</h3>
			<p>Posted by GFG</p>

			<p>
			A Computer Science portal for geeks.
			It contains well written, well thought
			and well explained computer science and
			programming articles.
			</p>


		</header>
	</article>
</body>
</html>

Выход:

Пример 2: 

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

<!DOCTYPE html>
<html>
<body>
	<h1>GeeksforGeeks</h1>
	<h3>HTML Header Tag</h3>
	
	<!--HTML header tag starts here-->
	<header>
		<h1>This is the heading.</h1>
		<h4>This is the sub-heading.</h4>
		<p>This is the metadata.</p>


	</header>
	<!--HTML header tag ends here-->
</body>
</html>

Выход:

Пример 3. 

В этом примере мы представили навигационные средства с помощью тега <header>.

<!DOCTYPE html>
<html>
<body>
	<h1>GeeksforGeeks</h1>
	<h3>HTML Header Tag</h3>
	
	<!--HTML header tag starts here-->
	<header>
		<a href=
"https://www.programbox.ru/fundamentals-of-algorithms/">
		Algo</a> |
		<a href=
"https://www.programbox.ru/data-structures/">
		DS</a> |
		<a href=
"https://www.programbox.ru/category/program-output/">
		Languages</a> |
		<a href=
"https://www.programbox.ru/company-interview-corner/">
		Interview</a> |
		<a href=
"https://www.programbox.ru/student-corner/">
		Students</a> |
		<a href=
"https://www.programbox.ru/gate-cs-notes-gq/">
		Gate</a> |
		<a href=
"https://www.programbox.ru/articles-on-computer-science-subjects-gq/">
		CS Subjects</a> |
		<a href=
"https://www.programbox.ru/quiz-corner-gq/">
		Quizzes</a>
	</header>
	<!--HTML header tag ends here-->
</body>
</html>

Выход:

Поддерживаемые браузеры:

  • Google Chrome 93.0 & above
  • Internet Explorer 11.0
  • Microsoft Edge 93.0
  • Firefox 92.0 & above
  • Opera 79.0
  • Safari 14.1
Метки: