Saltar a contenido

Etiquetas Semánticas

Las etiquetas semánticas de HTML son aquellas que describen el propósito y la estructura del contenido que contienen. A diferencia de las etiquetas no semánticas, como <div> o <span>, las etiquetas semánticas dan más significado al navegador y a los motores de búsqueda, ayudando a mejorar la accesibilidad y la optimización SEO de un sitio web.

  • Ejemplo de etiqueta semántica: <article>, que indica que el contenido dentro de esta etiqueta es un artículo independiente.
  • Ejemplo de etiqueta no semántica: <div>, que solo agrupa contenido sin aportar información sobre su propósito.

Principales Etiquetas Semánticas de HTML

Encabezados (<header>)

El <header> define el encabezado de una página o de una sección dentro de la página. Suele contener el logotipo, el título del sitio web y, en algunos casos, menús de navegación.

<header>
    <h1>Mi Sitio Web</h1>
    <nav>...</nav>
</header>

La etiqueta <nav> identifica un bloque de enlaces de navegación. Se utiliza para representar el conjunto de enlaces que permiten navegar por las diferentes secciones de un sitio web.

<nav>
    <ul>
        <li><a href="index.html">Inicio</a></li>
        <li><a href="about.html">Sobre nosotros</a></li>
    </ul>
</nav>

Sección Principal (<main>)

El elemento <main> contiene el contenido principal de la página web. Solo debe haber un <main> por página, y su contenido debe ser único y relevante para la página específica.

<main>
    <article>...</article>
</main>

Artículo (<article>)

La etiqueta <article> se utiliza para representar contenido independiente, como una noticia, una entrada de blog o cualquier otro tipo de publicación que podría ser distribuida o compartida de manera independiente.

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

Sección (<section>)

El elemento <section> agrupa contenido temático dentro de una página. A diferencia de <div>, <section> tiene un significado semántico que denota que su contenido está relacionado temáticamente.

<section>
    <h2>Sección de servicios</h2>
    <p>Descripción de los servicios ofrecidos...</p>
</section>

La etiqueta <footer> representa el pie de página de un documento o una sección. Suele contener información como derechos de autor, enlaces a políticas de privacidad o contacto.

<footer>
    <p>&copy; 2024 Mi Sitio Web</p>
</footer>

Elemento Aparte (<aside>)

El elemento <aside> se utiliza para contenido que está relacionado tangencialmente con el contenido principal, como barras laterales, enlaces relacionados o anuncios.

<aside>
    <p>Enlaces relacionados:</p>
    <ul>
        <li><a href="#">Enlace 1</a></li>
    </ul>
</aside>

Relación entre las Etiquetas Semánticas

Las etiquetas semánticas no solo ayudan a estructurar mejor el contenido, sino que también permiten una jerarquía clara dentro del documento HTML.

Por ejemplo, el <header> suele ir al inicio del documento o de una sección, mientras que <footer> está al final. <main> contiene el contenido principal y puede estar compuesto por varias etiquetas como <article>, <section>, y <aside>.

La correcta anidación de estas etiquetas mejora la comprensión tanto para los usuarios como para los motores de búsqueda.

Actividad

  • PR 206 (RA1 / CE1b / IC2/ 5p) Realiza la estructura de tu currículum usando etiquetas semánticas.