Содержание

HTML/Элементы h2, h3, h4, h5, h5, h6

Синтаксис

(X)HTML

<h2> ... </h2> ...
<h3> ... </h3> ...
<h4> ... </h4> ...
<h5> ... </h5> ...
<h5> ... </h5> ...
<h6> ... </h6>

Описание

Элементы h2 ‒ h6 (от англ. «header» ‒ «заголовок») создают заголовки в документе. Заголовки применяются в большинстве случаев для обозначения разделов страницы. Важность заголовка определяется цифрой (h2, h3, h4, h5, h5, h6). Чем меньше число, тем более важным является заголовок (и тем крупнее шрифт заголовка). В большинстве браузеров текст, вложенный в данный элемент отображается ‘полужирным’ шрифтом, а текст заголовка h5 имеет тот же размер, что и стандартный текст. Изменить стиль текста в данном элементе можно с помощью свойств CSS.

Совет

При создании веб-страниц не забывайте и не игнорируйте элементы заголовков, так как поисковые системы уделяют особое внимание тексту, расположенному в данных элементах.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.Раздел
HTML
2.0
Headings: h2 … H6		Перевод
3.2Headings
4.017.5.5 Headings: The h2, h3, h4, h5, H5, H6 elements
DTD: Transitional Strict Frameset
5. 04.3.6 The h2, h3, h4, h5, h5, and h6 elements
5.14.3.6. The h2, h3, h4, h5, h5, and h6 elements
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Атрибуты

align
Устанавливает выравнивание текста заголовка.
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент align</title>
</head>
<body>
<h2>Заголовок темы</h2>
<p>Коротко о теме</p>
<h3>Подтема 1</h3>
<p>Текст по подтеме 1</p>
<h3>Подтема 2</h3>
<p>Текст по подтеме 2</p>
</body>
</html>

Элемент align

Теги заголовков — HTML подзаголовки

Рейтинг: 4 из 5, голосов 5

08 февраля 2018 г.

Тег <h2> — <h6> в HTML используются для определения заголовков на веб-странице.

Всего существует шесть тегов заголовков HTML:

  • <h2> — заголовок первого уровня;
  • <h3> — заголовок второго уровня;
  • <h4> — заголовок третьего уровня;
  • <h5> — заголовок четвертого уровня;
  • <h5> — заголовок пятого уровня;
  • <h6> — заголовок шестого уровня.

HTML заголовок <h2> имеет наибольшее значение, является главным заголовком HTML документа.

Заголовки имеют строгую иерархию. Заголовок HTML <h3> является подзаголовком <h2> и имеет меньшее значение, чем <h2>, но большее, чем <h4> и т.д.

Использовать HTML заголовки необходимо в последовательности от <h2> до <h6>. Использование заголовка меньшего значения, без наличия заголовка большего значения (например использовать <h5>, если не использован <h4>) является ошибкой.

Обычно на странице сайта используется один заголовок <h2>, который может содержать несколько подразделов <h3>, разделенных на подзаголовки <h4> и т.д.

Рекомендации по использованию тегов заголовков описаны в статье: Как правильно писать HTML заголовки для сайта.

Браузеры обычно выделяют заголовки размером шрифта и добавляют пустое место до и после них. Заголовок HTML <h2> имеет наибольший размер шрифта, заголовок <h6> — наименьший.

Все виды выделения текста описаны в статье: Теги форматирования текста в HTML.

Синтаксис

<h2>заголовок</h2>

Отображение в браузере

Примеры использования заголовков HTML в коде

<!DOCTYPE html>
<html>
<head>
 
<title>Теги заголовков</title>
</head>
<body>
<h2>Заголовок 1-го уровня</h2>
<h3>Заголовок 2-го уровня</h3>
<h4>Заголовок 3-го уровня</h4>
<h5>Заголовок 4-го уровня</h5>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>
</body>
</html>

Поддержка браузерами

Теги
<h2> — <h6> Да Да
Да		 Да Да

Атрибуты

В HTML5 у тегов заголовков <h2>, <h3>, <h4>, <h5>, <h5>, <h6> нет атрибутов.

Устаревшие атрибуты заголовков HTML

Атрибут Значения Описание
aling

left
center
right
justify

Устанавливает способ выравнивания контента по горизонтали. В HTML5 используйте CSS.

by Lebedev

заголовков HTML

❮ Предыдущая Далее ❯

HTML-заголовки — это заголовки или субтитры, которые вы хотите отобразить на веб-странице.

Пример

Заголовок 2

Заголовок 3

Рубрика 4
Товарная позиция 5
Заголовок 6

Попробуйте сами »

Заголовки HTML

Заголовки HTML определяются тегами от

от

до
.

определяет самый важный заголовок.
определяет наименее важный заголовок.

Пример

Заголовок 1


Заголовок 2


Заголовок 3


Заголовок 4

Заголовок 5

Заголовок 6

Попробуйте сами »

Примечание: Браузеры автоматически добавляют пробел (поле) до и после заголовка.

Заголовки важны

Поисковые системы используют заголовки для индексации структуры и содержания ваших веб-страниц.

Пользователи часто просматривают страницу по заголовкам. Важно использовать заголовки, чтобы показать структуру документа.

заголовков следует использовать для основных заголовков, за которыми следуют

заголовков, затем менее важные

и так далее.

Примечание: Используйте заголовки HTML только для заголовков. Не используйте заголовки для создания текста БОЛЬШОЙ или полужирный .

Заголовки большего размера

Каждый заголовок HTML имеет размер по умолчанию. Однако вы можете указать размер для любого заголовка. с атрибутом стиля , используя свойство CSS font-size :

Пример

Заголовок 1


