Тег <h1> | htmlbook.ru

Тег <h1>


Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

<h1>Заголовок первого уровня</h1>

Атрибуты

align
Определяет выравнивание заголовка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег H1 и H2</title>
 </head>
 <body>

  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna 
  aliguam erat volutpat.</p>

  <h2>Ut wisis enim ad minim veniam</h2>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution 
  ullamcorper suscipit lobortis nisl ut aliquip ex ea 
  commodo consequat.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Вид заголовков первого и второго уровня в браузере

Примечание

Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов <h1>...<h6>. По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.