Inglés  
eSYNTAX Logo

Las etiquetas semánticas de HTML5 dan significado a la estructura de una página web, mejorando accesibilidad, SEO y código legible.

Potenciamos ¡Su Negocio!

Nuestros Servicios

Diseño de Sitios Web ResponsivosEstrategias de MarketingDesarrollo Cloud

Nuestra Compañía

Entradas de BlogAcerca de eSYNTAXPortafolio de ClientesPortafolio de Diseño Web
 
Página de Inicio
html-5-etiquetas-semanticas.jpg

HTML 5: Etiquetas Semánticas

HTML
esyntax.jpg  eSYNTAX    |    Ago 18, 2025

Las etiquetas semánticas de HTML5 son etiquetas especiales que le dicen a los navegadores y desarrolladores para qué sirve cada parte de una página web. Son mucho mejores que las etiquetas genéricas <div> porque le dan significado al código, lo que ayuda con la accesibilidad y el SEO (optimización para motores de búsqueda).

Etiquetas Estructurales

Estas etiquetas sirven para construir el diseño básico de una página web. Piense en ellas como el plano de una casa.

  • <header>: Es la introducción o el encabezado de un documento o una sección. Puede contener el logo del sitio, un encabezado principal y enlaces de navegación. Una página web puede tener varias etiquetas <header>.
  • <nav>: Esta etiqueta es para un conjunto de enlaces de navegación importantes. Úsela para envolver el menú principal de su sitio, una tabla de contenido o un conjunto de enlaces que ayuden a los usuarios a moverse.
  • <main>: Es el contenido principal de la página. Es la parte única que se visita, como una publicación de blog o la descripción de un producto. Un documento solo debe tener una etiqueta <main>.
  • <article>: Úsela para una pieza de contenido completa e independiente que podría ser leída por sí sola. Ejemplos incluyen una publicación de blog, una noticia o un comentario en un foro.
  • <section>: Es para una sección general de un documento. Agrupa contenido relacionado y casi siempre tiene un encabezado para explicar de qué se trata. Por ejemplo, una sección de "Servicios" o "Contáctenos" en una página de inicio.
  • <aside>: Esta etiqueta es para contenido que está relacionado con el contenido principal, pero que no es esencial para entenderlo. Generalmente se usa para barras laterales, citas o anuncios.
  • <footer>: Esta etiqueta es para el pie de página de un documento o una sección. A menudo contiene información de derechos de autor, detalles de contacto o enlaces a documentos relacionados. Una página web puede tener múltiples etiquetas <footer>.

Etiquetas Específicas de Contenido

Estas etiquetas le dan significado a piezas específicas de contenido dentro de la página.

  • <figure> y <figcaption>: Una etiqueta <figure> es para contenido autónomo, como una imagen, un diagrama o un bloque de código. La etiqueta opcional <figcaption> proporciona un título o una leyenda para ese contenido.
  • <mark>: Esta etiqueta resalta o marca texto que es de particular interés o relevancia.
  • <time>: Esta etiqueta representa un punto en el tiempo específico o un rango de tiempo. Es ideal para marcar fechas de publicación o horarios de eventos.
  • <details> y <summary>: La etiqueta <details> crea un widget de divulgación que el usuario puede hacer clic para mostrar u ocultar información adicional. La etiqueta <summary> proporciona el encabezado o título visible del widget.
  • <address>: Use esta etiqueta para proporcionar la información de contacto del autor/propietario de un documento o un artículo.

Beneficios Principales

Los beneficios de usar las etiquetas semánticas de HTML5 son principalmente una accesibilidad mejorada (ayuda a personas que usan tecnologías de asistencia como lectores de pantalla), una mejor optimización para motores de búsqueda (SEO) y una mayor legibilidad del código. Le dan significado a su código, lo que facilita que tanto los humanos como las máquinas lo entiendan.

HTML Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Publicación de Blog</title>
</head>
<body>
    <header>
        <h1>Mi Increíble Blog</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>
    <main>
        <article>
            <header>
                <h2>Etiquetas Semánticas de HTML5</h2>
                <p>Publicado el 20 de agosto de 2025</p>
            </header>
            <p>Las etiquetas semánticas de HTML5 como <main>, <article> y
            <section> hacen que su código sea más significativo y legible.</p>
            <section>
                <h3>Beneficios Estructurales</h3>
                <p>Usar estas etiquetas ayuda a los motores de búsqueda y a los
                lectores de pantalla a entender la estructura de tu contenido. Esto
                mejora el SEO y la accesibilidad.</p>
            </section>
            <aside>
                <h4>Acerca del Autor</h4>
                <p>John Doe es un desarrollador web al que le encanta escribir
                sobre HTML, CSS y JavaScript.</p>
            </aside>
            <figure>
                <img src="ruta-a-imagen" alt="Captura de pantalla de código." />
                <figcaption>Un ejemplo de código simple.</figcaption>
            </figure>
            <footer>
                <p>Categorizado en: HTML, Desarrollo Web</p>
            </footer>
        </article>
    </main>
    <footer>
        <p>&copy; 2025 Mi Increíble Blog. Todos los derechos reservados.</p>
    </footer>
</body>
</html>

Puede encontrar más ejemplos en w3schools

cPANEL