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

Основной синтаксис компонента Heading

Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня

• level — обязательное свойство, определяющее уровень заголовка. Допустимые значения: 1–6, соответствующие HTML-тегам

  –

  .

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

Свойство size

Для заголовков разного уровня можно дополнительно управлять размером текста с помощью свойства size:

Большой заголовок второго уровня
Средний заголовок третьего уровня
Малый заголовок четвертого уровня

• sm, md, lg, xl — предопределённые размеры текста.
• Сочетание level и size позволяет создавать гибкую иерархию визуальных элементов без нарушения семантики HTML.

Доступность и семантика

Компонент Heading автоматически устанавливает правильный тег в зависимости от уровня level, что обеспечивает корректную работу вспомогательных технологий, таких как скринридеры. Это критично для соблюдения стандартов WCAG и поддержки навигации по документу с помощью клавиатуры или голосовых команд.

Примеры сложной иерархии заголовков

Главная страница

Раздел 1
Подраздел 1.1
Подраздел 1.2

Раздел 2
Подраздел 2.1
Подподраздел 2.1.1

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

Стилизация заголовков

Carbon Components Svelte поддерживает кастомизацию через свойства class и style:

  Кастомизированный заголовок

• class позволяет подключить CSS-классы для расширенной стилизации.
• style применяет инлайн-стили к заголовку для быстрой корректировки цвета, отступов, шрифтов и других визуальных параметров.

Использование заголовков в контексте других компонентов

Заголовки можно интегрировать в карточки, модальные окна, аккордеоны и другие контейнерные компоненты:

  Название карточки
  
Содержимое карточки...

Это гарантирует единообразие внешнего вида текста и сохранение логической структуры контента в пределах сложных компонентов интерфейса.

Рекомендации по иерархии

• Уровень заголовка должен соответствовать структуре документа, а не только визуальному размеру.
• Для больших интерфейсов лучше заранее продумать иерархию, чтобы избежать скачков уровней, например, перехода от

  к

  без промежуточных

  –

  .

• Свойство size можно использовать для визуальной вариативности, не нарушая семантики.

Итоговая структура примера страницы

Продуктовая страница
Обзор продукта
Особенности
Технические характеристики
Отзывы
Положительные
Негативные

Такой подход обеспечивает чистую семантику, предсказуемое поведение визуальных компонентов и полную совместимость с экосистемой Carbon.