Etiquetas Semánticas en HTML5

Introducción

Las etiquetas semánticas en HTML5 ayudan a estructurar el contenido de manera clara y significativa.

Etiqueta Header

Sintaxis:

<header>
    <!-- Contenido del encabezado -->
</header>

Ejemplo:

<header>
    <h1>Título de la WEB</h1>
</header>

Etiqueta Nav

Sintaxis:

<nav>
    <!-- Contenido de navegación -->
</nav>

Ejemplo:

<nav>
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>

Etiqueta Section

Sintaxis:

<section>
    <!-- Contenido de la sección -->
</section>

Ejemplo:

<section>
    <h2>Título de la Sección</h2>
    <p>Contenido de la sección.</p>
</section>

Etiqueta Article

Sintaxis:

<article>
    <!-- Contenido del artículo -->
</article>

Ejemplo:

<article>
    <h2>Título del Artículo</h2>
    <p>Contenido del artículo.</p>
</article>

Etiqueta Aside

Sintaxis:

<aside>
    <!-- Contenido lateral -->
</aside>

Ejemplo:

<aside>
    <h3>Título del Aside</h3>
    <p>Contenido adicional.</p>
</aside>

Etiqueta Footer

Sintaxis:

<footer>
    <!-- Contenido del pie de página -->
</footer>

Ejemplo:

<footer>
    <p>© 2024 Mi Página Web</p>
</footer>