Etiqueta HTML5 <encabezado>

La etiqueta <header> en HTML se usa para definir el encabezado de un documento o una sección, ya que contiene la información relacionada con el título y el encabezado del contenido relacionado. El elemento <header> normalmente contiene el encabezado de la sección (un elemento h1-h6 o un elemento <hgroup>), pero esto no es obligatorio. También se puede usar para envolver la tabla de contenido de una sección, un formulario de búsqueda o cualquier logotipo relevante. La etiqueta <header> es una etiqueta nueva en HTML5 y es una etiqueta de contenedor, es decir, contiene una etiqueta de inicio, contenido y la etiqueta de finalización. Puede haber varios elementos <header> en un documento. Esta etiqueta no se puede colocar dentro de un <footer>, <address> u otro elemento <header>.

Sintaxis:

<header> ...</header>

Atributos : esta etiqueta admite todos los atributos globales en HTML.

Los siguientes ejemplos ilustran el elemento <header> en HTML.

Ejemplo 1: este ejemplo ilustra el uso de la etiqueta <header> que constituye el contenedor de la sección de encabezado del documento.

HTML

<!DOCTYPE html>
<html>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML Header Tag</h3>
    <hr>
    <article>
        <header>
            <h3>GeeksforGeeks Learning</h3>
             
<p>Posted by GFG</p>
 
 
             
<p>
               A Computer Science portal for geeks.
               It contains well written, well thought
               and well explained computer science and
               programming articles.
            </p>
 
 
 
        </header>
    </article>
</body>
</html>

 Producción:

Etiqueta HTML <encabezado>

Ejemplo 2: En este ejemplo, hemos usado la etiqueta <header> para contener el encabezado de la sección circundante, pero no siempre es necesario.

HTML

<!DOCTYPE html>
<html>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML Header Tag</h3>
     
    <!--HTML header tag starts here-->
    <header>
        <h1>This is the heading.</h1>
        <h4>This is the sub-heading.</h4>
         
<p>This is the metadata.</p>
 
 
 
    </header>
    <!--HTML header tag ends here-->
</body>
</html>

Producción:

Etiqueta HTML <encabezado>

Ejemplo 3: En este ejemplo, hemos representado ayudas a la navegación usando la etiqueta <header>.

HTML

<!DOCTYPE html>
<html>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML Header Tag</h3>
     
    <!--HTML header tag starts here-->
    <header>
        <a href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms/">
        Algo</a> |
        <a href=
"https://www.geeksforgeeks.org/data-structures/">
        DS</a> |
        <a href=
"https://www.geeksforgeeks.org/category/program-output/">
        Languages</a> |
        <a href=
"https://www.geeksforgeeks.org/company-interview-corner/">
        Interview</a> |
        <a href=
"https://www.geeksforgeeks.org/student-corner/">
        Students</a> |
        <a href=
"https://www.geeksforgeeks.org/gate-cs-notes-gq/">
        Gate</a> |
        <a href=
"https://www.geeksforgeeks.org/articles-on-computer-science-subjects-gq/">
        CS Subjects</a> |
        <a href=
"https://www.geeksforgeeks.org/quiz-corner-gq/">
        Quizzes</a>
    </header>
    <!--HTML header tag ends here-->
</body>
</html>

Producción:

Etiqueta HTML <encabezado>

Navegadores compatibles:

  • Google Chrome 5 y superior
  • Internet Explorer 9 y superior
  • Microsoft Edge 12 y superior
  • Firefox 4 y superior
  • Ópera 11.1 y superior
  • Safari 5 y superior

HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .

Publicación traducida automáticamente

Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *