html.okpython.net
HTML и CSS для начинающих

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

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

Синтаксис

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

Атрибуты

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

Ссылки

Примеры

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