Попробуйте сами »

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте правильный тег HTML, чтобы добавить заголовок с текстом «Лондон».

Лондон — столица Англии. Это самый густонаселенный город Соединенного Королевства, с агломерацией с населением более 13 миллионов человек.

Начать упражнение

Справочник по тегам HTML

Справочник по тегам W3Schools содержит дополнительную информацию об этих тегах и их атрибутах.

Бирка Описание
Определяет корень документа HTML
<тело> Определяет тело документа
От

до

Определяет заголовки HTML

Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

1 Top6s Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

4 FORUM 90 | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

HTML-теги

❮ Пред. Следующий ❯

Элементы от

до

используются для определения шести уровней заголовков HTML, где

— самый высокий (или самый важный) уровень, а

— наименее важный.

Каждая веб-страница должна иметь только один заголовок

. Поскольку поисковые системы используют его для индексации структуры и содержания веб-документов, обязательно включите в него ключевые слова.

Пользовательские агенты могут использовать информацию заголовка для автоматического создания таблицы содержимого для документа.

Если вы хотите изменить размер текста, лучше не использовать теги заголовков. Вместо этого вы можете использовать свойство размера шрифта CSS. Рекомендуется не пропускать уровни заголовков (

,

,

,

,
,
) и использовать

только один раз на странице.

Теги заголовков также имеют ценность для SEO. Поисковая система пытается выяснить две вещи о вашей странице: о чем эта страница и насколько она хороша. Одна из основных вещей, на которые поисковые системы обращают внимание при определении содержания страницы, — это слова внутри тегов заголовков.

Если на странице есть один фрагмент содержимого, ее основной заголовок должен быть заключен в тег

, более крупные разделы должны быть включены в тег

и т. д. Таким образом, вы можете сделать свой контент более организованным. Вы должны помнить, что никто не читает каждое слово контента.

Существует два типа страниц с содержимым: отдельные страницы с содержимым и индексные страницы. На страницах с одним контентом заголовок этого фрагмента контента должен быть в

в верхней части

. На индексной странице название сайта или индексное имя обычно помещается в

. Тогда заголовки всех перечисленных отдельных частей должны иметь

.

Поскольку теги от

до

являются блочными элементами, они всегда начинаются с новой строки и занимают всю доступную ширину.

По умолчанию теги

—

имеют следующие свойства: margin-left, margin-right, font-weight, display.

 поле слева: 0;
поле справа: 0;
вес шрифта: полужирный;
дисплей: блок;

Теги

—

идут парами, поэтому закрывающий тег обязателен.

Пример тегов HTML

—

:
 

  <голова>
    Название документа
  
  <тело>
     
Заголовок первого уровня
 
     
Заголовок второго уровня
 
     
Заголовок третьего уровня
 
     
Заголовок четвертого уровня
 
     
Заголовок пятого уровня
 
     
Заголовок шестого уровня

Попробуй сам »

Результат

Элементы

—

нельзя использовать для разметки подзаголовков, субтитров, альтернативных заголовков и слоганов, если они не предназначены для использования в качестве заголовка для нового раздела или подраздела.

Поскольку атрибут align не поддерживается в HTML5, используйте вместо него свойство text-align CSS.

Пример тега HTML

: 

 

  <голова>
    Название документа
    <стиль>
      ч2 {
        цвет: #224cc5;
        выравнивание текста: по центру;
      }
    
  
  <тело>
     
Заголовок первого уровня
 
    
Lorem ipsum, или lipsum, как его иногда называют, – это фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в сборнике образцов шрифтов.

Попробуй сам »

Пример тега HTML

: 

 

  <голова>
    Название документа
    <стиль>
      h3 {
        цвет: #22c599;
        выравнивание текста: вправо;
      }
    
  
  <тело>
     
Заголовок второго уровня
 
    

      Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов.  Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.

Попробуй сам »

Пример тега HTML

: 

 

  <голова>
    Название документа
    <стиль>
      h4 {
        цвет: #bc22c5;
        размер шрифта: 20px;
        отступ: 10px 0;
      }
    
  
  <тело>
     
Заголовок третьего уровня
 
    

      Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.

Попробуй сам »

Пример тега HTML

: 
 

  <голова>
    Название документа
    <стиль>
      h5 {
        цвет: #1c87c9;
        поле: 10px 0;
        межбуквенный интервал: 4px;
        отступ текста: 50px;
      }
    
  
  <тело>
     
Заголовок четвертого уровня
 
    

      Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов.  Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.

Попробуй сам »

Пример тега HTML

: 
 

  <голова>
    Название документа
    <стиль>
      h5 {
        цвет фона: #1c87c9;
        цвет: #ffffff;
        преобразование текста: верхний регистр;
        отступ: 15px 20px;
      }
    
  
  <тело>
     
Заголовок пятого уровня
 
    

      Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.

Попробуй сам »

Пример тега HTML

: 
 

  <голова>
    Название документа
    <стиль>
      h6 {
        стиль шрифта: курсив;
        семейство шрифтов: без засечек;
        цвет: #401cc9;
        размер шрифта: 16px;
        высота строки: 1,625;
        маржа: 0;
      }
    
  
  <тело>
     
Заголовок шестого уровня
 
    

      Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов.  Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.

Попробуй сам »

Теги от

до

поддерживают глобальные атрибуты и атрибуты событий.

Как оформить тег

—

?

Общие свойства для изменения визуального веса/выделения/размера текста в теге

—

:
  • Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | наклонный | начальная | наследовать.
  • Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
  • Свойство CSS font-size устанавливает размер шрифта.
  • Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
  • Свойство CSS text-transform управляет регистром и регистром текста.
  • Свойство CSS text-decoration определяет украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

    No related posts.