HTML-заголовки

Заголовки играют важнейшую роль в HTML для структурирования контента, улучшения доступности и оптимизации для поисковых систем(SEO). В этом руководстве вы найдете всю необходимую информацию о заголовках HTML, включая их синтаксис, использование и рекомендации.

Что такое заголовки HTML?

HTML-заголовки определяют заголовки или подзаголовки веб-страницы. Они варьируются от <h1> (самая высокая важность) до <h6> (самая низкая важность). Они помогают организовать контент и создать визуальную иерархию, упрощая чтение страницы.

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

Они есть:

  • Заголовок 1
  • Заголовок 2
  • Заголовок 3
  • Заголовок 4
  • Заголовок 5
  • Заголовок 6

Чем визуально отличаются заголовки HTML?

Размер шрифта заголовка 1 больше, чем у заголовка 2.

Размер шрифта заголовка 2 больше, чем у заголовка 3.

По мере увеличения номера заголовка размер шрифта по умолчанию уменьшается.

HTML-теги для заголовков

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

Заголовок <Уровень> HTML-тег
Заголовок 1 <h1>
Заголовок 2 <h2>
Заголовок 3 <h3>
Заголовок 4 <h4>
Заголовок 5 <h5>
Заголовок 6 <h6>

Примеры

Пример 1: все 6 типов заголовков в HTML

В следующем примере мы отображаем шесть заголовков в HTML-файле. 

<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

Скриншот в браузере

Пример 2: Использование заголовков в статье

Ниже приведен пример статьи, демонстрирующий использование различных заголовков на веб-странице HTML. 

<h1>Programming Languages</h1>
<p>Many programming languages have been developed over time to address specific challenges.</p>
<h2>Server Side Programming Languages</h2>
<p>Some of the server side programming lanagues are Java, PHP, etc.</p>
<h3>Java</h3>
<p>Java is the most used programming language on Server side.</p>
<h2>Client Side Programming Languages</h2>
<p>Some of the client side programming lanagues are JavaScript, etc.</p>
<h3>JavaScript</h3>
<p>JavaScript is a scripting language used to make dynamic pages.</p>

Скриншот в браузере

Почему заголовки важны?

Заголовки HTML важны в следующих аспектах.

  1. Структура : Заголовки логически организуют содержание.
  2. Доступность : программы чтения с экрана используют заголовки, чтобы помочь пользователям с нарушениями зрения перемещаться по странице.
  3. Преимущества SEO : Поисковые системы отдают больший приоритет содержанию заголовков.
  4. Пользовательский опыт : правильные заголовки улучшают читаемость и навигацию.

Оформление заголовков с помощью CSS

По умолчанию браузеры применяют к заголовкам базовые стили. Вы можете настроить их с помощью CSS.

В следующем HTML-коде мы установили CSS для заголовка 1 с размером шрифта 2,5em и тёмно-синим цветом. Для заголовка 2 мы установили размер шрифта 2em и бирюзовый цвет. Аналогично, для заголовка 3 мы установили размер шрифта 1,5em и курсив. 

<style>
  h1 {
    font-size: 2.5em;
    color: navy;
  }
  h2 {
    font-size: 2em;
    color: teal;
  }
  h3 {
    font-size: 1.5em;
    font-style: italic;
  }
</style>

<h1>Custom Styled Heading</h1>
<h2>Secondary Heading</h2>
<h3>Styled Subheading</h3>

Скриншот

Рекомендации по использованию заголовков

  1. Используйте <h1> Один раз : убедитесь, что основной заголовок уникален и точно описывает содержимое страницы.
  2. Соблюдайте иерархию : используйте <h2> для основных разделов и <h3> для подразделов. Избегайте пропуска уровней.
  3. Будьте описательными : заголовки должны четко указывать, о чем идет речь в разделе.
  4. Избегайте перегрузки ключевыми словами : в целях SEO включайте ключевые слова в заголовки естественным образом, не перегружая их.
  5. Объединение с ролями ARIA : для обеспечения доступности убедитесь, что структура заголовка соответствует ролям ARIA.

Учебники по заголовкам HTML

В следующих уроках каждый HTML-заголовок подробно объясняется с примерами. Мы также изучим стили по умолчанию для этих заголовков и научимся применять особые стили с помощью CSS.

  1. HTML h1
  2. HTML h2
  3. HTML h3
  4. HTML h4
  5. HTML h5
  6. HTML h6

Заключение

В этом уроке по HTML мы познакомились с заголовками HTML и тегами, используемыми для этих заголовков, с примерами. Заголовки HTML — это не просто инструменты форматирования: они структурируют веб-страницу, улучшают доступность и улучшают SEO. Следуя лучшим практикам и поддерживая чёткую иерархию, вы сможете создавать контент, который будет легко читать, просматривать и индексировать.