Taller > HTML
La Etiqueta <header> en HTML
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>
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>
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>
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</li>
<li><a href="#acerca">Acerca de</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
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>
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>
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>
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.
La Etiqueta <nav> en HTML
La etiqueta <nav> de HTML5 es una de las principales incorporaciones al estándar que facilita la creación de estructuras de navegación más semánticas y accesibles en los sitios web.
En la era de la información y la creciente importancia de la experiencia del usuario, proporcionar una navegación clara y fácil de usar en un sitio web es esencial para mantener a los visitantes comprometidos y ayudarles a encontrar la información que buscan.
En este artículo, exploraremos el propósito y la función de la etiqueta <nav> en el desarrollo web, cómo utilizarla correctamente y cómo optimizarla para una navegación accesible y responsiva.
Además, compartiremos algunos consejos y técnicas avanzadas para personalizar la etiqueta <nav> y adaptarla a las necesidades de tu proyecto.
¿Qué es etiqueta <nav> en HTML?
La etiqueta <nav> de HTML5 es un elemento semántico que se utiliza para representar la sección principal de navegación en un documento HTML.
El propósito principal de esta etiqueta es identificar claramente las áreas de navegación principal, facilitando a los navegadores web, motores de búsqueda y tecnologías de asistencia comprender mejor la estructura y jerarquía del contenido de un sitio web.
La etiqueta <nav> se utiliza típicamente para contener enlaces de navegación a las áreas más importantes de un sitio web, como las páginas principales, las categorías o las secciones de contenido relevantes.
Ejemplo de uso
A continuación, se presenta un ejemplo básico de cómo utilizar la etiqueta <nav>:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de etiqueta nav</title>
</head>
<body>
<header>
<h1>Nombre del sitio web</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="acerca.html">Acerca de</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
<main>
<!-- Contenido principal del sitio -->
</main>
<footer>
<!-- Información del pie de página -->
</footer>
</body>
</html>
En este ejemplo, la etiqueta <nav> contiene una lista no ordenada (<ul>) de enlaces de navegación (<a>) a las páginas principales del sitio web.
Esta estructura facilita que los navegadores y otras las tecnologías identifiquen y accedan a la navegación principal del sitio, mejorando así la experiencia del usuario y la accesibilidad en general.
Uso adecuado de la etiqueta <nav>
El uso adecuado de la etiqueta <nav> es fundamental para mantener la semántica y la accesibilidad en un sitio web.
A continuación, se presentan algunas pautas y ejemplos para utilizar correctamente la etiqueta <nav>.
Utiliza la etiqueta
La Etiqueta <main> en HTML
La etiqueta <main> en HTML5 es un contenedor que se utiliza para marcar el contenido principal de una página web. La idea detrás de la etiqueta <main> es tener una sección en la página web que contenga el contenido principal y exclusivo de la misma, que no se repita en otras páginas de la web.
La etiqueta <main> solo puede aparecer una sola vez en una página web, y su contenido no debe incluir elementos como encabezados, pies de página, formularios de búsqueda, enlaces de navegación, etc.
Estos elementos deben estar fuera de la etiqueta <main> y se pueden incluir en otras partes de la página, como una barra lateral o un menú de navegación.
Ejemplo de uso
Aquí hay un ejemplo de uso de la etiqueta <main> en HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Inicio</a>
<li><a href="#">Acerca de</a>
<li><a href="#">Contacto</a>
</ul>
</nav>
</header>
<main>
<h1>Bienvenido a mi página web</h1>
<p>Este es el contenido principal de mi página web</p>
</main>
<footer>
<p>Copyright © 2021 Mi Página Web</p>
</footer>
</body>
</html>
En este ejemplo, la etiqueta <main> se utiliza para marcar el contenido principal de la página web, que consiste en un título y un párrafo.
Mientras que el encabezado y el pie de página se encuentran fuera de la etiqueta <main>, contienen elementos complementarios a la página web como un menú de navegación y una leyenda de copyright, respectivamente.
Atributos La etiqueta <main> de HTML5 no tiene atributos específicos. Sin embargo, se pueden utilizar los atributos genéricos de HTML5, como id, class, style, etc., para aplicar estilos o identificar elementos específicos en una página web.
Aquí hay un ejemplo completo de cómo se pueden utilizar estos atributos en la etiqueta <main> de HTML5:
<!DOCTYPE html>
<html>
<head>
<style>
/* Estilos para la clase "container" */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main id="contenido-principal" class="container">
<h1>Bienvenido a mi página web</h1>
<p>Este es el contenido principal de mi página web</p>
</main>
<footer>
<p>Copyright © 2021 Mi Página Web</p>
</footer>
</body>
</html>
En este ejemplo, se ha utilizado el atributo id para asignar una identificación única a la etiqueta <main> y el atributo class para asignar una clase que se puede utilizar en un archivo de estilos para aplicar estilos a todos los elementos con esa clase.
En este caso, la clase “container” se utiliza para definir un contenedor con un ancho máximo y un margen centrado, y para agregar un margen interior en todas las direcciones.
Además, se ha utilizado una sección de estilo dentro de la etiqueta <head> para definir los estilos para la clase “container”. De esta manera, se pueden aplicar estilos a los elementos de la página sin tener que incluir el código de estilo en cada elemento.
Más ejemplos
Aquí hay tres ejemplos avanzados de la etiqueta <main> de HTML5:
Ejemplo de uso de la etiqueta <main> en una estructura de página web básica:
<!DOCTYPE html>
<html>
<head>
<title>Mi Página Web
<style>
/* Estilos para la clase "container" */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main class="container">
<h1>Bienvenido a mi página web</h1>
<p>Este es el contenido principal de mi página web</p>
</main>
<footer>
<p>Copyright © 2021 Mi Página Web</p>
</footer>
</body>
</html>
En este ejemplo, la etiqueta <main> se utiliza para contener el contenido principal de la página web, que se muestra dentro de un contenedor con un ancho máximo y un margen centrado.
Ejemplo de uso de la etiqueta <main> para mostrar contenido dinámico en una aplicación web:
<!DOCTYPE html>
<html>
<head>
<title>Mi Aplicación Web</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* Estilos para la clase "container" */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#" id="home">Inicio</a></li>
<li><a href="#" id="about">Acerca de</a></li>
<li><a href="#" id="contact">Contacto</a></li>
</ul>
</nav>
</header>
<main class="container">
<div id="contenido-principal">
<h1>Bienvenido a mi aplicación web</h1>
<p>Este es el contenido principal de mi aplicación web</p>
</div>
</main>
<footer>
<p>Copyright © 2021 Mi Aplicación Web</p>
</footer>
<script>
$(document).ready(function() {
// Evento para cargar el contenido de "Inicio" */
$("#home").click(function(e) {
e.preventDefault();
$("#contenido-principal").html(
"<h1>Bienvenido a mi aplicación web</h1><p>Este es el contenido principal de mi aplicación web</p>"
);
});
// Evento para cargar el contenido de "Acerca de"
$("#about").click(function(e) {
e.preventDefault();
$("#contenido-principal").html(
"<h1>Acerca de mi aplicación web</h1><p>Este es el contenido acerca de mi aplicación web</p>"
);
});
// Evento para cargar el contenido de "Contacto" "//
$("#contact").click(function(e) {
e.preventDefault();
$("#contenido-principal").html(
"<h1>Contacto con mi aplicación web</h1><p>Este es el contenido de contacto con mi aplicación web</p>"
);
});
});
</script>
En este ejemplo, la etiqueta <main> se utiliza para contener el contenido principal de la aplicación web, que se puede actualizar dinámicamente mediante eventos JavaScript asociados a los enlaces en la barra de navegación.
Ejemplo de uso de la etiqueta <main> en una estructura de página web con múltiples secciones:
<!DOCTYPE html>
<html>
<head>
<title>Mi Página Web Avanzada</title>
<style>
/* Estilos para la clase "container" */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Inicio</a></li> <li><a href="#">Acerca de</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Portafolio</a></li> <li><a href="#">Contacto</a></li </ul>
</nav>
</header>
<main class="container">
<section id="inicio">
<h2>Bienvenido a mi página web avanzada</h2>
<p>Este es el contenido de la sección "Inicio".</p>
</section>
<section id="acerca-de">
<h2>Acerca de mi página web avanzada</h2>
<p>Este es el contenido de la sección "Acerca de".</p>
</section>
<section id="servicios">
<h2>Servicios ofrecidos por mi página web avanzada</h2>
<p>Este es el contenido de la sección "Servicios".</p>
</section>
<section id="portafolio">
<h2>Portafolio de mi página web avanzada</h2>
<p>Este es el contenido de la sección "Portafolio".</p>
</section>
<section id="contacto">
<h2>Contacto con mi página web avanzada</h2>
<p>Este es el contenido de la sección "Contacto".</p>
</section>
</main>
<footer>
<p>Copyright © 2021 Mi Página Web Avanzada</p>
</footer>
</body>
</html>
En este ejemplo, la etiqueta <main> se utiliza para contener varias secciones con contenido diferente en la página web.
Cada sección se identifica con un identificador único y puede ser accedida directamente desde la barra de navegación.
La Etiqueta <section> en HTML
La etiqueta <section> es una de las nuevas etiquetas en HTML5 que se utiliza para identificar una sección distinta y coherente en un documento HTML.
Esta etiqueta permite agrupar contenido lógico en secciones separadas dentro de un documento, lo que facilita la organización y la estructuración de contenido.
Cada sección dentro de una etiqueta <section> debe tener un título que describa su contenido y puede incluir cualquier tipo de contenido, como texto, imágenes, tablas, formularios, etc.
Es importante notar que cada sección dentro de una etiqueta <section> debe ser independiente y significativa por sí sola, y no simplemente una parte de una sección más grande.
La etiqueta <section> es una forma semántica de marcar contenido en un documento HTML y puede ser útil para mejorar la accesibilidad y la usabilidad del contenido, así como para mejorar la estructuración y la organización del contenido.
Al utilizar la etiqueta <section>, los motores de búsqueda y los lectores de pantalla pueden comprender mejor la estructura y el contenido del documento.
Ejemplo de uso
Aquí hay otro ejemplo de cómo se puede usar la etiqueta <section> en HTML5:
<body>
<header>
<h1>Mi sitio web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#nosotros">Nosotros</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section id="inicio" class="destacada">
<h2>Bienvenidos a mi sitio web</h2>
<p>En este sitio encontrarás información sobre nuestra empresa y los servicios que ofrecemos.</p>
</section>
<section id="nosotros" class="normal">
<h2>Nosotros</h2>
<p>Somos una empresa dedicada a ofrecer soluciones tecnológicas innovadoras y eficientes para pequeñas y medianas empresas.</p>
<p>Contamos con un equipo altamente capacitado y comprometido con la satisfacción de nuestros clientes.</p>
</section>
<section id="servicios" class="destacada">
<h2>Servicios</h2>
<ul>
<li>Desarrollo de software a medida</li>
<li>Implementación de tecnologías de la información</li>
<li>Consultoría y asesoramiento tecnológico</li>
<li>Mantenimiento y soporte técnico</li>
</ul>
</section>
<section id="contacto" class="normal">
<h2>Contacto</h2>
En este ejemplo, se utiliza la etiqueta <section> para identificar diferentes secciones en una página web, como inicio, nosotros, servicios y los detalles de contacto.
Cada sección tiene su propio contenido y título, y está enlazado a través de una barra de navegación en la cabecera de la página. Atributos
La etiqueta <section> en HTML5 no tiene atributos específicos, pero puede utilizar los atributos globales de HTML, como id, class, style, title, entre otros.
id: permite identificar de forma única una sección en particular dentro de un documento HTML y se utiliza para hacer referencia a la sección desde otros elementos, como enlaces.
class: permite asignar una o varias clases a una sección y utilizarlas para estilos CSS.
style: permite especificar estilos CSS para una sección en particular, directamente en la etiqueta.
title: permite especificar un título adicional para una sección que puede ser útil para mejorar la accesibilidad del contenido.
En resumen, los atributos de la etiqueta <section> permiten personalizar y describir de forma más detallada el contenido dentro de una sección.
Ejemplo
Aquí hay un ejemplo de cómo se pueden utilizar los atributos en la etiqueta <section> en HTML5:
<body>
<header>
<h1>Mi sitio web</h1>
</header>
<nav>
<ul>
<li><a href="#seccion1">Sección 1</a></li> <li><a href="#seccion2">Sección 2</a></li> <li><a href="#seccion3">Sección 3</a></li> </ul>
</nav>
<main> <section id="seccion1" class="destacada" style="background-color: lightgray;">
<h2>Sección 1</h2>
<p>Esta es la sección 1 del sitio web, con estilo destacado y fondo gris claro.</p>
</section>
<section id="seccion2" class="normal">
<h2>Sección 2</h2>
<p>Esta es la sección 2 del sitio web, con estilo normal.</p>
</section>
<section id="seccion3" class="destacada" style="background-color: lightblue;">
<h2>Sección 3</h2>
<p>Esta es la sección 3 del sitio web, con estilo destacado y fondo azul claro.</p>
</section>
</main>
<footer>
<p>Todos los derechos reservados.</p>
</footer>
</body>
En este ejemplo, se utiliza el atributo id para identificar de forma única cada sección y hacer referencia a ellas desde los enlaces de la barra de navegación.
Además, se utiliza el atributo class para asignar diferentes estilos a cada sección y el atributo style para especificar estilos CSS adicionales para cada sección.
Más ejemplos
Aquí hay dos ejemplos de cómo se pueden utilizar la etiqueta <section> en HTML5:
Ejemplo 1:
<body>
<header>
<h1>Mi sitio web</h1>
<nav>
<ul>
<li><a href="#introduccion">Introducción</a></li> <li><a href="#caracteristicas">Características</a></li> <li><a href="#ventajas">Ventajas</a></li> </ul>
</nav>
</header>
<main>
<section id="introduccion" class="destacada">
<h2>Introducción</h2>
<p>Bienvenidos a mi sitio web, donde encontrarás información sobre un producto innovador y único en su clase.</p>
</section>
<section id="caracteristicas" class="normal">
<h2>Características</h2>
<ul>
<li>Diseño elegante y compacto</li>
<li>Pantalla táctil de alta resolución</li>
<li>Cámara trasera de alta calidad</li>
<li>Procesador rápido y eficiente</li>
</ul>
</section>
<section id="ventajas" class="destacada">
<h2>Ventajas</h2>
<ul>
<li>Uso intuitivo y fácil</li>
<li>Múltiples opciones de almacenamiento</li>
<li>Batería duradera</li>
<li>Soporte de actualizaciones y mejoras constantes</li>
</ul>
</section>
</main>
<footer>
<p>Todos los derechos reservados © 2026</p>
</footer>
</body>
En este ejemplo, se utiliza el atributo id para identificar de forma única cada sección y hacer referencia a ellas desde los enlaces de la barra de navegación.
Además, se utiliza el atributo class para asignar diferentes estilos a cada sección, de manera que la sección de introducción y ventajas tenga un estilo destacado y la sección de características tenga un estilo normal.
Ejemplo 2:
<body>
<header>
<h1>Mi periódico en línea</h1>
<nav>
<ul>
<li><a href="#nacionales">Noticias nacionales</a></li>
<li><a href="#internacionales">Noticias internacionales</a></li>
<li><a href="#deportes">Noticias deportivas</a></li>
<li><a href="#entretenimiento">Noticias de entretenimiento</a></li>
</ul>
</nav>
</header>
<main>
<section id="nacionales" class="destacada">
<h2>Noticias nacionales</h2>
<article>
<h3>Nueva medida del gobierno para combatir la inflación</h3>
<p>El gobierno anunció hoy una nueva medida económica para combatir la inflación que ha afectado al país en los últimos meses.</p>
<p>Esta medida consiste en un control de precios más estricto para los productos de la canasta básica y un aumento en la producción de alimentos en el país.</p>
</article>
<article>
<h3>Inauguración de nuevo hospital en la ciudad
<p>La ciudad acaba de inaugurar un nuevo hospital con equipamiento de última generación y un equipo médico altamente capacitado.</p>
<p>Este hospital será de gran ayuda para la población y mejorará la atención médica en la región.</p>
</article>
</section>
<section id="internacionales" class="normal">
<h2>Noticias internacionales</h2>
<article>
<h3>Acuerdo comercial entre países europeos</h3>
<p>Varios países europeos acaban de firmar un acuerdo comercial que impulsará el comercio entre ellos y mejorará la economía de la región.</p>
</article>
<article>
<h3>Nueva tecnología para el ahorro de energía en el hogar</h3>
<p>Una compañía tecnológica acaba de lanzar al mercado una nueva tecnología que permitirá a los hogares ahorrar hasta un 30% en el consumo de energía eléctrica.</p>
</article>
</section>
<section id="deportes" class="destacada">
<h2>Noticias deportivas</h2>
<article>
<h3>Nuevo récord mundial en natación</h3>
<p>Un nadador acaba de romper el récord mundial en la prueba de 200 metros estilo libre en los Juegos Olímpicos de la Juventud.</p>
<p>Este logro ha sido el resultado de años de arduo entrenamiento y dedicación por parte del atleta.</p>
</article>
<article>
<h3>Equipo de fútbol gana campeonato nacional</h3>
<p>El equipo de fútbol local acaba de ganar el campeonato nacional después de una intensa competencia contra otros equipos de la liga.</p>
<p>La victoria ha sido celebrada por los aficionados y se espera que el equipo siga mejorando en próximas temporadas.</p>
</article>
</section>
<section id="entretenimiento" class="normal">
<h2>Noticias de entretenimiento</h2>
<article>
<h3>Nueva película de acción en cartelera</h3>
<p>Una nueva película de acción ha llegado a las carteleras y se espera que sea un éxito en taquilla.</p>
<p>La película cuenta con un reparto estelar y efectos visuales impactantes.</p>
</article>
<article>
<h3>Concierto de música en vivo en la ciudad</h3>
<p>La ciudad acogerá próximamente un concierto de música en vivo con algunos de los artistas más populares de la escena musical actual.</p>
<p>Este concierto promete ser una noche inolvidable para los amantes de la música.</p>
</article>
</section>
</main>
<footer>
Todos los derechos reservados © Mi periódico en línea 2026</p>
</footer>
</body>
En este ejemplo se utiliza la etiqueta <section> para separar las diferentes categorías de noticias en la página de un periódico en línea.
Cada sección incluye un título y varios artículos relacionados con las noticias. Además, se utilizan atributos como id y class para identificar cada sección y aplicar estilos en CSS.
La Etiqueta <article> en HTML
La etiqueta <article> en HTML5 es utilizada para definir un contenido autónomo y de importancia en una página web. Por ejemplo, una entrada de blog, una revisión, una publicación en un foro, etc.
Este contenido se mostrará de forma independiente y será más fácil de distribuir o reutilizar en otros contextos, como feed de noticias o búsqueda en un motor.
La etiqueta <article> puede tener encabezados, párrafos, listas, imágenes y otros elementos HTML como hijos.
Características de la etiqueta <article>
Además de lo mencionado anteriormente, la etiqueta <article> de HTML5 tiene las siguientes características:
Es un contenedor semántico: La etiqueta <article> permite a los desarrolladores web definir el contenido principal en una página web, mejorando la estructura y accesibilidad del sitio.
Mejora el SEO: Al marcar claramente el contenido principal de una página web, se mejora la capacidad de los motores de búsqueda para indexar el contenido y mostrar los resultados de búsqueda más relevantes.
Reutilización: Debido a que el contenido dentro de una etiqueta <article> es autónomo, se puede reutilizar en otras partes del sitio o incluso en otras páginas web.
Accesibilidad: Al utilizar la etiqueta <article> para identificar contenido autónomo, se facilita la navegación por parte de los usuarios de lectores de pantalla y otros dispositivos de accesibilidad.
Ejemplo de uso
Aquí te muestro un ejemplo de uso de la etiqueta <article> de HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de uso de la etiqueta article en HTML5</title>
</head>
<body>
<header>
<h1>Bienvenido a mi blog</h1>
</header>
<nav>
<ul>
<li><a href="#intro">Introducción</a></li>
<li><a href="#main-content">Contenido principal</a></li>
<li><a href="#conclusion">Conclusión</a></li>
</ul>
</nav>
<main>
<article id="intro">
<header>
<h2>Introducción al artículo</h2>
</header>
<p>Este es un artículo de ejemplo que muestra cómo utilizar la etiqueta article en HTML5.</p>
</article>
<article id="main-content">
<header>
<h2>Contenido principal</h2>
</header>
<p>Aquí es donde se incluye el contenido principal del artículo.</p>
<p>Puede incluir texto, imágenes, vídeos, tablas, etc.</p>
</article>
<article id="conclusion">
<header>
<h2>Conclusión</h2>
</header>
<p>En conclusión, la etiqueta article es una herramienta útil para mejorar la estructura y accesibilidad de un sitio web.</p>
</article>
</main>
<footer>
<p>© 2023 Por Mi Blog</p>
</footer>
</body>
</html>
En este ejemplo, utilizamos la etiqueta <article> para contener tres secciones distintas: introducción, contenido principal y conclusión.
Cada sección incluye un encabezado con un título y un párrafo de texto. Al utilizar la etiqueta <article> para identificar estas secciones, se mejora la estructura y accesibilidad de la página.
Atributos
La etiqueta <article> en HTML5 no tiene atributos específicos, pero puede utilizar los atributos globales como:
class: Este atributo se utiliza para identificar un estilo en un archivo CSS. Por ejemplo, <article class="news-story">
id: Este atributo se utiliza para identificar de manera única un elemento en una página HTML. Por ejemplo, <article id="main-story">
style: Este atributo se utiliza para aplicar estilos directamente a un elemento. Por ejemplo, <article style="background-color: lightgray;">
title: Este atributo se utiliza para proporcionar información adicional sobre el elemento. Por ejemplo, <article title="Artículo Principal">
lang: Este atributo se utiliza para especificar el idioma del contenido en un elemento. Por ejemplo, <article lang="es">.
Cada uno de estos atributos se puede utilizar para personalizar el aspecto y la funcionalidad de la etiqueta <article> en HTML5.
Sin embargo, es importante tener en cuenta que la mayoría de los estilos y la funcionalidad se deben proporcionar a través de archivos CSS externos para mantener una separación clara entre el contenido y el diseño.
Ejemplos con atributos A continuación, se muestra un ejemplo de uso de la etiqueta <article> con atributos en HTML5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de etiqueta article con atributos</title>
</head>
<body>
<!-- Artículo principal -->
<article id="noticia-principal" class="noticia" lang="es" title="Artículo de Noticias">
<h2>Título de la Noticia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis elit a sapien posuere, eu faucibus ante pharetra. Sed vel blandit velit. Aliquam rhoncus nulla vel velit commodo, vel rhoncus sapien bibendum.</p>
<p>Donec euismod dui eu dui fringilla, in congue sem tempor. Nulla facilisi. Nunc id dictum eros. Maecenas at diam vestibulum, convallis mi sit amet, volutpat mi.</p>
</article>
</body>
</html>
En este ejemplo, se utiliza la etiqueta <article> para contener una noticia en la página. Además, se utilizan varios atributos para personalizar el elemento:
id: se utiliza para identificar de manera única el elemento con el valor noticia-principal.
class: se utiliza para identificar un estilo con el valor noticia.
lang: se utiliza para especificar el idioma del contenido con el valor es.
title: se utiliza para proporcionar información adicional sobre el elemento con el valor Artículo de Noticias.
Este ejemplo muestra cómo utilizar la etiqueta <article> junto con los atributos en HTML5 para crear una estructura de contenido clara y accesible para los usuarios.
Más ejemplos
Aquí hay tres ejemplos de código HTML5 que utilizan la etiqueta <article>:
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta article</title>
</head>
<body>
<header>
<h1>Noticias sobre tecnología</h1>
</header>
<nav>
<ul>
<li><a href="#noticia1">Noticia 1</a></li>
<li><a href="#noticia2">Noticia 2</a></li>
<li><a href="#noticia3">Noticia 3</a></li>
</ul>
</nav>
<main>
<article id="noticia1">
<header>
<h2>Nuevo lanzamiento de smartphone</h2>
<p>Publicado el: <time datetime="2022-01-01">01 de enero de 2022</time></p>
</header>
<p>Se ha anunciado el lanzamiento de un nuevo smartphone con características avanzadas, como una cámara de alta resolución y un procesador más rápido que su predecesor.</p>
<p>Este nuevo dispositivo también incluye una batería de mayor duración y una pantalla de alta definición, lo que lo hace perfecto para aquellos que necesitan un teléfono potente y eficiente.</p>
</article>
<article id="noticia2">
<header>
<h2>Lanzamiento de un nuevo sistema operativo
Publicado el: <time datetime="2022-02-01">01 de febrero de 2022</time></p>
</header>
<p>Se ha anunciado el lanzamiento de un nuevo sistema operativo que promete mejorar la experiencia de usuario y aumentar la seguridad de los dispositivos.</p>
<p>Este sistema operativo incluye nuevas funciones y mejoras en el rendimiento, lo que lo hace ideal para aquellos que quieren un sistema más avanzado y seguro.</p>
</article>
<article id="noticia3">
<header>
<h2>Presentación de un nuevo servicio en la nube</h2>
<p>Publicado el: <time datetime="2022-03-01">01 de marzo de 2026</time></p>
</header>
<p>Se ha presentado un nuevo servicio en la nube que permite almacenar y compartir archivos de manera segura y eficiente en la nube.</p>
<p>Este servicio incluye funciones avanzadas de colaboración y seguridadad.</p>
</article>
</main>
</body>
</html>
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de artículos</title>
</head>
<body>
<header>
<h1>Noticias</h1>
</header>
<article>
<header>
<h2>Título del artículo 1</h2>
<p>Fecha: <time>2026-12-31</time></p>
</header>
<p>Contenido del artículo 1.</p>
<footer>
<p>Autor: <a href="#">John Doe</a></p>
</footer>
</article>
<article>
<header>
<h2>Título del artículo 2</h2>
<p>Fecha: <time>2026-12-31</time>
</header>
<p>Contenido del artículo 2.</p>
<footer>
<p>Autor: <a href="#">Jane Doe</a></p>
</footer>
</article>
</body>
</html>
Ejemplo 3:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de artículo en HTML5</title>
</head>
<body>
<header>
<h1>Mi primer artículo en HTML5</h1>
<nav>
<ul>
<li><a href="#seccion1">Sección 1</a></li>
<li><a href="#seccion2">Sección 2</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2 id="seccion1">Sección 1</h2>
<p>Este es el contenido de la sección 1 del artículo. Aquí se puede escribir todo tipo de información relevante para el usuario.</p>
<h2 id="seccion2">Sección 2</h2>
<p>Este es el contenido de la sección 2 del artículo. Aquí se puede escribir todo tipo de información relevante para el usuario.</p>
</article>
</main>
<footer>
<p>Copyright © 2026 por Mi nombre</p>
</footer>
</body>
</html>
La Etiqueta <aside> en HTML
La etiqueta <aside> en HTML5 es un contenedor para contenido secundario o lateral relacionado con el contenido principal de una página web. Es comúnmente utilizada para incluir contenido adicional, como barras laterales, widgets, menús de navegación, biografías de autor, etc.
El contenido dentro de la etiqueta <aside> se considera no esencial para la comprensión del contenido principal, pero puede ser útil o interesante para los usuarios.
Ejemplo de uso
Aquí hay un ejemplo de código HTML que muestra cómo utilizar la etiqueta <aside>:
<body>
<main>
<p>Este es el contenido principal de la página.</p>
</main>
<aside>
<p>Este es el contenido secundario de la página.</p>
</aside>
<
En este ejemplo, el contenido dentro de la etiqueta <main> representa el contenido principal de la página, mientras que el contenido dentro de la etiqueta <aside> representa el contenido secundario relacionado con el contenido principal. Además de su uso para contenido secundario, la etiqueta <aside> también puede ser utilizada para proporcionar información adicional relacionada con un bloque de contenido específico.
Por ejemplo, si se está hablando de una persona en un artículo, se puede utilizar la etiqueta <aside> para incluir información adicional sobre esa persona.
Atributos
La etiqueta <aside> en HTML5 no tiene atributos específicos. Sin embargo, puede aceptar cualquier atributo estándar de HTML como:
class: Este atributo permite especificar una o varias clases CSS para el elemento, lo que facilita la aplicación de estilos en el documento HTML.
id: Este atributo permite especificar un identificador único para el elemento, lo que permite acceder a él a través de un selector CSS o JavaScript.
style: Este atributo permite especificar estilos CSS inline para el elemento, lo que permite aplicar estilos específicos directamente en el elemento, sin tener que crear una regla CSS separada.
title: Este atributo permite especificar información adicional sobre el elemento, que puede ser útil para describir su función o propósito.
Además de estos atributos, la etiqueta <aside> es compatible con los atributos globales de HTML, como lang, dir, accesskey, entre otros.
Ejemplo
Aquí hay un ejemplo completo que se utiliza los atributos en la etiqueta <aside> de HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de etiqueta <aside></title>
<style>
.sidebar {
background-color: lightgray;
padding: 20px;
width: 200px;
float: right;
}
</style>
</head>
<body>
<header>
<h1>Mi sitio web</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<main>
<h2>Bienvenido a mi sitio web</h2>
<p>Este es el contenido principal de mi sitio web.</p>
</main>
<aside class="sidebar" id="sidebar-1" style="background-color: lightgray; padding: 20px;" title="Información adicional">
<h3>Artículos relacionados</h3>
<ul>
<li><a href="#">Artículo 1</a></li>
<li><a href="#">Artículo 2</a></li>
<li><a href="#">Artículo 3</a></li>
</ul>
</aside>
<footer>
<p>© 2023 Mi sitio web</p>
</footer>
</body>
</html>
En este ejemplo, se muestra una estructura básica de una página web que incluye un encabezado, una navegación, un contenido principal y un elemento <aside> en la parte derecha de la página.
El atributo class se utiliza para especificar la clase CSS “sidebar” para el elemento <aside>, mientras que el atributo id se utiliza para especificar un identificador único para el elemento.
El atributo style se utiliza para especificar estilos CSS inline para el elemento, y el atributo title se utiliza para proporcionar información adicional sobre el elemento.
Además de estos atributos, la etiqueta <aside> es compatible con los atributos globales de HTML, como lang, dir, accesskey, entre otros.
Ejemplo:
Aquí tienes otro ejemplo de código HTML que incluye los atributos lang, dir y accesskey en la etiqueta <aside>:
<aside lang="es" dir="ltr" accesskey="s" class="sidebar" id="sidebar-1" style="background-color: #f2f2f2; padding: 20px;">
<h3>Información adicional</h3>
<p>Esta es una sección lateral con información adicional sobre el tema principal de la página.</p>
</aside>
lang: Este atributo permite especificar el idioma del contenido dentro de la etiqueta <aside>. En este caso, se estableció el idioma como español.
dir: Este atributo permite especificar la dirección del texto dentro de la etiqueta <aside>. En este caso, se estableció la dirección del texto como “ltr” (izquierda a derecha).
accesskey: Este atributo permite establecer una tecla de acceso rápido para el elemento. En este caso, se estableció la tecla de acceso rápido como “s”. Esto permite a un usuario acceder a la sección lateral presionando la tecla “Alt + s” en un teclado.
Más ejemplos
Aquí hay algunos ejemplos de cómo se puede utilizar la etiqueta <aside> en HTML5:
1. Barra lateral con información adicional
:<aside>
<h3>Información adicional</h3>
<p>Aquí puedes encontrar más información sobre el tema del artículo.</p>
<ul>
<li><a href="#">Enlaces relacionados</a></li>
<li><a href="#">Recursos adicionales</a></li>
</ul>
</aside>
2. Bloque con citas o testimonios
:<aside>
<h3>Testimonios</h3>
<blockquote>
<p>"Este producto ha cambiado mi vida."</p>
<footer>John Doe</footer>
</blockquote>
<blockquote>
<p>"No podría estar más contento con mi compra."</p>
<footer>Jane Doe</footer>
</blockquote>
</aside>
3. Widget de redes sociales
:<aside>
<h3>Síguenos en nuestras redes sociales</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</aside>
En cada uno de estos ejemplos, la etiqueta <aside> se utiliza para marcar contenido secundario que está relacionado con el contenido principal del documento, pero que puede ser considerado independiente.
La Etiqueta <footer> en HTML
El uso de etiquetas semánticas como <footer> no solo mejora la organización del contenido, sino que también optimiza la accesibilidad y el SEO, ya que los motores de búsqueda y los lectores de pantalla pueden interpretar mejor la estructura de la página.
¿Qué es la etiqueta <footer> en HTML?
La etiqueta <footer> es una de las nuevas etiquetas semánticas introducidas en HTML5. Se utiliza para definir la sección de pie de página de un documento o una sección específica.
Es común ver la etiqueta <footer> al final de una página web, donde se incluye información como:
Derechos de autor.
Enlaces a políticas de privacidad o términos de uso.
Información de contacto.
Enlaces a redes sociales.
Uso en diferentes secciones
Es importante destacar que la etiqueta <footer> puede usarse varias veces en un documento HTML. Esto significa que no solo debe utilizarse al final del documento completo, sino también al final de secciones importantes como <article>, <section>, o <aside>. En estos casos, el contenido del pie de página debe estar relacionado directamente con la sección en la que aparece.
Ejemplo de uso
A continuación, te dejo un ejemplo básico de cómo se usa la etiqueta <footer>:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi sitio web</title>
</head>
<body>
<header>
<h1>Bienvenido a mi sitio web</h1>
<nav>
<ul>
<li><a href="#">Inicio</li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Sobre nosotros</h2>
<p>Somos una empresa dedicada a ofrecer los mejores servicios en tecnología.</p>
</section>
</main>
<footer>
<p>Derechos de autor © 2026. Mi sitio web.</p>
<p>Contáctanos: <a href="mailto:info@misitioweb.com">info@misitioweb.com</a></p>
<ul>
<li><a href="#">Política de Privacidad</a></li>
<li><a href="#">Términos de Uso</a></li>
</ul>
</footer>
</body>
</html>
Explicación del ejemplo
En este ejemplo:
La etiqueta <footer> contiene dos párrafos con información de derechos de autor y el correo electrónico de contacto. Además, se incluye una lista con enlaces a la Política de Privacidad y Términos de Uso.
Este uso permite identificar fácilmente el área destinada al pie de página, mejorando la accesibilidad y el SEO del sitio.
¿Qué puedes incluir en el <footer>?
El contenido dentro de un <footer> puede variar según el tipo de sitio web, pero algunos ejemplos comunes son:
Información de derechos de autor: “Derechos de autor © 2026”.
Enlaces importantes: Política de privacidad, términos de uso, o enlaces a páginas relacionadas.
Datos de contacto: Correo electrónico, número de teléfono o dirección física.
Enlaces a redes sociales: Facebook, Twitter, Instagram, etc.
Contenido inapropiado en <footer>
Es importante señalar que, aunque puedes incluir una gran variedad de contenido en el <footer>, ciertos elementos no son apropiados. Por ejemplo, un elemento <header>, que define encabezados, no debería estar en un pie de página, ya que semánticamente no tiene sentido.
El <footer> debe contener información relevante relacionada con el contenido principal o con la sección en la que está ubicado, pero no debe contener encabezados u otros elementos que interfieran con la estructura lógica de la página.
Atributos de la etiqueta <footer>
La etiqueta <footer> no tiene atributos específicos propios, pero admite todos los atributos globales de HTML5, que puedes usar para mejorar su funcionalidad y accesibilidad.
Atributos globales comunes en <footer>
A continuación, te presento algunos de los atributos globales más utilizados con la etiqueta <footer>:
class: Se usa para asignar una o más clases CSS, lo que permite aplicar estilos específicos al pie de página.
<footer class="footer-clase">
id: Asigna un identificador único al <footer>, permitiendo referenciarlo desde otras partes del documento o estilos CSS
. <footer id="pie-pagina">
style: Permite aplicar estilos CSS directamente en línea, aunque no se recomienda en proyectos grandes, ya que es mejor usar una hoja de estilo externa.
<footer style="background-color: lightgray;">
title: Añade un texto descriptivo que aparece cuando colocas el cursor sobre el pie de página.
<footer title="Pie de página del sitio web">
tabindex: Controla el orden de tabulación al navegar por el sitio usando la tecla Tab.
<footer tabindex="1">
role: Define el rol semántico del elemento para mejorar la accesibilidad. En el caso de <footer>, a menudo se asigna el rol contentinfo.
<footer role="contentinfo">
lang: Especifica el idioma principal del contenido del pie de página, lo que puede ayudar a motores de búsqueda y otros sistemas.
<footer lang="en">
hidden: Oculta el <footer> del documento, útil para ocultar contenido que no debería ser visible para ciertos usuarios o dispositivos.
<footer hidden>
Ejemplo de uso
Aquí tienes un ejemplo práctico que muestra cómo se pueden aplicar algunos de estos atributos globales a la etiqueta <footer>:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso de la etiqueta footer</title>
<style>
.footer {
background-color: #f4f4f4;
text-align: center;
padding: 20px;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Título del documento</h1>
<p>Contenido del documento.</p>
<footer class="footer" id="pie-pagina" lang="es" title="Pie de página" role="contentinfo">
<p>Derechos de autor © 2026. Mi sitio web.</p>
<p>Contáctanos en: <a href="mailto:info@misitioweb.com">info@misitioweb.com</a></p>
</footer>
</body>
</html>
Explicación del ejemplo
En este ejemplo:
Clase y id: La clase footer permite aplicar un estilo específico al pie de página (color de fondo, alineación, etc.), mientras que el ID pie-pagina lo hace único para poder ser referenciado desde otros lugares, como hojas de estilo o JavaScript.
lang: Indica que el idioma del contenido dentro del <footer> es español.
title: Proporciona un texto descriptivo que se muestra cuando el usuario coloca el cursor sobre el pie de página.
role: Se utiliza el rol contentinfo, que es el recomendado para el contenido de pie de página, mejorando la accesibilidad para lectores de pantalla y otros dispositivos.
Más ejemplos
A continuación, te presento dos ejemplos avanzados de cómo utilizar la etiqueta <footer> en HTML5.
Ejemplo 1: Pie de página con enlaces y logo
Este ejemplo muestra cómo usar la etiqueta <footer> para crear un pie de página con un logo y enlaces a páginas importantes como el aviso legal, la política de privacidad y los términos y condiciones.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie de página con enlaces y logo</title>
<style>
.footer {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.footer-logo {
width: 100px;
}
.footer-links a {
color: #666;
text-decoration: none;
margin: 0 10px;
}
.footer-links a:hover {
color: #000;
} </style>
</head>
<body>
<h1>Título del documento</h1>
<p>Contenido del documento.</p>
<footer class="footer">
<img class="footer-logo" src="logo.png" alt="Logo de la empresa">
<div class="footer-links">
<a href="#">Aviso legal</a>
<a href="#">Política de privacidad</a>
<a href="#">Términos y condiciones</a>
</div>
</footer>
</body>
</html>
Explicación del ejemplo:
La etiqueta <footer> define el pie de página del documento, que incluye un logo y una serie de enlaces importantes. Se aplican estilos CSS para darle un diseño simple pero atractivo:
Fondo gris claro.
Texto centrado.
Espaciado (padding) de 20px.
La clase .footer-links se encarga de dar un margen entre los enlaces, evitando que se vean juntos. Además, los enlaces cambian de color al pasar el cursor sobre ellos gracias a :hover.
Ejemplo 2: Pie de página con fecha de actualización automática
Este ejemplo utiliza la etiqueta <footer> junto con JavaScript para mostrar automáticamente la fecha de la última actualización del documento cada vez que se carga la página.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie de página con fecha de actualización automática</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
var fecha = new Date();
var ano = fecha.getFullYear();
var mes = ('0' + (fecha.getMonth() + 1)).slice(-2);
var dia = ('0' + fecha.getDate()).slice(-2);
var fechaActual = dia + '/' + mes + '/' + ano;
document.getElementById("fecha-actualizacion").textContent ='Última actualización: ' + fechaActual;
});
</script>
</head>
<body>
<h1>Título del documento</h1>
<p>Contenido del documento.</p>
<footer>
<p id="fecha-actualizacion"></p>
</footer>
</body>
</html>
Explicación del ejemplo:
La etiqueta <footer> contiene un párrafo donde se mostrará la fecha de la última actualización del documento.
Se usa JavaScript para obtener la fecha actual y mostrarla en el elemento con el id="fecha-actualizacion".
La función que actualiza la fecha se ejecuta cuando se carga completamente la página (gracias al evento DOMContentLoaded).
La fecha se muestra en formato DD/MM/AAAA, y se asegura que tanto el día como el mes tengan dos dígitos (por ejemplo, 01 en lugar de 1).
Conclusión
La etiqueta <footer> es fundamental para proporcionar información adicional en la parte inferior de tu sitio web.
Al usar esta etiqueta, ayudas a que los motores de búsqueda y los usuarios identifiquen rápidamente el pie de página, haciendo que tu sitio sea más accesible y organizado.
La Etiqueta <address> en HTML
También discutiremos las mejores prácticas para garantizar que la etiqueta <address> sea accesible y esté optimizada para todos los usuarios, así como los errores comunes que se deben evitar.
Al final de este artículo, tendrás un conocimiento sólido sobre la etiqueta <address> y cómo utilizarla de manera efectiva en tus proyectos de desarrollo web.
¿Qué es la etiqueta <address> en HTML?
La etiqueta <address> es un elemento HTML5 que se utiliza para representar información de contacto relacionada con el contenido de una página web o una sección específica dentro de ella.
Esto puede incluir direcciones físicas, números de teléfono, direcciones de correo electrónico, enlaces a redes sociales u otra información de contacto relevante.
La etiqueta <address> ayuda a los desarrolladores a proporcionar una estructura semántica adecuada al contenido de contacto y a distinguirlo claramente del resto del contenido en la página.
Por lo general, la etiqueta <address> se utiliza en combinación con otras etiquetas HTML5 para proporcionar información de contacto en contextos específicos, como en la sección de pie de página (<footer>) o en la sección de encabezado (<header>) de un sitio web.
Ejemplo de uso
También puede ser utilizada dentro de un elemento <article> para indicar información de contacto relacionada con el autor del contenido.
A continuación, se muestra un ejemplo básico de cómo se ve una etiqueta <address> en el código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta address</title>
</head>
<body>
<h1>Mi sitio web</h1>
<p>Este es un ejemplo de cómo utilizar la etiqueta address en HTML5.</p>
<address>
Nombre de la empresa
Calle y número
Ciudad, Código postal
País
Teléfono: +1 (555) 123-4567
Correo electrónico: <a href="mailto:info@example.com">info@example.com</a>
</address>
</body>
</html>
Cabe destacar que la etiqueta <address> no debe utilizarse para representar cualquier dirección o información de contacto que aparezca en la página, sino que está destinada a indicar información de contacto específicamente relacionada con el contenido principal de la página o sección.
Atributos de la etiqueta <address>
La etiqueta <address> no cuenta con atributos específicos, pero puede utilizar atributos globales comunes a todas las etiquetas HTML5.
A continuación, se presentan algunos ejemplos de cómo aplicar estos atributos a la etiqueta <address>:
id - El atributo id se utiliza para asignar un identificador único a un elemento HTML y es útil para aplicar estilos CSS específicos o manipular el contenido a través de JavaScript.
Ejemplo:
<address id="contact-info">
Nombre de la empresa
...
</address>
class - El atributo class permite asignar una o más clases a un elemento HTML para aplicar estilos CSS o manipular el contenido mediante JavaScript.
Ejemplo:
<address class="footer-address">
Nombre de la empresa
...
</address>
style: El atributo style permite aplicar estilos CSS directamente en línea a un elemento HTML. Sin embargo, es recomendable utilizar hojas de estilo en lugar de estilos en línea para una mejor organización y mantenimiento del código.
Ejemplo:
<address style="font-style: normal;">
Nombre de la empresa
...
</address>
title: El atributo title se utiliza para proporcionar información adicional sobre un elemento HTML y se muestra como un tooltip al pasar el cursor sobre el elemento.
Ejemplo:
<address title="Información de contacto de la empresa">
Nombre de la empresa
...
</address>
lang: El atributo lang indica el idioma del contenido del elemento HTML y puede ser útil para aplicar estilos específicos de idioma o para fines de accesibilidad.
<address lang="es">
Nombre de la empresa
... </address>
dir: El atributo dir indica la dirección del texto en un elemento HTML y puede ser útil para estilizar contenido en idiomas que se escriben de derecha a izquierda, como el árabe o el hebreo.
Ejemplo:
<address dir="rtl">
Nombre de la empresa
...
</address>
data-: El atributo “data-” permite agregar atributos personalizados a los elementos HTML para almacenar datos adicionales que pueden ser utilizados por JavaScript.
Ejemplo:
<address data-company-id="1234">
Nombre de la empresa
...
</address>
aria-: Los atributos “aria-” son parte de ARIA (Accessible Rich Internet Applications) y se utilizan para mejorar la accesibilidad del contenido en aplicaciones web.
Ejemplo:
<address aria-label="Información de contacto">
Nombre de la empresa
...
</address>
Al utilizar estos atributos en la etiqueta <address>, puedes mejorar la apariencia, la funcionalidad y la accesibilidad de la información de contacto en tu sitio web.
Uso correcto de la etiqueta <address>
La etiqueta <address> debe utilizarse para representar información de contacto específicamente relacionada con el contenido principal de la página o sección.
A continuación, se describen algunas situaciones en las que es apropiado utilizar la etiqueta <address> y se proporcionan ejemplos de cómo usarla correctamente en diferentes contextos.
1. Pie de página
Puedes utilizar la etiqueta <address> en la sección de pie de página (<footer>) de un sitio web para proporcionar información de contacto de la empresa o la organización responsable del sitio.
Ejemplo:
<footer>
<address>
Nombre de la empresa
Calle y número
Ciudad, Código postal
País
Teléfono: +1 (555) 123-4567
Correo electrónico: <a href="mailto:info@example.com">info@example.com</a>
</address>
</footer>
2. Encabezado
La etiqueta <address> también puede utilizarse en la sección de encabezado (<header>) para proporcionar información de contacto rápida y accesible a los visitantes del sitio web.
Ejemplo:
<header>
<address>
Teléfono: +1 (555) 123-4567 | Correo electrónico: <a href="mailto:info@example.com">info@example.com</a>
</address>
</header>
3. Información del autor
Si tienes un blog o un sitio web con contenido generado por múltiples autores, puedes utilizar la etiqueta <address> dentro de un elemento <article> para indicar información de contacto relacionada con el autor del contenido.
Ejemplo:
<article>
<h1>Título del artículo</h1>
<p>Contenido del artículo...</p>
<address>
Autor: Jane Doe
Correo electrónico: <a href="mailto:jane.doe@example.com">jane.doe@example.com</a>
</address>
</article>
4. Información de contacto en una página “Sobre nosotros” o “Contacto”
La etiqueta <address> también puede utilizarse en páginas dedicadas a proporcionar información de contacto o detalles sobre la empresa u organización.
Ejemplo:
<section>
<h2>Información de contacto</h2>
<address> Nombre de la empresa
Calle y número
Ciudad, Código postal
País
Teléfono: +1 (555) 123-4567
Correo electrónico: <a href="mailto:info@example.com">info@example.com</a>
</address>
</section>
Recuerda que la etiqueta <address> no debe utilizarse para representar cualquier dirección o información de contacto que aparezca en la página, sino que está destinada a indicar información de contacto específicamente relacionada con el contenido principal de la página o sección.
Utilizarla correctamente garantiza una estructura semántica adecuada y facilita la accesibilidad del contenido.
Estilos y formatos de la etiqueta <address>
La etiqueta <address> se puede personalizar mediante estilos CSS para adaptar su apariencia y formato al diseño general del sitio web.
A continuación, se presentan algunos ejemplos de cómo aplicar estilos CSS a la etiqueta <address> de manera más sofisticada:
Restablecer el estilo de fuente
Por defecto, los navegadores suelen mostrar el contenido de la etiqueta <address> en cursiva. Si deseas cambiar el estilo de fuente, puedes hacerlo utilizando CSS.
Ejemplo:
address { font-style: normal; }
Lenguaje del código: CSS (css)
Agregar espaciado y márgenes
Para mejorar la legibilidad y la apariencia de la información de contacto, puedes ajustar el espaciado, los márgenes y el interlineado utilizando CSS.
Ejemplo:
address {
margin: 0;
padding: 1em;
line-height: 1.5;
}
Personalizar los enlaces
Si tu etiqueta <address> incluye enlaces a direcciones de correo electrónico, páginas web o perfiles de redes sociales, puedes personalizar su estilo para que se ajuste al diseño de tu sitio web, incluidos los estados de enlace, como hover y focus.
Ejemplo:
address a {
color: #333;
text-decoration: none;
}
address a:hover,
address a:focus {
text-decoration: underline;
}
Agregar iconos
Puedes agregar iconos para representar de manera más visual el tipo de información de contacto (teléfono, correo electrónico, dirección, etc.). Puedes utilizar bibliotecas de iconos como Font Awesome o simplemente imágenes SVG.
A continuación, se muestra un ejemplo utilizando Font Awesome, con una estructura más ordenada y estilos adicionales:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estilos y formatos de la etiqueta <address></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
<style>
address {
font-style: normal;
margin: 0;
padding: 1em;
line-height: 1.5;
}
address a {
color: #333;
text-decoration: none;
}
address a:hover,
address a:focus {
text-decoration: underline;
}
address i {
margin-right: 0.5em;
}
</style>
</head>
<body>
<address> <i class="fas fa-building"></i>Nombre de la empresa
<i class="fas fa-map-marker-alt"></i>Calle y número, Ciudad, Código postal, País
<i class="fas fa-phone"></i>Teléfono: +1 (555) 123-4567
<i class="fas fa-envelope"></i>Correo electrónico: <a href="mailto:info@example.com">info@example.com</a> </address> </body>
</html>
Estos ejemplos muestran cómo se pueden aplicar estilos y formatos personalizados a la etiqueta <address> para adaptarla al diseño del sitio web.
Puedes experimentar con diferentes estilos y combinaciones según tus necesidades y preferencias de diseño. Accesibilidad y la etiqueta <address>
La accesibilidad web es fundamental para garantizar que todos los usuarios, incluidas las personas con discapacidades, puedan acceder y utilizar el contenido de tu sitio web.
La etiqueta <address> puede contribuir a mejorar la accesibilidad cuando se utiliza de manera adecuada y se combinan con atributos y técnicas adicionales.
A continuación, se presentan algunas recomendaciones y ejemplos para mejorar la accesibilidad de la etiqueta <address>:
Usar atributos ARIA
Los atributos ARIA (Accessible Rich Internet Applications) mejoran la accesibilidad del contenido al proporcionar información adicional a las tecnologías de asistencia, como lectores de pantalla.
Por ejemplo, puedes usar el atributo aria-label para describir el propósito de la etiqueta <address>.
Ejemplo:
<address aria-label="Información de contacto de la empresa">
Nombre de la empresa
...
</address>
Estructurar la información
Organizar la información de contacto utilizando etiquetas semánticas y estructurales, como <div> o <span>, puede ayudar a las tecnologías de asistencia a comprender y navegar mejor por el contenido.
Ejemplo:
<address>
<div>
<span>Nombre de la empresa</span>
</div>
<div>
<span>Calle y número, Ciudad, Código postal, País</span>
</div>
<div>
<span>Teléfono: +1 (555) 123-4567</span>
</div>
<div>
<span>Correo electrónico: <a href="mailto:info@example.com">info@example.com</a></span>
</div>
</address>
Etiquetar enlaces
Cuando utilices enlaces en la etiqueta <address>, asegúrate de que sean claros y descriptivos para que las personas que usan tecnologías de asistencia, como lectores de pantalla, puedan comprender el propósito del enlace.
También puedes agregar atributos ARIA, como aria-label, para proporcionar información adicional sobre el enlace.
Ejemplo:
<address>
...
<span>Correo electrónico: <a href="mailto:info@example.com" aria-label="Enviar correo electrónico a info@example.com">info@example.com</a></span>
</address>
Idioma y dirección del texto
Utiliza los atributos lang y dir para indicar el idioma y la dirección del texto en la etiqueta <address>. Esto facilitará a las tecnologías de asistencia interpretar y presentar correctamente el contenido.
Ejemplo:
<address lang="es" dir="ltr">
Nombre de la empresa
...
</address>
Al aplicar estas técnicas y atributos en la etiqueta <address>, puedes mejorar la accesibilidad de la información de contacto en tu sitio web y garantizar que todos los usuarios puedan acceder y comprender el contenido de manera efectiva. Errores comunes y cómo evitarlos
Es fundamental utilizar correctamente la etiqueta <address> para garantizar una estructura semántica adecuada y mejorar la accesibilidad del contenido.
A continuación, se enumeran algunos errores comunes al usar la etiqueta <address> y cómo evitarlos:
Error 1: Usar <address> para cualquier dirección o información de contacto
La etiqueta <address> está destinada a representar información de contacto relacionada específicamente con el contenido principal de la página o sección.
Cómo evitarlo:
Usa la etiqueta <address> solo para información de contacto relevante, como la información de contacto del autor de un artículo o la información de contacto de una empresa en un pie de página.
No utilices la etiqueta <address> para representar direcciones o información de contacto sin relación directa con el contenido principal.
Incorrecto:
<address>
Calle Falsa 123, Springfield
</address>
Correcto:
<article>
<h1>Título del artículo</h1>
<p>Contenido del artículo...</p>
<address>
Autor: Juan Pérez
Correo electrónico: <a href="mailto:juan@example.com">juan@example.com</a>
</address>
</article>
Error 2: Usar <address> para estilos de texto en lugar de su propósito semántico
Algunos desarrolladores usan la etiqueta <address> para aplicar estilos de texto, como cursiva, en lugar de su propósito semántico.
Cómo evitarlo:
Utiliza estilos CSS para aplicar estilos de texto, como cursiva, en lugar de abusar de la etiqueta <address> para fines estilísticos.
Asegúrate de que el uso de la etiqueta <address> esté relacionado con la información de contacto específica.
Incorrecto:
<p>Este es un párrafo normal y<address> este texto está en cursiva</address> debido al uso incorrecto de la etiqueta address. </p>
Correcto:
Este es un párrafo normal y este texto está en cursiva utilizando estilos CSS en lugar de la etiqueta address.
<style>.italic {
font-style: italic;
}
</style>
<p>Este es un párrafo normal y <span class="italic">este texto está en cursiva</span> utilizando estilos CSS en lugar de la etiqueta address.</p>
Error 3: Incluir información no relacionada dentro de la etiqueta <address>
Incluir contenido no relacionado, como texto adicional o enlaces no relacionados con la información de contacto, dentro de la etiqueta <address> puede generar confusión y afectar la accesibilidad.
Cómo evitarlo:
Incluye solo información de contacto específica dentro de la etiqueta <address>.
Si necesitas incluir contenido adicional, sepáralo utilizando otras etiquetas HTML, como <div> o <p>.
Incorrecto:
<address>
Nombre de la empresa
Calle y número, Ciudad, Código postal, País
Teléfono: +1 (555) 123-4567
<a href="/politica-de-privacidad">Política de privacidad</a>
</address>
Correcto:
<address>
Nombre de la empresa
Calle y número, Ciudad, Código postal, País
Teléfono: +1 (555) 123-4567
</address>
<p><a href="/politica-de-privacidad">Política de privacidad</a></p>
Error 4: No utilizar etiquetas y atributos adicionales para mejorar la accesibilidad
La accesibilidad es fundamental para garantizar que todos los usuarios puedan acceder y utilizar el contenido de tu sitio web.
Cómo evitarlo:
Asegúrate de utilizar etiquetas y atributos adicionales, como atributos ARIA y etiquetas semánticas, para mejorar la accesibilidad de la información de contacto en la etiqueta <address>.
Incorrecto:
<address>
Nombre de la empresa
...
</address>
Correcto:
<address aria-label="Información de contacto de la empresa">
<div>
Nombre de la empresa</span>
</div>
...
</address>
Error 5. Utilizar <address> como contenedor principal
La etiqueta <address> no debe utilizarse como contenedor principal de la página. En su lugar, utiliza etiquetas semánticas adecuadas, como <header>, <nav>, <main> y <footer> para estructurar el contenido de la página.
Error:
<address>
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
</address>
Solución:
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>
<address>
...
</address>
</footer>
Al evitar estos errores comunes, puedes garantizar que la etiqueta <address> se utilice de manera efectiva y adecuada en tu sitio web, mejorando la estructura semántica y la accesibilidad del contenido.