<hgroup>

Тег <hgroup> используется для объединения заголовка (<h1>–<h6>) с дополнительным связанным контентом — одним или несколькими абзацами (<p>), содержащими, например, слоган или альтернативное название.

        
          
          <hgroup>  <h1>Инженер жизни</h1>  <p>или: Пленник собственного открытия</p></hgroup>
          <hgroup>
  <h1>Инженер жизни</h1>
  <p>или: Пленник собственного открытия</p>
</hgroup>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Тег <hgroup> используется как обёртка. Внутри него обязательно должен быть один заголовок <h1>–<h6>, а также ноль или более абзацев <p>. Причём не допускается размещать в <hgroup> несколько заголовков или произвольный контент.

Иногда заголовок включает не только основной текст, но и слоган или уточнение. Если оформить их как отдельные заголовки — например, через <h1> и <h2>, — это нарушит структуру документа: <h2> будет восприниматься как начало новой секции.

        
          
          <h1>YoptaScript</h1><h2>Первый в мире скриптовый язык программирования для реальных пацанов</h2>
          <h1>YoptaScript</h1>
<h2>Первый в мире скриптовый язык программирования для реальных пацанов</h2>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В этом примере <h2> технически открывает новый смысловой блок, хотя по замыслу это просто пояснение к основному заголовку. Чтобы сохранить правильную структуру, оберните всё в <hgroup> и замените подзаголовок на абзац:

        
          
          <hgroup>  <h1>YoptaScript</h1>  <p>Первый в мире скриптовый язык программирования для реальных пацанов</p></hgroup>
          <hgroup>
  <h1>YoptaScript</h1>
  <p>Первый в мире скриптовый язык программирования для реальных пацанов</p>
</hgroup>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

💡 Используйте <hgroup>, когда нужно объединить заголовок и пояснение в одно смысловое целое.
💡 <hgroup> помогает улучшить доступность — скринридеры воспринимают его содержимое как единый блок, что делает структуру понятнее.
💡 Не используйте <hgroup>, если вы хотите показать два независимых заголовка, — лучше оформить это через <section> или <article>.