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
Примеры
<!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
<!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
<!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