Etiqueta HTML `<hgroup>`

La etiqueta <hgroup> se usa para agrupar encabezados HTML. Usamos <hgroup> para envolver uno o más elementos de encabezado de <h1> - <h6>.

La etiqueta <hgroup> permite agrupar el encabezado principal con encabezados secundarios, formando un encabezado multinivel. Evita que los elementos secundarios <h1> - <h6> creen sus propias secciones separadas.

En el esquema abstracto, <hgroup> forma un solo encabezado lógico, con un conjunto general de elementos <h1> - <h6> que se incorporan al esquema como una unidad multinivel. Un elemento <hgroup> puede mostrarse en un esquema renderizado de muchas maneras:

Puede mostrarse con dos puntos y un espacio, u otra puntuación, después del encabezado principal y antes del primer encabezado secundario.
Puede mostrarse con el encabezado principal, seguido de los encabezados secundarios entre paréntesis.

DANGER

<hgroup> no es compatible con HTML5, pero sí con la especificación Living Standard de WHATWG. El futuro de este elemento aún no está claro, por eso es mejor evitar usar esta etiqueta.

Sintaxis

La etiqueta <hgroup> va en pares. Sin embargo, la etiqueta de cierre no es obligatoria.

Ejemplo de la etiqueta HTML `<hgroup>`:

Ejemplo de la etiqueta HTML <hgroup>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Here you can learn HTML Bases.</h2>
    </hgroup>
  </body>
</html>

Try it Yourself »

Resultado

hgroup tag example

Ejemplo de la etiqueta HTML `<hgroup>` usada con propiedades CSS:

Ejemplo de la etiqueta HTML <hgroup> con las propiedades CSS:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      hgroup {
        text-align: right;
        font-family: Arial, sans-serif;
        padding-right: 30px;
        border-right: 15px solid #42c73a;
      }
      h1 {
        font-size: 30px;
      }
      h2 {
        font-size: 20px;
      }
      p {
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Learn online</h2>
    </hgroup>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Atributos

La etiqueta <hgroup> admite los atributos globales.

Cómo dar estilo a una etiqueta HTML <hgroup>

json

{
    "tag_name": "hgroup"
}

Practice

What is the primary purpose of the HTML <hgroup> tag?

To create a hyperlinkTo group a set of <h1>–<h6> elements when the heading has multiple levels.To embed multimedia contentTo define a header for a document or sectionTo downplay the importance of the lower ranked header

Etiqueta HTML <hgroup> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <hgroup>: ​

Resultado ​

Ejemplo de la etiqueta HTML <hgroup> usada con propiedades CSS: ​

Atributos ​