HTML :: Теги <h1> - <h6>

В HTML теги <h1> - <h6> (от англ. heading – заголовок) используются для создания заголовков на веб-странице. Заголовки показывают относительную важность раздела, следующего за ними. Наиболее важным считается заголовок первого уровня <h1>. Он отображается самым крупным шрифтом жирного начертания, остальные - поменьше, по мере убывания своей важности от заголовка второго уровня <h2> до заголовка шестого уровня <h6>, который имеет наименьшую значимость. По умолчанию все браузеры отображают заголовки как блочные элементы.

Синтаксис

	<h1>Заголовок 1-го уровня</h1>		
	
	Закрывающий тег: обязателен.

Атрибуты

Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

Статья на Mozilla Firefox: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
	
	<h1>Заголовок 1 уровня</h1>
	<h2>Заголовок 2 уровня</h2>
	<h3>Заголовок 3 уровня</h3>
	<h4>Заголовок 4 уровня</h4>
	<h5>Заголовок 5 уровня</h5>
	<h6>Заголовок 6 уровня</h6> 
	
</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №2</title>
</head>
<body>
	
<h1>Красные или зеленые яблоки?</h1>
	
	<h2>Плюсы и минусы красных яблок</h2>

	<p>
		Рассмотрим по отдельности плюсы и минусы 
		красных яблок.
	</p>
	
		<h3>Плюсы</h3>
		<p>Ну, очень много плюсов!</p>
		
		<h3>Минусы</h3>
		<p>Не замечал.</p>	
		
	<h2>Плюсы и минусы зеленых яблок</h2>

	<p>
		Рассмотрим по отдельности плюсы и минусы 
		зеленых яблок.
	</p>
	
		<h3>Плюсы</h3>
		<p>У зеленых плюсов не меньше!</p>

		<h3>Минусы</h3>
		<p>Не замечал.</p>
	
	<h2>Выводы</h2>
	<p>У всех яблок одни плюсы.</p>	
	
</body>
</html>

Пример №2

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №3</title>
</head>
<body>
	
<h1>Красные или зеленые яблоки?</h1>
	
<!-- Первая секция с заголовком 2-го уровня -->
<section>	
	
	<h2>Плюсы и минусы красных яблок</h2>

	<p>
		Рассмотрим по отдельности плюсы и минусы 
		красных яблок.
	</p>

	<!-- Первая секция с заголовком 3-го уровня -->
	<section>	
		
		<h3>Плюсы</h3>
		<p>Ну, очень много плюсов!</p>	
	</section>

	<!-- Вторая секция с заголовком 3-го уровня -->
	<section>	
		<h3>Минусы</h3>
		<p>Не замечал.</p>
	</section>

</section>

<!-- Вторая секция с заголовком 2-го уровня -->
<section>
	
	<h2>Плюсы и минусы зеленых яблок</h2>
	
	<p>
		Рассмотрим по отдельности плюсы и минусы 
		зеленых яблок.
	</p>

	<section>		
		<h3>Плюсы</h3>
		<p>У зеленых плюсов не меньше!</p>
	</section>	
	
	<section>
		<h3>Минусы</h3>
		<p>Не замечал.</p>
	</section>
	
</section>	
	
<!-- Третья секция с заголовком 2-го уровня -->
<section>	
	
	<h2>Выводы</h2>
	<p>У всех яблок одни плюсы.</p>	
	
</section>
	
</body>
</html>

Пример №3