Etiqueta header en HTML
¿Qué es la etiqueta <header> en HTML?
La etiqueta <header> en HTML se utiliza para contener información de encabezado de un documento o sección.
El contenido dentro de la etiqueta <header> suele incluir elementos como el título de la página, el logotipo, la navegación y otros elementos de encabezado relacionados.
La etiqueta <header> es un contenedor de bloque, lo que significa que puede contener varios elementos HTML y ocupar todo el ancho disponible.
Por lo general, se utiliza al principio de una sección o de una página.
Ejemplo:
<header>
<h1>Título de la página</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
Lenguaje del código: HTML, XML (xml)Es importante destacar que la etiqueta <header> es diferente de la etiqueta <head> que es la sección donde se encuentra información importante para el navegador y no se muestra en pantalla.
Ejemplo de uso
Aquí te doy un ejemplo de cómo se podría utilizar la etiqueta <header> en una página web:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de uso de la etiqueta header</title>
</head>
<body>
<header>
<h1>Bienvenido a mi sitio web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#acerca">Acerca de</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<section id="inicio">
<h2>Contenido de la sección Inicio</h2>
<p>Bienvenido a mi sitio web. Aquí encontrarás información sobre mis intereses y proyectos.</p>
</section>
<section id="acerca">
<h2>Contenido de la sección Acerca de</h2>
<p>Soy un desarrollador web con experiencia en HTML, CSS y JavaScript. Me encanta crear sitios web atractivos y funcionales.</p>
</section>
<section id="contacto">
<h2>Contenido de la sección Contacto</h2>
<p>Si deseas contactar conmigo, puedes enviarme un correo electrónico a mi dirección de correo electrónico o utilizar el formulario de contacto en esta página.</p>
</section>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utiliza la etiqueta <header> para contener el título de la página y un menú de navegación. Esta información se mostrará en la parte superior de la página.
Además, se utilizan las etiquetas <section> para dividir el contenido en diferentes secciones.
Otro ejemplo:
<header>
<img src="logo.png" alt="logo de mi sitio web" id="logo">
<h1>Mi sitio web</h1>
<form>
<input type="search" placeholder="Buscar en mi sitio web">
<button type="submit">Buscar</button>
</form>
</header>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utiliza la etiqueta <header> para contener una imagen del logo de la página, el título de la página y un formulario de búsqueda.
La imagen del logo se encuentra dentro de una etiqueta img con un atributo src para especificar la ubicación de la imagen y un atributo alt para proporcionar una descripción alternativa de la imagen para usuarios con discapacidades visuales.
El formulario de búsqueda se encuentra dentro de una etiqueta form y contiene un campo de entrada de texto y un botón para enviar la búsqueda. Todo esto se mostrará en la parte superior de la página.
Atributos
La etiqueta <header> en HTML no tiene atributos específicos. Sin embargo, se pueden utilizar atributos globales como id, class, style, title, etc.
- El atributo id es utilizado para darle un nombre único a un elemento, lo que permite hacer referencia a él desde otro lugar en el documento mediante un enlace o una hoja de estilos CSS.
- El atributo class se utiliza para asignar uno o varios nombres de clase a un elemento, lo que permite aplicar estilos CSS específicos a ese elemento.
- El atributo style se utiliza para especificar estilos CSS en línea para un elemento en particular.
- El atributo title se utiliza para proporcionar una descripción breve de un elemento, que suele aparecer como una herramienta de ayuda al pasar el cursor sobre el elemento.
Es importante destacar que estos atributos son opcionales y no son necesarios para el funcionamiento de la etiqueta <header>, pero pueden ser útiles dependiendo del uso específico.
Ejemplos
Aquí te doy algunos ejemplos de cómo se podrían utilizar los atributos en la etiqueta <header>:
- Utilizando el atributo id:
<header id="encabezado-principal">
<h1>Bienvenido a mi sitio web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#acerca">Acerca de</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
Lenguaje del código: HTML, XML (xml)En este ejemplo se le asigna un id único para poder hacer referencia a él desde otro lugar en el documento mediante un enlace o una hoja de estilos CSS.
- Utilizando el atributo class:
<header class="encabezado">
<h1>Bienvenido a mi sitio web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#acerca">Acerca de</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
Lenguaje del código: HTML, XML (xml)En este ejemplo se asigna una clase encabezado para ser usada en hojas de estilos CSS y aplicar estilos específicos a este elemento.
- Utilizando el atributo style:
<header style="background-color: blue; color: white;">
<h1>Bienvenido a mi sitio web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#acerca">Acerca de</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
Lenguaje del código: HTML, XML (xml)En este ejemplo se especifican estilos en línea para el elemento <header> como el color de fondo y el color del texto.
- Utilizando el atributo title:
<header title="Encabezado principal del sitio web">
<h1>Bienvenido a mi sitio web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#acerca">Acerca de</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
Lenguaje del código: HTML, XML (xml)En este ejemplo se proporciona una descripción breve del elemento <header> que aparecerá como una herramienta de ayuda al pasar el cursor sobre el mismo.
Es importante tener en cuenta que estos son solo algunos ejemplos y que los atributos pueden ser utilizados de diferentes maneras dependiendo de las necesidades específicas de tu proyecto.